Can't replicate "Export data to csv" example

Community Support
1

Hi,

I tried to replicate this example https://demo.bokehplots.com/apps/export_csv

When I try it, nothing happens when I click the button. I copypasted the “download.js” from here bokeh/download.js at branch-3.0 · bokeh/bokeh · GitHub

From here I just had to do minor modification on “filetext” and “currRow”.

Here is the code I used, is anything wrong with the callback?

from bokeh.plotting import Figure, output_file

from bokeh.models import CustomJS, ColumnDataSource, Button

from bokeh.models.widgets import DataTable, TableColumn

from bokeh.layouts import gridplot

from bokeh.resources import CDN

from bokeh.embed import file_html

columns = [

			TableColumn(field='x',title='Site'),

			TableColumn(field='y',title='Latitude'),

		]

table_source = ColumnDataSource( data = {‘x’:[1,2,3],‘y’:[4,5,6]})

data_table = DataTable(source=table_source, columns=columns)

download_button = Button(label=‘Save Table to CSV’, button_type = “success”)

download_button.callback = CustomJS(args=dict(source=table_source),code="""

var data = source.data;

var filetext = ‘x,y\n’;

for (i=0; i < data[‘x’].length; i++) {

var currRow = [data[‘x’][i].toString(),

data[‘y’][i].toString().concat(’\n’)];

var joined = currRow.join();

filetext = filetext.concat(joined);

}

var filename = ‘data_result.csv’;

var blob = new Blob([filetext], { type: ‘text/csv;charset=utf-8;’ });

//addresses IE

if (navigator.msSaveBlob) {

navigator.msSaveBlob(blob, filename);

}

else {

var link = document.createElement(“a”);

link = document.createElement(‘a’)

link.href = URL.createObjectURL(blob);

link.download = filename

link.target = “_blank”;

link.style.visibility = ‘hidden’;

link.dispatchEvent(new MouseEvent(‘click’))

}

“”")

grid = gridplot([[download_button],[data_table]])

outfile=open(‘exportest.html’,‘w’)

outfile.write(file_html(grid,CDN,‘exportest’))

outfile.close()

``

2

Hi,

I would recommend trying using the same dataset that is provided. I ended up with the same issue but using the dataset that is given I was able to trace out my error.

Thanks!

···

On Wednesday, 11 January 2017 13:05:31 UTC-5, [email protected] wrote:

Hi,

I tried to replicate this example https://demo.bokehplots.com/apps/export_csv

When I try it, nothing happens when I click the button. I copypasted the “download.js” from here https://github.com/bokeh/bokeh/blob/master/examples/app/export_csv/download.js

From here I just had to do minor modification on “filetext” and “currRow”.

Here is the code I used, is anything wrong with the callback?

from bokeh.plotting import Figure, output_file

from bokeh.models import CustomJS, ColumnDataSource, Button

from bokeh.models.widgets import DataTable, TableColumn

from bokeh.layouts import gridplot

from bokeh.resources import CDN

from bokeh.embed import file_html

columns = [

  		TableColumn(field='x',title='Site'),

  		TableColumn(field='y',title='Latitude'),

  	]

table_source = ColumnDataSource( data = {‘x’:[1,2,3],‘y’:[4,5,6]})

data_table = DataTable(source=table_source, columns=columns)

download_button = Button(label=‘Save Table to CSV’, button_type = “success”)

download_button.callback = CustomJS(args=dict(source=table_source),code=“”"

var data = source.data;

var filetext = ‘x,y\n’;

for (i=0; i < data[‘x’].length; i++) {

var currRow = [data[‘x’][i].toString(),

data[‘y’][i].toString().concat(‘\n’)];

var joined = currRow.join();

filetext = filetext.concat(joined);

}

var filename = ‘data_result.csv’;

var blob = new Blob([filetext], { type: ‘text/csv;charset=utf-8;’ });

//addresses IE

if (navigator.msSaveBlob) {

navigator.msSaveBlob(blob, filename);

}

else {

var link = document.createElement(“a”);

link = document.createElement(‘a’)

link.href = URL.createObjectURL(blob);

link.download = filename

link.target = “_blank”;

link.style.visibility = ‘hidden’;

link.dispatchEvent(new MouseEvent(‘click’))

}

“”")

grid = gridplot([[download_button],[data_table]])

outfile=open(‘exportest.html’,‘w’)

outfile.write(file_html(grid,CDN,‘exportest’))

outfile.close()

``

3

Hi, thanks for the answer.

I found the error, which seems very silly and I am not sure why it even occurs at all.

I changed filetext to :

filetext = ‘x,y’+String.fromCharCode(10);

instead of :

filetext = ‘x,y\n’;

and it worked.

I was getting error messages in the console because of the use of \n in strings somehow …

···

Le mercredi 11 janvier 2017 13:32:30 UTC-5, [email protected] a écrit :

Hi,

I would recommend trying using the same dataset that is provided. I ended up with the same issue but using the dataset that is given I was able to trace out my error.

Thanks!

On Wednesday, 11 January 2017 13:05:31 UTC-5, [email protected] wrote:

Hi,

I tried to replicate this example https://demo.bokehplots.com/apps/export_csv

When I try it, nothing happens when I click the button. I copypasted the “download.js” from here https://github.com/bokeh/bokeh/blob/master/examples/app/export_csv/download.js

From here I just had to do minor modification on “filetext” and “currRow”.

Here is the code I used, is anything wrong with the callback?

from bokeh.plotting import Figure, output_file

from bokeh.models import CustomJS, ColumnDataSource, Button

from bokeh.models.widgets import DataTable, TableColumn

from bokeh.layouts import gridplot

from bokeh.resources import CDN

from bokeh.embed import file_html

columns = [

  		TableColumn(field='x',title='Site'),

  		TableColumn(field='y',title='Latitude'),

  	]

table_source = ColumnDataSource( data = {‘x’:[1,2,3],‘y’:[4,5,6]})

data_table = DataTable(source=table_source, columns=columns)

download_button = Button(label=‘Save Table to CSV’, button_type = “success”)

download_button.callback = CustomJS(args=dict(source=table_source),code=“”"

var data = source.data;

var filetext = ‘x,y\n’;

for (i=0; i < data[‘x’].length; i++) {

var currRow = [data[‘x’][i].toString(),

data[‘y’][i].toString().concat(‘\n’)];

var joined = currRow.join();

filetext = filetext.concat(joined);

}

var filename = ‘data_result.csv’;

var blob = new Blob([filetext], { type: ‘text/csv;charset=utf-8;’ });

//addresses IE

if (navigator.msSaveBlob) {

navigator.msSaveBlob(blob, filename);

}

else {

var link = document.createElement(“a”);

link = document.createElement(‘a’)

link.href = URL.createObjectURL(blob);

link.download = filename

link.target = “_blank”;

link.style.visibility = ‘hidden’;

link.dispatchEvent(new MouseEvent(‘click’))

}

“”")

grid = gridplot([[download_button],[data_table]])

outfile=open(‘exportest.html’,‘w’)

outfile.write(file_html(grid,CDN,‘exportest’))

outfile.close()

``

4

Try taking a look at this working example on another thread: Save plot data as csv