Make bokeh plot in a html file from querying api on the worldwide web

Hi,

Bokeh is a great package and so I first want to thank the developers for these tools and I am using bokeh 0.12.7.

I am looking to create a plot from data I download by a custom query to a api in django app.

I got the Select widget for user input and Button click to work using CustomJS. I just do not get the plot to update.

What am I missing in the following CustomJS callback?

source = ColumnDataSource(data=dict(x=[2],y=[2])

callback_click_crossfilter = CustomJS(args=dict(source=source),code="""
xhr = new XMLHttpRequest();
xhr.open(‘GET’, “https://researchdata.nist.gov/resource/x4qp-eedm.json?&dft_code=DMol3&crystal_structure=hcp”, true);
xhr.send();
xhr.onreadystatechange = processRequest;

function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
    console.log('ok');
    var response = JSON.parse(xhr.responseText);
    getData(response);
    console.log('finished');
}

}

function getData(main) {
    data = source.data;
    var x = data['x'];
    var y = data['y'];
    x = [];
    y = [];
    for (var i = 0; i < main.length; i++ ) {
        x.push(main[i].k_point_density_per_atom);
        y.push(main[i].precision_of_dft_energy_mev_per_atom);
    }
    console.log(x);

}
source.change.emit();
“”")

``

And the python functions:

plot = figure(plot_width=400, plot_height=400,x_axis_type=‘log’,y_axis_type=‘log’,
y_range = (1e-6,1), x_range = (10, 1e5),tools=‘box_zoom,hover,pan,reset’)
plot.circle(‘x’, ‘y’, source=source)

button = Button(label=‘CrossFilter’,button_type=‘success’)

button.js_on_event(events.ButtonClick,callback_click_crossfilter)

layout = column(button,plot)

output_file(“test.html”)
show(layout)

``

For the last console.log(x) I get the desired array that should go to source.data[‘x’] with the javascript I used. I intend to put this into a django app eventually. Please let me know if this is feasible for a python2.7 compatible bokeh.

Thanks

Joshua

You are not actually updating the data source. When you do this:

    x =
    y =

you are only setting the function's local x and y variables. The you push new values to these has no effect on the data source. You need to update the arrays in source.data in-place.

Thanks,

Bryan

···

On Jul 20, 2018, at 08:22, Josh Gabriel <[email protected]> wrote:

Hi,

Bokeh is a great package and so I first want to thank the developers for these tools and I am using bokeh 0.12.7.

I am looking to create a plot from data I download by a custom query to a api in django app.

I got the Select widget for user input and Button click to work using CustomJS. I just do not get the plot to update.

What am I missing in the following CustomJS callback?

source = ColumnDataSource(data=dict(x=[2],y=[2])

callback_click_crossfilter = CustomJS(args=dict(source=source),code="""
    xhr = new XMLHttpRequest();
    xhr.open('GET', "https://researchdata.nist.gov/resource/x4qp-eedm.json?&dft_code=DMol3&crystal_structure=hcp&quot;, true);
    xhr.send();
    xhr.onreadystatechange = processRequest;

    function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log('ok');
        var response = JSON.parse(xhr.responseText);
        getData(response);
        console.log('finished');
    }
}

    function getData(main) {
        data = source.data;
        var x = data['x'];
        var y = data['y'];
        x = ;
        y = ;
        for (var i = 0; i < main.length; i++ ) {
            x.push(main[i].k_point_density_per_atom);
            y.push(main[i].precision_of_dft_energy_mev_per_atom);
        }
        console.log(x);

}
source.change.emit();
""")

And the python functions:

plot = figure(plot_width=400, plot_height=400,x_axis_type='log',y_axis_type='log',\
                y_range = (1e-6,1), x_range = (10, 1e5),tools='box_zoom,hover,pan,reset')
plot.circle('x', 'y', source=source)

button = Button(label='CrossFilter',button_type='success')

button.js_on_event(events.ButtonClick,callback_click_crossfilter)

layout = column(button,plot)

output_file("test.html")
show(layout)

For the last console.log(x) I get the desired array that should go to source.data['x'] with the javascript I used. I intend to put this into a django app eventually. Please let me know if this is feasible for a python2.7 compatible bokeh.

Thanks
Joshua

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6b8497a5-5ea3-4a7d-9e8b-adc8ba5fbb12%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Hi Bryan,

Thanks for your reply. I made the following modification, console.log still works, but the plot does not update.

Here is the code I replaced:

function getData(main) {
    data = source.data;
    for (var i = 0; i < main.length; i++ ) {
        data['x'].push(main[i].k_point_density_per_atom);
        data['y'].push(main[i].precision_of_dft_energy_mev_per_atom);
    }
    console.log(data['x']);
    source.change.emit();

}

I think I may have got the position of the source.change.emit() should go? Can you reply with what code you would use if possible?

Thanks a lot,

Joshua

···

On Friday, July 20, 2018 at 11:33:07 AM UTC-4, Bryan Van de ven wrote:

You are not actually updating the data source. When you do this:

x = []

y = []

you are only setting the function’s local x and y variables. The you push new values to these has no effect on the data source. You need to update the arrays in source.data in-place.

Thanks,

Bryan

On Jul 20, 2018, at 08:22, Josh Gabriel [email protected] wrote:

Hi,

Bokeh is a great package and so I first want to thank the developers for these tools and I am using bokeh 0.12.7.

I am looking to create a plot from data I download by a custom query to a api in django app.

I got the Select widget for user input and Button click to work using CustomJS. I just do not get the plot to update.

What am I missing in the following CustomJS callback?

source = ColumnDataSource(data=dict(x=[2],y=[2])

callback_click_crossfilter = CustomJS(args=dict(source=source),code=“”"

xhr = new XMLHttpRequest();
xhr.open('GET', "[https://researchdata.nist.gov/resource/x4qp-eedm.json?&dft_code=DMol3&crystal_structure=hcp](https://researchdata.nist.gov/resource/x4qp-eedm.json?&dft_code=DMol3&crystal_structure=hcp)", true);
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
    console.log('ok');
    var response = JSON.parse(xhr.responseText);
    getData(response);
    console.log('finished');
}

}

function getData(main) {
    data = source.data;
    var x = data['x'];
    var y = data['y'];
    x = [];
    y = [];
    for (var i = 0; i < main.length; i++ ) {
        x.push(main[i].k_point_density_per_atom);
        y.push(main[i].precision_of_dft_energy_mev_per_atom);
    }
    console.log(x);

}

source.change.emit();

“”")

And the python functions:

plot = figure(plot_width=400, plot_height=400,x_axis_type=‘log’,y_axis_type=‘log’,\

            y_range = (1e-6,1), x_range = (10, 1e5),tools='box_zoom,hover,pan,reset')

plot.circle(‘x’, ‘y’, source=source)

button = Button(label=‘CrossFilter’,button_type=‘success’)

button.js_on_event(events.ButtonClick,callback_click_crossfilter)

layout = column(button,plot)

output_file(“test.html”)

show(layout)

For the last console.log(x) I get the desired array that should go to source.data[‘x’] with the javascript I used. I intend to put this into a django app eventually. Please let me know if this is feasible for a python2.7 compatible bokeh.

Thanks

Joshua


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6b8497a5-5ea3-4a7d-9e8b-adc8ba5fbb12%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.