[bokehJS] - minimal example updating line plot with json data

Thomas_Lecocq · April 29, 2014, 11:35am

Hi all,

I’m trying to make a minimal example of a line plot, that takes an external json content and plots it. I first would like just to load the json, not really have to rely on the bokeh-server or anything else… Once this is done, I want to be able to update the plot (say, click a button, multiply all elements from the data by 2, and update the view) … ?

Any hint ?

Thanks a lot,

Tom

Bryan · April 29, 2014, 2:17pm

Hi Thomas,

Right now Bokeh plots are only reactive from the updates from the server. Without the server, coupling a button press to "multiply all values by two" means that that data update has to happen purely in JavaScript. Perhaps we could think about exposing some kind of plug in system that allows events to be bound to arbitrary snippets of javascript, but there is no functionality for that currently.

Bryan

···

On Apr 29, 2014, at 6:35 AM, Thomas Lecocq <[email protected]> wrote:

Hi all,

I'm trying to make a minimal example of a line plot, that takes an external json content and plots it. I first would like just to load the json, not really have to rely on the bokeh-server or anything else... Once this is done, I want to be able to update the plot (say, click a button, multiply all elements from the data by 2, and update the view) ... ?

Any hint ?

Thanks a lot,

Tom

--
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/6727a554-3420-4e33-b676-85a3ccef2273%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Thomas_Lecocq · April 29, 2014, 3:35pm

Bryan,

Thanks for your comment.

I managed to expose almost enough of what I need… Could you just tell me how to trigger an update of the x_range,y_range, so the view fits the data added ?

Thanks

line.py example $(function() { data = {"attributes": {"column_names": ["x", "y"], "doc": null, "selected": [], "discrete_ranges": {}, "cont_ranges": {}, "data": {"y": [0.0, ], "x": [0.0, ]}, "id": "data"}, "type": "ColumnDataSource", "id": "data"}, all_models = [ data,

            {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "data"}, "columns": ["x"]}], "id": "bbd5dd00-5564-4e65-9169-5c149e857686", "doc": null}, "type": "DataRange1d", "id": "bbd5dd00-5564-4e65-9169-5c149e857686"},
           
            {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "data"}, "columns": ["y"]}], "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa", "doc": null}, "type": "DataRange1d", "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa"},
           
            {"attributes": {"doc": null, "id": "88360242-94ef-4839-abb4-d302553810d2"}, "type": "BasicTickFormatter", "id": "88360242-94ef-4839-abb4-d302553810d2"},
            {"attributes": {"doc": null, "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"}, "type": "BasicTicker", "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "bounds": "auto", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "88360242-94ef-4839-abb4-d302553810d2"}, "ticker": {"type": "BasicTicker", "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"}, "dimension": 0}, "type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "axis": {"type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"}, "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af", "dimension": 0}, "type": "Grid", "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af"},
            {"attributes": {"doc": null, "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"}, "type": "BasicTickFormatter", "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"},
            {"attributes": {"doc": null, "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"}, "type": "BasicTicker", "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "bounds": "auto", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"}, "ticker": {"type": "BasicTicker", "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"}, "dimension": 1}, "type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "91b7f168-6022-4019-98a9-31e6cd989671", "doc": null}, "type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"},
            {"attributes": {"doc": null, "tool": {"type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"}, "id": "c7af6b67-7298-4431-8000-4268b08e1ada"}, "type": "BoxSelection", "id": "c7af6b67-7298-4431-8000-4268b08e1ada"},
            {"attributes": {"data_source": {"type": "ColumnDataSource", "id": "data"}, "server_data_source": null, "doc": null, "nonselection_glyphspec": {"line_color": {"value": "#1f77b4"}, "line_width": {"units": "data", "field": "line_width"}, "angle_units": "deg", "x": {"units": "data", "field": "x"}, "type": "line", "y": {"units": "data", "field": "y"}, "line_alpha": {"units": "data", "value": 0.1}, "start_angle_units": "deg", "valign": null, "radius_units": "screen", "visible": null, "end_angle_units": "deg", "line_dash_offset": 0, "length_units": "screen", "line_cap": "butt", "line_dash": [], "margin": null, "line_join": "miter", "halign": null}, "xdata_range": null, "ydata_range": null, "glyphspec": {"line_color": {"value": "#0000FF"}, "line_alpha": {"units": "data", "value": 1.0}, "line_width": {"units": "data", "field": "line_width"}, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "type": "line"}, "id": "2de55bd4-b714-4283-afd1-e443a04e906f"}, "type": "Glyph", "id": "2de55bd4-b714-4283-afd1-e443a04e906f"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "dimensions": ["width", "height"], "doc": null, "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"}, "type": "PanTool", "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "dimensions": ["width", "height"], "doc": null, "id": "b930820a-c2e7-427e-9bd4-501b709e346e"}, "type": "WheelZoomTool", "id": "b930820a-c2e7-427e-9bd4-501b709e346e"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77", "doc": null}, "type": "ResetTool", "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed", "doc": null}, "type": "PreviewSaveTool", "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed"},
            {"attributes": {"outer_height": 600, "x_range": {"type": "DataRange1d", "id": "bbd5dd00-5564-4e65-9169-5c149e857686"}, "y_range": {"type": "DataRange1d", "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa"}, "outer_width": 600, "renderers": [{"type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"}, {"type": "Grid", "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af"}, {"type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"}, {"type": "Grid", "id": "fac9970a-b9f6-443c-b412-83974d2528d3"}, {"type": "BoxSelection", "id": "c7af6b67-7298-4431-8000-4268b08e1ada"}, {"type": "Glyph", "id": "2de55bd4-b714-4283-afd1-e443a04e906f"}], "id": "line_example", "data_sources": [], "doc": null, "canvas_height": 600, "title": "Plot", "tools": [{"type": "PanTool", "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"}, {"type": "WheelZoomTool", "id": "b930820a-c2e7-427e-9bd4-501b709e346e"}, {"type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"}, {"type": "ResetTool", "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77"}, {"type": "PreviewSaveTool", "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed"}], "canvas_width": 600}, "type": "Plot", "id": "line_example"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "axis": {"type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"}, "id": "fac9970a-b9f6-443c-b412-83974d2528d3", "dimension": 1}, "type": "Grid", "id": "fac9970a-b9f6-443c-b412-83974d2528d3"},
            {"attributes": {"doc": null, "children": [{"type": "Plot", "id": "line_example"}], "id": "59ac3505-c899-4aeb-bc31-94f5a00e38a8"}, "type": "PlotContext", "id": "59ac3505-c899-4aeb-bc31-94f5a00e38a8"}];
           
            var modelid = "59ac3505-c899-4aeb-bc31-94f5a00e38a8";
            var modeltype = "PlotContext";
            var elementid = "CCF";
            console.log(modelid, modeltype, elementid);
            Bokeh.load_models(all_models);
            model = Bokeh.Collections(modeltype).get(modelid);
            view = new model.default_view({model: model, el: '#CCF'});
        });
    </script>
<script>
$(document).ready(function() {
    $( "#update" ).click(function() {
    data.attributes.data.x = [0,2,5]
        data.attributes.data.y = [0,2,5]
        view = new model.default_view({model: model, el: '#CCF'})
        });
});
</script>
</head>
<body>
    <div class="plotdiv" id="CCF">Plots</div>
    <div id="update" name='update'>

Click here

</body>

···

Le mardi 29 avril 2014 16:17:26 UTC+2, Bryan Van de ven a écrit :

Hi Thomas,

Right now Bokeh plots are only reactive from the updates from the server. Without the server, coupling a button press to “multiply all values by two” means that that data update has to happen purely in JavaScript. Perhaps we could think about exposing some kind of plug in system that allows events to be bound to arbitrary snippets of javascript, but there is no functionality for that currently.

Bryan

On Apr 29, 2014, at 6:35 AM, Thomas Lecocq [email protected] wrote:

Hi all,

I’m trying to make a minimal example of a line plot, that takes an external json content and plots it. I first would like just to load the json, not really have to rely on the bokeh-server or anything else… Once this is done, I want to be able to update the plot (say, click a button, multiply all elements from the data by 2, and update the view) … ?

Any hint ?

Thanks a lot,

Tom

–
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/6727a554-3420-4e33-b676-85a3ccef2273%40continuum.io.

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

Bryan · April 29, 2014, 3:44pm

Thomas,

From BokehJS, you will need to trigger some change updates on the source by hand (would love to make this simpler, open to input). Check out the animated BokehJS jsfiddle:

http://jsfiddle.net/bokeh/K8P4P/

Particularly the "update" function at the end:

update = () ->
  data = window.source.get('data')
  rmin = data["inner_radius"]
  tmp = [rmin[rmin.length-1]].concat(rmin.slice(0, -1))
  data["inner_radius"] = tmp
  rmax = data["outer_radius"]
  tmp = rmax.slice(1).concat([rmax[0]])
  data["outer_radius"] = tmp
  window.source.set('data', data)
  window.source.trigger('change', source, {})

The basic idea is that you need to grab a handle to the DataSource (in that example it's window.source but you will need to pull it out of your plot) and then use .set and .trigger to cause the redraw.

It suddenly occurs to me that this is a use-case I don't think had been considered: hybrid python+js dev. You could use python to easily generate the basic plot but then if you already have js pulling data in from somewhere, you could update the plot from js directly if the datasources, etc., are easily gotten ahold of. That seems pretty neat I will make an issue to explore this idea. Please let me know if you still need more info, or have ideas about this kind of use of Bokeh.

Thanks,

Bryan

···

On Apr 29, 2014, at 10:35 AM, Thomas Lecocq <[email protected]> wrote:

Bryan,

Thanks for your comment.

I managed to expose almost enough of what I need... Could you just tell me how to trigger an update of the x_range,y_range, so the view fits the data added ?

Thanks

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>line.py example</title>
        <link rel="stylesheet" href="http://cdn.pydata.org/bokeh-0.4.4.min.css" type="text/css" />
        <script type="text/javascript" src="http://cdn.pydata.org/bokeh-0.4.4.min.js"></script>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $function\($ \{                 data = \{"attributes": \{"column\_names": \["x", "y"\], "doc": null, "selected": \[\], "discrete\_ranges": \{\}, "cont\_ranges": \{\}, "data": \{"y": \[0\.0, \], "x": \[0\.0, \]\}, "id": "data"\}, "type": "ColumnDataSource", "id": "data"\},                 all\_models = \[                 data,                                  \{"attributes": \{"sources": \[\{"source": \{"type": "ColumnDataSource", "id": "data"\}, "columns": \["x"\]\}\], "id": "bbd5dd00\-5564\-4e65\-9169\-5c149e857686", "doc": null\}, "type": "DataRange1d", "id": "bbd5dd00\-5564\-4e65\-9169\-5c149e857686"\},                                  \{"attributes": \{"sources": \[\{"source": \{"type": "ColumnDataSource", "id": "data"\}, "columns": \["y"\]\}\], "id": "fc8abecf\-9289\-4f8d\-8b60\-ee9b834a46aa", "doc": null\}, "type": "DataRange1d", "id": "fc8abecf\-9289\-4f8d\-8b60\-ee9b834a46aa"\},                                  \{"attributes": \{"doc": null, "id": "88360242\-94ef\-4839\-abb4\-d302553810d2"\}, "type": "BasicTickFormatter", "id": "88360242\-94ef\-4839\-abb4\-d302553810d2"\},                 \{"attributes": \{"doc": null, "id": "8deaa0b1\-cab2\-47b3\-8674\-67f6ebfac56b"\}, "type": "BasicTicker", "id": "8deaa0b1\-cab2\-47b3\-8674\-67f6ebfac56b"\},                 \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "doc": null, "bounds": "auto", "id": "cca1aab2\-4f92\-40cd\-bc26\-cc6d71b18560", "location": "min", "formatter": \{"type": "BasicTickFormatter", "id": "88360242\-94ef\-4839\-abb4\-d302553810d2"\}, "ticker": \{"type": "BasicTicker", "id": "8deaa0b1\-cab2\-47b3\-8674\-67f6ebfac56b"\}, "dimension": 0\}, "type": "LinearAxis", "id": "cca1aab2\-4f92\-40cd\-bc26\-cc6d71b18560"\},                 \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "doc": null, "axis": \{"type": "LinearAxis", "id": "cca1aab2\-4f92\-40cd\-bc26\-cc6d71b18560"\}, "id": "5a329fd3\-154a\-4ed5\-a7a2\-764384e3c1af", "dimension": 0\}, "type": "Grid", "id": "5a329fd3\-154a\-4ed5\-a7a2\-764384e3c1af"\},                 \{"attributes": \{"doc": null, "id": "7a9415cc\-8ed2\-459a\-b51a\-8bdb79ff282e"\}, "type": "BasicTickFormatter", "id": "7a9415cc\-8ed2\-459a\-b51a\-8bdb79ff282e"\},                 \{"attributes": \{"doc": null, "id": "f83ecaba\-e25f\-42f9\-abfa\-f060af866bdf"\}, "type": "BasicTicker", "id": "f83ecaba\-e25f\-42f9\-abfa\-f060af866bdf"\},                 \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "doc": null, "bounds": "auto", "id": "85d7a783\-bc12\-42cc\-8d6f\-89ddb3d2458e", "location": "min", "formatter": \{"type": "BasicTickFormatter", "id": "7a9415cc\-8ed2\-459a\-b51a\-8bdb79ff282e"\}, "ticker": \{"type": "BasicTicker", "id": "f83ecaba\-e25f\-42f9\-abfa\-f060af866bdf"\}, "dimension": 1\}, "type": "LinearAxis", "id": "85d7a783\-bc12\-42cc\-8d6f\-89ddb3d2458e"\},                 \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "id": "91b7f168\-6022\-4019\-98a9\-31e6cd989671", "doc": null\}, "type": "BoxZoomTool", "id": "91b7f168\-6022\-4019\-98a9\-31e6cd989671"\},                 \{"attributes": \{"doc": null, "tool": \{"type": "BoxZoomTool", "id": "91b7f168\-6022\-4019\-98a9\-31e6cd989671"\}, "id": "c7af6b67\-7298\-4431\-8000\-4268b08e1ada"\}, "type": "BoxSelection", "id": "c7af6b67\-7298\-4431\-8000\-4268b08e1ada"\},                 \{"attributes": \{"data\_source": \{"type": "ColumnDataSource", "id": "data"\}, "server\_data\_source": null, "doc": null, "nonselection\_glyphspec": \{"line\_color": \{"value": "\#1f77b4"\}, "line\_width": \{"units": "data", "field": "line\_width"\}, "angle\_units": "deg", "x": \{"units": "data", "field": "x"\}, "type": "line", "y": \{"units": "data", "field": "y"\}, "line\_alpha": \{"units": "data", "value": 0\.1\}, "start\_angle\_units": "deg", "valign": null, "radius\_units": "screen", "visible": null, "end\_angle\_units": "deg", "line\_dash\_offset": 0, "length\_units": "screen", "line\_cap": "butt", "line\_dash": \[\], "margin": null, "line\_join": "miter", "halign": null\}, "xdata\_range": null, "ydata\_range": null, "glyphspec": \{"line\_color": \{"value": "\#0000FF"\}, "line\_alpha": \{"units": "data", "value": 1\.0\}, "line\_width": \{"units": "data", "field": "line\_width"\}, "y": \{"units": "data", "field": "y"\}, "x": \{"units": "data", "field": "x"\}, "type": "line"\}, "id": "2de55bd4\-b714\-4283\-afd1\-e443a04e906f"\}, "type": "Glyph", "id": "2de55bd4\-b714\-4283\-afd1\-e443a04e906f"\},                 \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "dimensions": \["width", "height"\], "doc": null, "id": "06a57c95\-fe07\-4033\-aee3\-32e3d25afe19"\}, "type": "PanTool", "id": "06a57c95\-fe07\-4033\-aee3\-32e3d25afe19"\},                 \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "dimensions": \["width", "height"\], "doc": null, "id": "b930820a\-c2e7\-427e\-9bd4\-501b709e346e"\}, "type": "WheelZoomTool", "id": "b930820a\-c2e7\-427e\-9bd4\-501b709e346e"\},                 \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "id": "d3013d8a\-0524\-4c87\-a664\-f78a06a3ff77", "doc": null\}, "type": "ResetTool", "id": "d3013d8a\-0524\-4c87\-a664\-f78a06a3ff77"\},                 \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "id": "77aa37cd\-53c8\-4d9d\-998b\-b9124f92c7ed", "doc": null\}, "type": "PreviewSaveTool", "id": "77aa37cd\-53c8\-4d9d\-998b\-b9124f92c7ed"\},                 \{"attributes": \{"outer\_height": 600, "x\_range": \{"type": "DataRange1d", "id": "bbd5dd00\-5564\-4e65\-9169\-5c149e857686"\}, "y\_range": \{"type": "DataRange1d", "id": "fc8abecf\-9289\-4f8d\-8b60\-ee9b834a46aa"\}, "outer\_width": 600, "renderers": \[\{"type": "LinearAxis", "id": "cca1aab2\-4f92\-40cd\-bc26\-cc6d71b18560"\}, \{"type": "Grid", "id": "5a329fd3\-154a\-4ed5\-a7a2\-764384e3c1af"\}, \{"type": "LinearAxis", "id": "85d7a783\-bc12\-42cc\-8d6f\-89ddb3d2458e"\}, \{"type": "Grid", "id": "fac9970a\-b9f6\-443c\-b412\-83974d2528d3"\}, \{"type": "BoxSelection", "id": "c7af6b67\-7298\-4431\-8000\-4268b08e1ada"\}, \{"type": "Glyph", "id": "2de55bd4\-b714\-4283\-afd1\-e443a04e906f"\}\], "id": "line\_example", "data\_sources": \[\], "doc": null, "canvas\_height": 600, "title": "Plot", "tools": \[\{"type": "PanTool", "id": "06a57c95\-fe07\-4033\-aee3\-32e3d25afe19"\}, \{"type": "WheelZoomTool", "id": "b930820a\-c2e7\-427e\-9bd4\-501b709e346e"\}, \{"type": "BoxZoomTool", "id": "91b7f168\-6022\-4019\-98a9\-31e6cd989671"\}, \{"type": "ResetTool", "id": "d3013d8a\-0524\-4c87\-a664\-f78a06a3ff77"\}, \{"type": "PreviewSaveTool", "id": "77aa37cd\-53c8\-4d9d\-998b\-b9124f92c7ed"\}\], "canvas\_width": 600\}, "type": "Plot", "id": "line\_example"\},                 \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "doc": null, "axis": \{"type": "LinearAxis", "id": "85d7a783\-bc12\-42cc\-8d6f\-89ddb3d2458e"\}, "id": "fac9970a\-b9f6\-443c\-b412\-83974d2528d3", "dimension": 1\}, "type": "Grid", "id": "fac9970a\-b9f6\-443c\-b412\-83974d2528d3"\},                 \{"attributes": \{"doc": null, "children": \[\{"type": "Plot", "id": "line\_example"\}\], "id": "59ac3505\-c899\-4aeb\-bc31\-94f5a00e38a8"\}, "type": "PlotContext", "id": "59ac3505\-c899\-4aeb\-bc31\-94f5a00e38a8"\}\];                                  var modelid = "59ac3505\-c899\-4aeb\-bc31\-94f5a00e38a8";                 var modeltype = "PlotContext";                 var elementid = "CCF";                 console\.log$modelid, modeltype, elementid$;                 Bokeh\.load\_models$all\_models$;                 model = Bokeh\.Collections$modeltype$\.get$modelid$;                 view = new model\.default\_view$\{model: model, el: '\#CCF'\}$;             \}\);         </script>     <script>     (document).ready(function() {
        $( "#update" ).click(function() {
        data.attributes.data.x = [0,2,5]
            data.attributes.data.y = [0,2,5]
            view = new model.default_view({model: model, el: '#CCF'})
            });
    });
    </script>
    </head>
    <body>
        <div class="plotdiv" id="CCF">Plots</div>
        <div id="update" name='update'>
Click here
</div>

    </body>
</html>

Le mardi 29 avril 2014 16:17:26 UTC+2, Bryan Van de ven a écrit :
Hi Thomas,

Right now Bokeh plots are only reactive from the updates from the server. Without the server, coupling a button press to "multiply all values by two" means that that data update has to happen purely in JavaScript. Perhaps we could think about exposing some kind of plug in system that allows events to be bound to arbitrary snippets of javascript, but there is no functionality for that currently.

Bryan

On Apr 29, 2014, at 6:35 AM, Thomas Lecocq <[email protected]> wrote:

> Hi all,
>
> I'm trying to make a minimal example of a line plot, that takes an external json content and plots it. I first would like just to load the json, not really have to rely on the bokeh-server or anything else... Once this is done, I want to be able to update the plot (say, click a button, multiply all elements from the data by 2, and update the view) ... ?
>
> Any hint ?
>
> Thanks a lot,
>
> Tom
>
> --
> 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 bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6727a554-3420-4e33-b676-85a3ccef2273%40continuum.io\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
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/f1f888f9-c084-4a31-a748-dda332b568e3%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Thomas_Lecocq · April 30, 2014, 9:12am

Hi Bryan,

Digging into the JS code, I think I found some ways of updating the {x,y}_ranges on the view, which are not updated when I trigger the ‘change’ on the model.

Hope this gives new ideas Next step: get x,y data from an $.ajax call

Cheers,

Thom

Animated - jsFiddle demo by bokeh

Le mardi 29 avril 2014 17:44:54 UTC+2, Bryan Van de ven a écrit :

Thomas,

From BokehJS, you will need to trigger some change updates on the source by hand (would love to make this simpler, open to input). Check out the animated BokehJS jsfiddle:

    [http://jsfiddle.net/bokeh/K8P4P/](http://jsfiddle.net/bokeh/K8P4P/)

Particularly the “update” function at the end:

update = () →

data = window.source.get(‘data’)

rmin = data[“inner_radius”]

tmp = [rmin[rmin.length-1]].concat(rmin.slice(0, -1))

data[“inner_radius”] = tmp

rmax = data[“outer_radius”]

tmp = rmax.slice(1).concat([rmax[0]])

data[“outer_radius”] = tmp

window.source.set(‘data’, data)

window.source.trigger(‘change’, source, {})

The basic idea is that you need to grab a handle to the DataSource (in that example it’s window.source but you will need to pull it out of your plot) and then use .set and .trigger to cause the redraw.

It suddenly occurs to me that this is a use-case I don’t think had been considered: hybrid python+js dev. You could use python to easily generate the basic plot but then if you already have js pulling data in from somewhere, you could update the plot from js directly if the datasources, etc., are easily gotten ahold of. That seems pretty neat I will make an issue to explore this idea. Please let me know if you still need more info, or have ideas about this kind of use of Bokeh.

Thanks,

Bryan

On Apr 29, 2014, at 10:35 AM, Thomas Lecocq [email protected] wrote:

Bryan,

Thanks for your comment.

I managed to expose almost enough of what I need… Could you just tell me how to trigger an update of the x_range,y_range, so the view fits the data added ?

Thanks

<head>

    <meta charset="utf-8">

    <title>line.py example</title>

    <link rel="stylesheet" href="[http://cdn.pydata.org/bokeh-0.4.4.min.css](http://cdn.pydata.org/bokeh-0.4.4.min.css)" type="text/css" />

    <script type="text/javascript" src="[http://cdn.pydata.org/bokeh-0.4.4.min.js](http://cdn.pydata.org/bokeh-0.4.4.min.js)"></script>

    <script src="//[code.jquery.com/jquery-1.10.2.js](http://code.jquery.com/jquery-1.10.2.js)"></script>

    <script type="text/javascript">

        $(function() {

            data = {"attributes": {"column_names": ["x", "y"], "doc": null, "selected": [], "discrete_ranges": {}, "cont_ranges": {}, "data": {"y": [0.0, ], "x": [0.0, ]}, "id": "data"}, "type": "ColumnDataSource", "id": "data"},
            all_models = [

            data,

            {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "data"}, "columns": ["x"]}], "id": "bbd5dd00-5564-4e65-9169-5c149e857686", "doc": null}, "type": "DataRange1d", "id": "bbd5dd00-5564-4e65-9169-5c149e857686"},
           
            {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "data"}, "columns": ["y"]}], "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa", "doc": null}, "type": "DataRange1d", "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa"},
           
            {"attributes": {"doc": null, "id": "88360242-94ef-4839-abb4-d302553810d2"}, "type": "BasicTickFormatter", "id": "88360242-94ef-4839-abb4-d302553810d2"},
            {"attributes": {"doc": null, "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"}, "type": "BasicTicker", "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "bounds": "auto", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "88360242-94ef-4839-abb4-d302553810d2"}, "ticker": {"type": "BasicTicker", "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"}, "dimension": 0}, "type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "axis": {"type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"}, "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af", "dimension": 0}, "type": "Grid", "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af"},
            {"attributes": {"doc": null, "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"}, "type": "BasicTickFormatter", "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"},
            {"attributes": {"doc": null, "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"}, "type": "BasicTicker", "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "bounds": "auto", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"}, "ticker": {"type": "BasicTicker", "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"}, "dimension": 1}, "type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "91b7f168-6022-4019-98a9-31e6cd989671", "doc": null}, "type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"},
            {"attributes": {"doc": null, "tool": {"type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"}, "id": "c7af6b67-7298-4431-8000-4268b08e1ada"}, "type": "BoxSelection", "id": "c7af6b67-7298-4431-8000-4268b08e1ada"},
            {"attributes": {"data_source": {"type": "ColumnDataSource", "id": "data"}, "server_data_source": null, "doc": null, "nonselection_glyphspec": {"line_color": {"value": "#1f77b4"}, "line_width": {"units": "data", "field": "line_width"}, "angle_units": "deg", "x": {"units": "data", "field": "x"}, "type": "line", "y": {"units": "data", "field": "y"}, "line_alpha": {"units": "data", "value": 0.1}, "start_angle_units": "deg", "valign": null, "radius_units": "screen", "visible": null, "end_angle_units": "deg", "line_dash_offset": 0, "length_units": "screen", "line_cap": "butt", "line_dash": [], "margin": null, "line_join": "miter", "halign": null}, "xdata_range": null, "ydata_range": null, "glyphspec": {"line_color": {"value": "#0000FF"}, "line_alpha": {"units": "data", "value": 1.0}, "line_width": {"units": "data", "field": "line_width"}, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "type": "line"}, "id": "2de55bd4-b714-4283-afd1-e443a04e906f"}, "type": "Glyph", "id": "2de55bd4-b714-4283-afd1-e443a04e906f"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "dimensions": ["width", "height"], "doc": null, "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"}, "type": "PanTool", "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "dimensions": ["width", "height"], "doc": null, "id": "b930820a-c2e7-427e-9bd4-501b709e346e"}, "type": "WheelZoomTool", "id": "b930820a-c2e7-427e-9bd4-501b709e346e"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77", "doc": null}, "type": "ResetTool", "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed", "doc": null}, "type": "PreviewSaveTool", "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed"},
            {"attributes": {"outer_height": 600, "x_range": {"type": "DataRange1d", "id": "bbd5dd00-5564-4e65-9169-5c149e857686"}, "y_range": {"type": "DataRange1d", "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa"}, "outer_width": 600, "renderers": [{"type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"}, {"type": "Grid", "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af"}, {"type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"}, {"type": "Grid", "id": "fac9970a-b9f6-443c-b412-83974d2528d3"}, {"type": "BoxSelection", "id": "c7af6b67-7298-4431-8000-4268b08e1ada"}, {"type": "Glyph", "id": "2de55bd4-b714-4283-afd1-e443a04e906f"}], "id": "line_example", "data_sources": [], "doc": null, "canvas_height": 600, "title": "Plot", "tools": [{"type": "PanTool", "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"}, {"type": "WheelZoomTool", "id": "b930820a-c2e7-427e-9bd4-501b709e346e"}, {"type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"}, {"type": "ResetTool", "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77"}, {"type": "PreviewSaveTool", "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed"}], "canvas_width": 600}, "type": "Plot", "id": "line_example"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "axis": {"type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"}, "id": "fac9970a-b9f6-443c-b412-83974d2528d3", "dimension": 1}, "type": "Grid", "id": "fac9970a-b9f6-443c-b412-83974d2528d3"},
            {"attributes": {"doc": null, "children": [{"type": "Plot", "id": "line_example"}], "id": "59ac3505-c899-4aeb-bc31-94f5a00e38a8"}, "type": "PlotContext", "id": "59ac3505-c899-4aeb-bc31-94f5a00e38a8"}];

            var modelid = "59ac3505-c899-4aeb-bc31-94f5a00e38a8";

            var modeltype = "PlotContext";

            var elementid = "CCF";

            console.log(modelid, modeltype, elementid);

            Bokeh.load_models(all_models);

            model = Bokeh.Collections(modeltype).get(modelid);

            view = new model.default_view({model: model, el: '#CCF'});

});

    </script>

<script>

$(document).ready(function() {

    $( "#update" ).click(function() {

    data.attributes.data.x = [0,2,5]

        data.attributes.data.y = [0,2,5]

        view = new model.default_view({model: model, el: '#CCF'})

});

});

</script>

</head>

<body>

    <div class="plotdiv" id="CCF">Plots</div>

    <div id="update" name='update'>

Click here

</body>

Le mardi 29 avril 2014 16:17:26 UTC+2, Bryan Van de ven a écrit :

Hi Thomas,

Right now Bokeh plots are only reactive from the updates from the server. Without the server, coupling a button press to “multiply all values by two” means that that data update has to happen purely in JavaScript. Perhaps we could think about exposing some kind of plug in system that allows events to be bound to arbitrary snippets of javascript, but there is no functionality for that currently.

Bryan

On Apr 29, 2014, at 6:35 AM, Thomas Lecocq [email protected] wrote:

Hi all,

I’m trying to make a minimal example of a line plot, that takes an external json content and plots it. I first would like just to load the json, not really have to rely on the bokeh-server or anything else… Once this is done, I want to be able to update the plot (say, click a button, multiply all elements from the data by 2, and update the view) … ?

Any hint ?

Thanks a lot,

Tom

–
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/6727a554-3420-4e33-b676-85a3ccef2273%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–
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/f1f888f9-c084-4a31-a748-dda332b568e3%40continuum.io.

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

Bryan · May 1, 2014, 2:48pm

Thomas,

Not an expert, but the spectrogram demo looks roughly like this (coffeescript):

  request_data: () ->
    $.ajax 'http://localhost:5000/data',
    type: 'GET'
    dataType: 'json'
    error: (jqXHR, textStatus, errorThrown) =>
      console.log("something failed")

success: (data, textStatus, jqXHR) =>
@do_stuff(data)

···

On Apr 30, 2014, at 4:12 AM, Thomas Lecocq <[email protected]> wrote:

Hi Bryan,

Digging into the JS code, I think I found some ways of updating the {x,y}_ranges on the view, which are not updated when I trigger the 'change' on the model.

Hope this gives new ideas Next step: get x,y data from an $.ajax call

Cheers,

Thom

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Animated - jsFiddle demo by bokeh</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh-0.4.4.css">
  <script type='text/javascript' src="bokeh-0.4.4.js"></script>

  <script type="text/coffeescript">
    x = [0,1,2,3]
    y = [1,2,5,6]

    color = ["#C6DBEF",]

    window.source = Bokeh.Collections('ColumnDataSource').create(
      data:
        color: color
        x: x
        y: y
    )

    line = {
      type: 'line'
      x: 'x'
      y: 'y'
      line_color: 'color'
      line_width: 2
      line_alpha: 1.0
    }

    options = {
      title: "CCF Update Demo"
      dims: [1000, 500]
      xrange: 'auto'
      yrange: 'auto'
      xaxes: "min"
      yaxes: "min"
      tools: "pan,wheel_zoom,box_zoom,reset,resize"
    }

    plot = Bokeh.Plotting.make_plot(line, window.source, options)
    Bokeh.Plotting.show(plot,'#CCF')

    #
    # Update the plot data on an interval
    #
    Array::max=->
      Math.max.apply(null, this)

    Array::min=->
      Math.min.apply(null, this)

    update = () ->
      data = window.source.get('data')
      tmp = (i * 1.1 for i in data['x'])
      data['x'] = tmp
      tmp = (Math.random() * 100 for i in data['y'])
      data['y'] = tmp

      window.source.set('data', data)
      window.source.trigger('change', source, {})

      console.debug(tmp.min())
      newrange = {}
      newrange['xr'] = {'start':data['x'].min(), 'end':data['x'].max()}
      newrange['yr'] = {'start':data['y'].min(), 'end':data['y'].max()}
      window.pview.update_range(newrange)

    setInterval(update, 1000)
  </script>
  <script type="text/javascript" src="coffeescript.js"></script>
</head>

<body>
<div id="CCF" name="CCF"></div>
</body>
</html>

Le mardi 29 avril 2014 17:44:54 UTC+2, Bryan Van de ven a écrit :
Thomas,

From BokehJS, you will need to trigger some change updates on the source by hand (would love to make this simpler, open to input). Check out the animated BokehJS jsfiddle:

        http://jsfiddle.net/bokeh/K8P4P/

Particularly the "update" function at the end:

update = () ->
  data = window.source.get('data')
  rmin = data["inner_radius"]
  tmp = [rmin[rmin.length-1]].concat(rmin.slice(0, -1))
  data["inner_radius"] = tmp
  rmax = data["outer_radius"]
  tmp = rmax.slice(1).concat([rmax[0]])
  data["outer_radius"] = tmp
  window.source.set('data', data)
  window.source.trigger('change', source, {})

The basic idea is that you need to grab a handle to the DataSource (in that example it's window.source but you will need to pull it out of your plot) and then use .set and .trigger to cause the redraw.

It suddenly occurs to me that this is a use-case I don't think had been considered: hybrid python+js dev. You could use python to easily generate the basic plot but then if you already have js pulling data in from somewhere, you could update the plot from js directly if the datasources, etc., are easily gotten ahold of. That seems pretty neat I will make an issue to explore this idea. Please let me know if you still need more info, or have ideas about this kind of use of Bokeh.

Thanks,

Bryan

On Apr 29, 2014, at 10:35 AM, Thomas Lecocq <[email protected]> wrote:

> Bryan,
>
> Thanks for your comment.
>
> I managed to expose almost enough of what I need... Could you just tell me how to trigger an update of the x_range,y_range, so the view fits the data added ?
>
> Thanks
>
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <meta charset="utf-8">
> <title>line.py example</title>
> <link rel="stylesheet" href="http://cdn.pydata.org/bokeh-0.4.4.min.css" type="text/css" />
> <script type="text/javascript" src="http://cdn.pydata.org/bokeh-0.4.4.min.js"></script>
> <script src="//code.jquery.com/jquery-1.10.2.js"></script>
> <script type="text/javascript">
> $function\($ \{ > data = \{"attributes": \{"column\_names": \["x", "y"\], "doc": null, "selected": \[\], "discrete\_ranges": \{\}, "cont\_ranges": \{\}, "data": \{"y": \[0\.0, \], "x": \[0\.0, \]\}, "id": "data"\}, "type": "ColumnDataSource", "id": "data"\}, > all\_models = \[ > data, > > \{"attributes": \{"sources": \[\{"source": \{"type": "ColumnDataSource", "id": "data"\}, "columns": \["x"\]\}\], "id": "bbd5dd00\-5564\-4e65\-9169\-5c149e857686", "doc": null\}, "type": "DataRange1d", "id": "bbd5dd00\-5564\-4e65\-9169\-5c149e857686"\}, > > \{"attributes": \{"sources": \[\{"source": \{"type": "ColumnDataSource", "id": "data"\}, "columns": \["y"\]\}\], "id": "fc8abecf\-9289\-4f8d\-8b60\-ee9b834a46aa", "doc": null\}, "type": "DataRange1d", "id": "fc8abecf\-9289\-4f8d\-8b60\-ee9b834a46aa"\}, > > \{"attributes": \{"doc": null, "id": "88360242\-94ef\-4839\-abb4\-d302553810d2"\}, "type": "BasicTickFormatter", "id": "88360242\-94ef\-4839\-abb4\-d302553810d2"\}, > \{"attributes": \{"doc": null, "id": "8deaa0b1\-cab2\-47b3\-8674\-67f6ebfac56b"\}, "type": "BasicTicker", "id": "8deaa0b1\-cab2\-47b3\-8674\-67f6ebfac56b"\}, > \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "doc": null, "bounds": "auto", "id": "cca1aab2\-4f92\-40cd\-bc26\-cc6d71b18560", "location": "min", "formatter": \{"type": "BasicTickFormatter", "id": "88360242\-94ef\-4839\-abb4\-d302553810d2"\}, "ticker": \{"type": "BasicTicker", "id": "8deaa0b1\-cab2\-47b3\-8674\-67f6ebfac56b"\}, "dimension": 0\}, "type": "LinearAxis", "id": "cca1aab2\-4f92\-40cd\-bc26\-cc6d71b18560"\}, > \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "doc": null, "axis": \{"type": "LinearAxis", "id": "cca1aab2\-4f92\-40cd\-bc26\-cc6d71b18560"\}, "id": "5a329fd3\-154a\-4ed5\-a7a2\-764384e3c1af", "dimension": 0\}, "type": "Grid", "id": "5a329fd3\-154a\-4ed5\-a7a2\-764384e3c1af"\}, > \{"attributes": \{"doc": null, "id": "7a9415cc\-8ed2\-459a\-b51a\-8bdb79ff282e"\}, "type": "BasicTickFormatter", "id": "7a9415cc\-8ed2\-459a\-b51a\-8bdb79ff282e"\}, > \{"attributes": \{"doc": null, "id": "f83ecaba\-e25f\-42f9\-abfa\-f060af866bdf"\}, "type": "BasicTicker", "id": "f83ecaba\-e25f\-42f9\-abfa\-f060af866bdf"\}, > \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "doc": null, "bounds": "auto", "id": "85d7a783\-bc12\-42cc\-8d6f\-89ddb3d2458e", "location": "min", "formatter": \{"type": "BasicTickFormatter", "id": "7a9415cc\-8ed2\-459a\-b51a\-8bdb79ff282e"\}, "ticker": \{"type": "BasicTicker", "id": "f83ecaba\-e25f\-42f9\-abfa\-f060af866bdf"\}, "dimension": 1\}, "type": "LinearAxis", "id": "85d7a783\-bc12\-42cc\-8d6f\-89ddb3d2458e"\}, > \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "id": "91b7f168\-6022\-4019\-98a9\-31e6cd989671", "doc": null\}, "type": "BoxZoomTool", "id": "91b7f168\-6022\-4019\-98a9\-31e6cd989671"\}, > \{"attributes": \{"doc": null, "tool": \{"type": "BoxZoomTool", "id": "91b7f168\-6022\-4019\-98a9\-31e6cd989671"\}, "id": "c7af6b67\-7298\-4431\-8000\-4268b08e1ada"\}, "type": "BoxSelection", "id": "c7af6b67\-7298\-4431\-8000\-4268b08e1ada"\}, > \{"attributes": \{"data\_source": \{"type": "ColumnDataSource", "id": "data"\}, "server\_data\_source": null, "doc": null, "nonselection\_glyphspec": \{"line\_color": \{"value": "\#1f77b4"\}, "line\_width": \{"units": "data", "field": "line\_width"\}, "angle\_units": "deg", "x": \{"units": "data", "field": "x"\}, "type": "line", "y": \{"units": "data", "field": "y"\}, "line\_alpha": \{"units": "data", "value": 0\.1\}, "start\_angle\_units": "deg", "valign": null, "radius\_units": "screen", "visible": null, "end\_angle\_units": "deg", "line\_dash\_offset": 0, "length\_units": "screen", "line\_cap": "butt", "line\_dash": \[\], "margin": null, "line\_join": "miter", "halign": null\}, "xdata\_range": null, "ydata\_range": null, "glyphspec": \{"line\_color": \{"value": "\#0000FF"\}, "line\_alpha": \{"units": "data", "value": 1\.0\}, "line\_width": \{"units": "data", "field": "line\_width"\}, "y": \{"units": "data", "field": "y"\}, "x": \{"units": "data", "field": "x"\}, "type": "line"\}, "id": "2de55bd4\-b714\-4283\-afd1\-e443a04e906f"\}, "type": "Glyph", "id": "2de55bd4\-b714\-4283\-afd1\-e443a04e906f"\}, > \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "dimensions": \["width", "height"\], "doc": null, "id": "06a57c95\-fe07\-4033\-aee3\-32e3d25afe19"\}, "type": "PanTool", "id": "06a57c95\-fe07\-4033\-aee3\-32e3d25afe19"\}, > \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "dimensions": \["width", "height"\], "doc": null, "id": "b930820a\-c2e7\-427e\-9bd4\-501b709e346e"\}, "type": "WheelZoomTool", "id": "b930820a\-c2e7\-427e\-9bd4\-501b709e346e"\}, > \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "id": "d3013d8a\-0524\-4c87\-a664\-f78a06a3ff77", "doc": null\}, "type": "ResetTool", "id": "d3013d8a\-0524\-4c87\-a664\-f78a06a3ff77"\}, > \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "id": "77aa37cd\-53c8\-4d9d\-998b\-b9124f92c7ed", "doc": null\}, "type": "PreviewSaveTool", "id": "77aa37cd\-53c8\-4d9d\-998b\-b9124f92c7ed"\}, > \{"attributes": \{"outer\_height": 600, "x\_range": \{"type": "DataRange1d", "id": "bbd5dd00\-5564\-4e65\-9169\-5c149e857686"\}, "y\_range": \{"type": "DataRange1d", "id": "fc8abecf\-9289\-4f8d\-8b60\-ee9b834a46aa"\}, "outer\_width": 600, "renderers": \[\{"type": "LinearAxis", "id": "cca1aab2\-4f92\-40cd\-bc26\-cc6d71b18560"\}, \{"type": "Grid", "id": "5a329fd3\-154a\-4ed5\-a7a2\-764384e3c1af"\}, \{"type": "LinearAxis", "id": "85d7a783\-bc12\-42cc\-8d6f\-89ddb3d2458e"\}, \{"type": "Grid", "id": "fac9970a\-b9f6\-443c\-b412\-83974d2528d3"\}, \{"type": "BoxSelection", "id": "c7af6b67\-7298\-4431\-8000\-4268b08e1ada"\}, \{"type": "Glyph", "id": "2de55bd4\-b714\-4283\-afd1\-e443a04e906f"\}\], "id": "line\_example", "data\_sources": \[\], "doc": null, "canvas\_height": 600, "title": "Plot", "tools": \[\{"type": "PanTool", "id": "06a57c95\-fe07\-4033\-aee3\-32e3d25afe19"\}, \{"type": "WheelZoomTool", "id": "b930820a\-c2e7\-427e\-9bd4\-501b709e346e"\}, \{"type": "BoxZoomTool", "id": "91b7f168\-6022\-4019\-98a9\-31e6cd989671"\}, \{"type": "ResetTool", "id": "d3013d8a\-0524\-4c87\-a664\-f78a06a3ff77"\}, \{"type": "PreviewSaveTool", "id": "77aa37cd\-53c8\-4d9d\-998b\-b9124f92c7ed"\}\], "canvas\_width": 600\}, "type": "Plot", "id": "line\_example"\}, > \{"attributes": \{"plot": \{"type": "Plot", "id": "line\_example"\}, "doc": null, "axis": \{"type": "LinearAxis", "id": "85d7a783\-bc12\-42cc\-8d6f\-89ddb3d2458e"\}, "id": "fac9970a\-b9f6\-443c\-b412\-83974d2528d3", "dimension": 1\}, "type": "Grid", "id": "fac9970a\-b9f6\-443c\-b412\-83974d2528d3"\}, > \{"attributes": \{"doc": null, "children": \[\{"type": "Plot", "id": "line\_example"\}\], "id": "59ac3505\-c899\-4aeb\-bc31\-94f5a00e38a8"\}, "type": "PlotContext", "id": "59ac3505\-c899\-4aeb\-bc31\-94f5a00e38a8"\}\]; > > var modelid = "59ac3505\-c899\-4aeb\-bc31\-94f5a00e38a8"; > var modeltype = "PlotContext"; > var elementid = "CCF"; > console\.log$modelid, modeltype, elementid$; > Bokeh\.load\_models$all\_models$; > model = Bokeh\.Collections$modeltype$\.get$modelid$; > view = new model\.default\_view$\{model: model, el: '\#CCF'\}$; > \}\); > </script> > <script> > (document).ready(function() {
> $( "#update" ).click(function() {
> data.attributes.data.x = [0,2,5]
> data.attributes.data.y = [0,2,5]
> view = new model.default_view({model: model, el: '#CCF'})
> });
> });
> </script>
> </head>
> <body>
> <div class="plotdiv" id="CCF">Plots</div>
> <div id="update" name='update'>
> Click here
> </div>
>
> </body>
> </html>
>
>
>
> Le mardi 29 avril 2014 16:17:26 UTC+2, Bryan Van de ven a écrit :
> Hi Thomas,
>
> Right now Bokeh plots are only reactive from the updates from the server. Without the server, coupling a button press to "multiply all values by two" means that that data update has to happen purely in JavaScript. Perhaps we could think about exposing some kind of plug in system that allows events to be bound to arbitrary snippets of javascript, but there is no functionality for that currently.
>
> Bryan
>
>
> On Apr 29, 2014, at 6:35 AM, Thomas Lecocq <[email protected]> wrote:
>
> > Hi all,
> >
> > I'm trying to make a minimal example of a line plot, that takes an external json content and plots it. I first would like just to load the json, not really have to rely on the bokeh-server or anything else... Once this is done, I want to be able to update the plot (say, click a button, multiply all elements from the data by 2, and update the view) ... ?
> >
> > Any hint ?
> >
> > Thanks a lot,
> >
> > Tom
> >
> > --
> > 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 bokeh+un...@continuum.io.
> > To post to this group, send email to bo...@continuum.io.
> > To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6727a554-3420-4e33-b676-85a3ccef2273%40continuum.io\.
> > For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
>
>
> --
> 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 bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/f1f888f9-c084-4a31-a748-dda332b568e3%40continuum.io\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
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/b8fbc25a-601c-49a9-94fc-fbb062374a3c%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Thomas_Lecocq · May 1, 2014, 3:50pm

Bryan,

Yeha, somehow did the opposite, @update is in coffeescript, and the following is in javascript:

function get_CCF(callback, arg) {
    $.ajax({
        url:'/admin/all_results.json',
        type:'POST',
        dataType: 'json',
        contentTtupe: 'application/json',
        data: JSON.stringify(arg),
        success: callback
        });
    };

function updateplot() {
    var pair = $('#pair option:selected').text()
    var filter = $('#filter option:selected').val()
    var component = $('#component option:selected').text()
    var arg = {"pair": pair,"component": component,"filter":filter}
    console.debug(arg);
    get_CCF(update, arg);
    }

I’ll probably write some tutorial on that later soon, as it could definitively be useful for many. By the way, is there an API doc somewhere on the methods/calls/plots/etc available in Coffeescript ?

Thom

···

Le jeudi 1 mai 2014 16:48:48 UTC+2, Bryan Van de ven a écrit :

Thomas,

Not an expert, but the spectrogram demo looks roughly like this (coffeescript):

request_data: () →
$.ajax '[http://localhost:5000/data](http://localhost:5000/data)',

type: 'GET'

dataType: 'json'

error: (jqXHR, textStatus, errorThrown) =>

  console.log("something failed")



success: (data, textStatus, jqXHR) =>

  @do_stuff(data)
On Apr 30, 2014, at 4:12 AM, Thomas Lecocq [email protected] wrote:

Hi Bryan,

Digging into the JS code, I think I found some ways of updating the {x,y}_ranges on the view, which are not updated when I trigger the ‘change’ on the model.

Hope this gives new ideas Next step: get x,y data from an $.ajax call

Cheers,

Thom

Animated - jsFiddle demo by bokeh

Le mardi 29 avril 2014 17:44:54 UTC+2, Bryan Van de ven a écrit :
Thomas,

From BokehJS, you will need to trigger some change updates on the source by hand (would love to make this simpler, open to input). Check out the animated BokehJS jsfiddle:
    [http://jsfiddle.net/bokeh/K8P4P/](http://jsfiddle.net/bokeh/K8P4P/)
Particularly the “update” function at the end:

update = () →
data = window.source.get(‘data’)
rmin = data[“inner_radius”]
tmp = [rmin[rmin.length-1]].concat(rmin.slice(0, -1))
data[“inner_radius”] = tmp
rmax = data[“outer_radius”]
tmp = rmax.slice(1).concat([rmax[0]])
data[“outer_radius”] = tmp
window.source.set(‘data’, data)
window.source.trigger(‘change’, source, {})

The basic idea is that you need to grab a handle to the DataSource (in that example it’s window.source but you will need to pull it out of your plot) and then use .set and .trigger to cause the redraw.

It suddenly occurs to me that this is a use-case I don’t think had been considered: hybrid python+js dev. You could use python to easily generate the basic plot but then if you already have js pulling data in from somewhere, you could update the plot from js directly if the datasources, etc., are easily gotten ahold of. That seems pretty neat I will make an issue to explore this idea. Please let me know if you still need more info, or have ideas about this kind of use of Bokeh.

Thanks,

Bryan

On Apr 29, 2014, at 10:35 AM, Thomas Lecocq [email protected] wrote:
Bryan,

Thanks for your comment.

I managed to expose almost enough of what I need… Could you just tell me how to trigger an update of the x_range,y_range, so the view fits the data added ?

Thanks
line.py example $(function() { data = {"attributes": {"column_names": ["x", "y"], "doc": null, "selected": [], "discrete_ranges": {}, "cont_ranges": {}, "data": {"y": [0.0, ], "x": [0.0, ]}, "id": "data"}, "type": "ColumnDataSource", "id": "data"}, all_models = [ data,
            {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "data"}, "columns": ["x"]}], "id": "bbd5dd00-5564-4e65-9169-5c149e857686", "doc": null}, "type": "DataRange1d", "id": "bbd5dd00-5564-4e65-9169-5c149e857686"},
           
            {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "data"}, "columns": ["y"]}], "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa", "doc": null}, "type": "DataRange1d", "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa"},
           
            {"attributes": {"doc": null, "id": "88360242-94ef-4839-abb4-d302553810d2"}, "type": "BasicTickFormatter", "id": "88360242-94ef-4839-abb4-d302553810d2"},
            {"attributes": {"doc": null, "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"}, "type": "BasicTicker", "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "bounds": "auto", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "88360242-94ef-4839-abb4-d302553810d2"}, "ticker": {"type": "BasicTicker", "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"}, "dimension": 0}, "type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "axis": {"type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"}, "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af", "dimension": 0}, "type": "Grid", "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af"},
            {"attributes": {"doc": null, "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"}, "type": "BasicTickFormatter", "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"},
            {"attributes": {"doc": null, "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"}, "type": "BasicTicker", "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "bounds": "auto", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"}, "ticker": {"type": "BasicTicker", "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"}, "dimension": 1}, "type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "91b7f168-6022-4019-98a9-31e6cd989671", "doc": null}, "type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"},
            {"attributes": {"doc": null, "tool": {"type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"}, "id": "c7af6b67-7298-4431-8000-4268b08e1ada"}, "type": "BoxSelection", "id": "c7af6b67-7298-4431-8000-4268b08e1ada"},
            {"attributes": {"data_source": {"type": "ColumnDataSource", "id": "data"}, "server_data_source": null, "doc": null, "nonselection_glyphspec": {"line_color": {"value": "#1f77b4"}, "line_width": {"units": "data", "field": "line_width"}, "angle_units": "deg", "x": {"units": "data", "field": "x"}, "type": "line", "y": {"units": "data", "field": "y"}, "line_alpha": {"units": "data", "value": 0.1}, "start_angle_units": "deg", "valign": null, "radius_units": "screen", "visible": null, "end_angle_units": "deg", "line_dash_offset": 0, "length_units": "screen", "line_cap": "butt", "line_dash": [], "margin": null, "line_join": "miter", "halign": null}, "xdata_range": null, "ydata_range": null, "glyphspec": {"line_color": {"value": "#0000FF"}, "line_alpha": {"units": "data", "value": 1.0}, "line_width": {"units": "data", "field": "line_width"}, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "type": "line"}, "id": "2de55bd4-b714-4283-afd1-e443a04e906f"}, "type": "Glyph", "id": "2de55bd4-b714-4283-afd1-e443a04e906f"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "dimensions": ["width", "height"], "doc": null, "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"}, "type": "PanTool", "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "dimensions": ["width", "height"], "doc": null, "id": "b930820a-c2e7-427e-9bd4-501b709e346e"}, "type": "WheelZoomTool", "id": "b930820a-c2e7-427e-9bd4-501b709e346e"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77", "doc": null}, "type": "ResetTool", "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed", "doc": null}, "type": "PreviewSaveTool", "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed"},
            {"attributes": {"outer_height": 600, "x_range": {"type": "DataRange1d", "id": "bbd5dd00-5564-4e65-9169-5c149e857686"}, "y_range": {"type": "DataRange1d", "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa"}, "outer_width": 600, "renderers": [{"type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"}, {"type": "Grid", "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af"}, {"type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"}, {"type": "Grid", "id": "fac9970a-b9f6-443c-b412-83974d2528d3"}, {"type": "BoxSelection", "id": "c7af6b67-7298-4431-8000-4268b08e1ada"}, {"type": "Glyph", "id": "2de55bd4-b714-4283-afd1-e443a04e906f"}], "id": "line_example", "data_sources": [], "doc": null, "canvas_height": 600, "title": "Plot", "tools": [{"type": "PanTool", "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"}, {"type": "WheelZoomTool", "id": "b930820a-c2e7-427e-9bd4-501b709e346e"}, {"type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"}, {"type": "ResetTool", "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77"}, {"type": "PreviewSaveTool", "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed"}], "canvas_width": 600}, "type": "Plot", "id": "line_example"},
            {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "axis": {"type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"}, "id": "fac9970a-b9f6-443c-b412-83974d2528d3", "dimension": 1}, "type": "Grid", "id": "fac9970a-b9f6-443c-b412-83974d2528d3"},
            {"attributes": {"doc": null, "children": [{"type": "Plot", "id": "line_example"}], "id": "59ac3505-c899-4aeb-bc31-94f5a00e38a8"}, "type": "PlotContext", "id": "59ac3505-c899-4aeb-bc31-94f5a00e38a8"}];
           
            var modelid = "59ac3505-c899-4aeb-bc31-94f5a00e38a8";
            var modeltype = "PlotContext";
            var elementid = "CCF";
            console.log(modelid, modeltype, elementid);
            Bokeh.load_models(all_models);
            model = Bokeh.Collections(modeltype).get(modelid);
            view = new model.default_view({model: model, el: '#CCF'});
        });
    </script>
<script>
$(document).ready(function() {
    $( "#update" ).click(function() {
    data.attributes.data.x = [0,2,5]
        data.attributes.data.y = [0,2,5]
        view = new model.default_view({model: model, el: '#CCF'})
        });
});
</script>
</head>
<body>
    <div class="plotdiv" id="CCF">Plots</div>
    <div id="update" name='update'>
Click here
</body>
Le mardi 29 avril 2014 16:17:26 UTC+2, Bryan Van de ven a écrit :
Hi Thomas,

Right now Bokeh plots are only reactive from the updates from the server. Without the server, coupling a button press to “multiply all values by two” means that that data update has to happen purely in JavaScript. Perhaps we could think about exposing some kind of plug in system that allows events to be bound to arbitrary snippets of javascript, but there is no functionality for that currently.

Bryan

On Apr 29, 2014, at 6:35 AM, Thomas Lecocq [email protected] wrote:

Hi all,

I’m trying to make a minimal example of a line plot, that takes an external json content and plots it. I first would like just to load the json, not really have to rely on the bokeh-server or anything else… Once this is done, I want to be able to update the plot (say, click a button, multiply all elements from the data by 2, and update the view) … ?

Any hint ?

Thanks a lot,

Tom

–
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/6727a554-3420-4e33-b676-85a3ccef2273%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–
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/f1f888f9-c084-4a31-a748-dda332b568e3%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
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/b8fbc25a-601c-49a9-94fc-fbb062374a3c%40continuum.io.

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

Bryan · May 1, 2014, 10:56pm

Thomas,

There is a reference for the glyph specs but there is not much of an API reference. On the other other, there is also not much of an API. THer wis basically make_plot(...) and not much else at the high level. Apart from that there is just the object model, which is pretty well mirrored on the python side. Would love input on additional API to add, and would also be happy to include a BokehJS tutorial in the larger Bokeh tutorial at bokeh.pydata.org.

Thanks,

Bryan

···

On May 1, 2014, at 8:50 AM, Thomas Lecocq <[email protected]> wrote:

Bryan,

Yeha, somehow did the opposite, @update is in coffeescript, and the following is in javascript:

function get_CCF(callback, arg) {

    $.ajax({

        url:'/admin/all_results.json',

        type:'POST',

        dataType: 'json',

        contentTtupe: 'application/json',

        data: JSON.stringify(arg),

        success: callback

        });

    };

function updateplot() {

    var pair = $('#pair option:selected').text()

    var filter = $('#filter option:selected').val()

    var component = $('#component option:selected').text()

    var arg = {"pair": pair,"component": component,"filter":filter}

    console.debug(arg);

    get_CCF(update, arg);

    }

I'll probably write some tutorial on that later soon, as it could definitively be useful for many. By the way, is there an API doc somewhere on the methods/calls/plots/etc available in Coffeescript ?

Thom

Le jeudi 1 mai 2014 16:48:48 UTC+2, Bryan Van de ven a écrit :
Thomas,

Not an expert, but the spectrogram demo looks roughly like this (coffeescript):

  request_data: () ->
    $.ajax 'http://localhost:5000/data',
    type: 'GET'
    dataType: 'json'
    error: (jqXHR, textStatus, errorThrown) =>
      console.log("something failed")

    success: (data, textStatus, jqXHR) =>
      @do_stuff(data)

On Apr 30, 2014, at 4:12 AM, Thomas Lecocq <[email protected]> wrote:

> Hi Bryan,
>
> Digging into the JS code, I think I found some ways of updating the {x,y}_ranges on the view, which are not updated when I trigger the 'change' on the model.
>
> Hope this gives new ideas Next step: get x,y data from an \.ajax call :\-\) > > Cheers, > > Thom > > <\!DOCTYPE html> > <html> > <head> > <meta http\-equiv="content\-type" content="text/html; charset=UTF\-8"> > <title>Animated \- jsFiddle demo by bokeh</title> > <script type='text/javascript' src='//code\.jquery\.com/jquery\-2\.0\.2\.js'></script> > <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> > <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh-0.4.4.css"> > <script type='text/javascript' src="bokeh\-0\.4\.4\.js"></script> > > <script type="text/coffeescript"> > x = \[0,1,2,3\] > y = \[1,2,5,6\] > > color = \["\#C6DBEF",\] > > window\.source = Bokeh\.Collections$'ColumnDataSource'$\.create$ > data: > color: color > x: x > y: y > $ > > line = \{ > type: 'line' > x: 'x' > y: 'y' > line\_color: 'color' > line\_width: 2 > line\_alpha: 1\.0 > \} > > options = \{ > title: "CCF Update Demo" > dims: \[1000, 500\] > xrange: 'auto' > yrange: 'auto' > xaxes: "min" > yaxes: "min" > tools: "pan,wheel\_zoom,box\_zoom,reset,resize" > \} > > plot = Bokeh\.Plotting\.make\_plot$line, window\.source, options$ > Bokeh\.Plotting\.show$plot,'\#CCF'$ > > > \# > \# Update the plot data on an interval > \# > Array::max=\-> > Math\.max\.apply$null, this$ > > Array::min=\-> > Math\.min\.apply$null, this$ > > update =  \-> > data = window\.source\.get$'data'$ > tmp = $i \* 1\.1 for i in data\['x'\]$ > data\['x'\] = tmp > tmp = $Math\.random\($ \* 100 for i in data\['y'\]\) > data\['y'\] = tmp > > window\.source\.set$'data', data$ > window\.source\.trigger$'change', source, \{\}$ > > console\.debug$tmp\.min\($\) > newrange = \{\} > newrange\['xr'\] = \{'start':data\['x'\]\.min, 'end':data\['x'\]\.max\} > newrange\['yr'\] = \{'start':data\['y'\]\.min, 'end':data\['y'\]\.max\} > window\.pview\.update\_range$newrange$ > > setInterval$update, 1000$ > </script> > <script type="text/javascript" src="coffeescript\.js"></script> > </head> > > <body> > <div id="CCF" name="CCF"></div> > </body> > </html> > > Le mardi 29 avril 2014 17:44:54 UTC\+2, Bryan Van de ven a écrit : > Thomas, > > From BokehJS, you will need to trigger some change updates on the source by hand $would love to make this simpler, open to input$\. Check out the animated BokehJS jsfiddle: > > http://jsfiddle.net/bokeh/K8P4P/ > > Particularly the "update" function at the end: > > update =  \-> > data = window\.source\.get$'data'$ > rmin = data\["inner\_radius"\] > tmp = \[rmin\[rmin\.length\-1\]\]\.concat$rmin\.slice\(0, \-1$\) > data\["inner\_radius"\] = tmp > rmax = data\["outer\_radius"\] > tmp = rmax\.slice$1$\.concat$\[rmax\[0\]\]$ > data\["outer\_radius"\] = tmp > window\.source\.set$'data', data$ > window\.source\.trigger$'change', source, \{\}$ > > The basic idea is that you need to grab a handle to the DataSource $in that example it's window\.source but you will need to pull it out of your plot$ and then use \.set and \.trigger to cause the redraw\. > > It suddenly occurs to me that this is a use\-case I don't think had been considered: hybrid python\+js dev\. You could use python to easily generate the basic plot but then if you already have js pulling data in from somewhere, you could update the plot from js directly if the datasources, etc\., are easily gotten ahold of\. That seems pretty neat I will make an issue to explore this idea\. Please let me know if you still need more info, or have ideas about this kind of use of Bokeh\. > > Thanks, > > Bryan > > > On Apr 29, 2014, at 10:35 AM, Thomas Lecocq <thle\.\.\.@gmail\.com> wrote: > > > Bryan, > > > > Thanks for your comment\. > > > > I managed to expose almost enough of what I need\.\.\. Could you just tell me how to trigger an update of the x\_range,y\_range, so the view fits the data added ? > > > > Thanks > > > > <\!DOCTYPE html> > > <html lang="en"> > > <head> > > <meta charset="utf\-8"> > > <title>line\.py example</title> > > <link rel="stylesheet" href="http://cdn.pydata.org/bokeh-0.4.4.min.css" type="text/css" /> > > <script type="text/javascript" src="http://cdn.pydata.org/bokeh-0.4.4.min.js"></script> > > <script src="//code\.jquery\.com/jquery\-1\.10\.2\.js"></script> > > <script type="text/javascript"> > > (function() {
> > data = {"attributes": {"column_names": ["x", "y"], "doc": null, "selected": , "discrete_ranges": {}, "cont_ranges": {}, "data": {"y": [0.0, ], "x": [0.0, ]}, "id": "data"}, "type": "ColumnDataSource", "id": "data"},
> > all_models = [
> > data,
> >
> > {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "data"}, "columns": ["x"]}], "id": "bbd5dd00-5564-4e65-9169-5c149e857686", "doc": null}, "type": "DataRange1d", "id": "bbd5dd00-5564-4e65-9169-5c149e857686"},
> >
> > {"attributes": {"sources": [{"source": {"type": "ColumnDataSource", "id": "data"}, "columns": ["y"]}], "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa", "doc": null}, "type": "DataRange1d", "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa"},
> >
> > {"attributes": {"doc": null, "id": "88360242-94ef-4839-abb4-d302553810d2"}, "type": "BasicTickFormatter", "id": "88360242-94ef-4839-abb4-d302553810d2"},
> > {"attributes": {"doc": null, "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"}, "type": "BasicTicker", "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"},
> > {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "bounds": "auto", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "88360242-94ef-4839-abb4-d302553810d2"}, "ticker": {"type": "BasicTicker", "id": "8deaa0b1-cab2-47b3-8674-67f6ebfac56b"}, "dimension": 0}, "type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"},
> > {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "axis": {"type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"}, "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af", "dimension": 0}, "type": "Grid", "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af"},
> > {"attributes": {"doc": null, "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"}, "type": "BasicTickFormatter", "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"},
> > {"attributes": {"doc": null, "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"}, "type": "BasicTicker", "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"},
> > {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "bounds": "auto", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e", "location": "min", "formatter": {"type": "BasicTickFormatter", "id": "7a9415cc-8ed2-459a-b51a-8bdb79ff282e"}, "ticker": {"type": "BasicTicker", "id": "f83ecaba-e25f-42f9-abfa-f060af866bdf"}, "dimension": 1}, "type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"},
> > {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "91b7f168-6022-4019-98a9-31e6cd989671", "doc": null}, "type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"},
> > {"attributes": {"doc": null, "tool": {"type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"}, "id": "c7af6b67-7298-4431-8000-4268b08e1ada"}, "type": "BoxSelection", "id": "c7af6b67-7298-4431-8000-4268b08e1ada"},
> > {"attributes": {"data_source": {"type": "ColumnDataSource", "id": "data"}, "server_data_source": null, "doc": null, "nonselection_glyphspec": {"line_color": {"value": "#1f77b4"}, "line_width": {"units": "data", "field": "line_width"}, "angle_units": "deg", "x": {"units": "data", "field": "x"}, "type": "line", "y": {"units": "data", "field": "y"}, "line_alpha": {"units": "data", "value": 0.1}, "start_angle_units": "deg", "valign": null, "radius_units": "screen", "visible": null, "end_angle_units": "deg", "line_dash_offset": 0, "length_units": "screen", "line_cap": "butt", "line_dash": , "margin": null, "line_join": "miter", "halign": null}, "xdata_range": null, "ydata_range": null, "glyphspec": {"line_color": {"value": "#0000FF"}, "line_alpha": {"units": "data", "value": 1.0}, "line_width": {"units": "data", "field": "line_width"}, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "type": "line"}, "id": "2de55bd4-b714-4283-afd1-e443a04e906f"}, "type": "Glyph", "id": "2de55bd4-b714-4283-afd1-e443a04e906f"},
> > {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "dimensions": ["width", "height"], "doc": null, "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"}, "type": "PanTool", "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"},
> > {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "dimensions": ["width", "height"], "doc": null, "id": "b930820a-c2e7-427e-9bd4-501b709e346e"}, "type": "WheelZoomTool", "id": "b930820a-c2e7-427e-9bd4-501b709e346e"},
> > {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77", "doc": null}, "type": "ResetTool", "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77"},
> > {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed", "doc": null}, "type": "PreviewSaveTool", "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed"},
> > {"attributes": {"outer_height": 600, "x_range": {"type": "DataRange1d", "id": "bbd5dd00-5564-4e65-9169-5c149e857686"}, "y_range": {"type": "DataRange1d", "id": "fc8abecf-9289-4f8d-8b60-ee9b834a46aa"}, "outer_width": 600, "renderers": [{"type": "LinearAxis", "id": "cca1aab2-4f92-40cd-bc26-cc6d71b18560"}, {"type": "Grid", "id": "5a329fd3-154a-4ed5-a7a2-764384e3c1af"}, {"type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"}, {"type": "Grid", "id": "fac9970a-b9f6-443c-b412-83974d2528d3"}, {"type": "BoxSelection", "id": "c7af6b67-7298-4431-8000-4268b08e1ada"}, {"type": "Glyph", "id": "2de55bd4-b714-4283-afd1-e443a04e906f"}], "id": "line_example", "data_sources": , "doc": null, "canvas_height": 600, "title": "Plot", "tools": [{"type": "PanTool", "id": "06a57c95-fe07-4033-aee3-32e3d25afe19"}, {"type": "WheelZoomTool", "id": "b930820a-c2e7-427e-9bd4-501b709e346e"}, {"type": "BoxZoomTool", "id": "91b7f168-6022-4019-98a9-31e6cd989671"}, {"type": "ResetTool", "id": "d3013d8a-0524-4c87-a664-f78a06a3ff77"}, {"type": "PreviewSaveTool", "id": "77aa37cd-53c8-4d9d-998b-b9124f92c7ed"}], "canvas_width": 600}, "type": "Plot", "id": "line_example"},
> > {"attributes": {"plot": {"type": "Plot", "id": "line_example"}, "doc": null, "axis": {"type": "LinearAxis", "id": "85d7a783-bc12-42cc-8d6f-89ddb3d2458e"}, "id": "fac9970a-b9f6-443c-b412-83974d2528d3", "dimension": 1}, "type": "Grid", "id": "fac9970a-b9f6-443c-b412-83974d2528d3"},
> > {"attributes": {"doc": null, "children": [{"type": "Plot", "id": "line_example"}], "id": "59ac3505-c899-4aeb-bc31-94f5a00e38a8"}, "type": "PlotContext", "id": "59ac3505-c899-4aeb-bc31-94f5a00e38a8"}];
> >
> > var modelid = "59ac3505-c899-4aeb-bc31-94f5a00e38a8";
> > var modeltype = "PlotContext";
> > var elementid = "CCF";
> > console.log(modelid, modeltype, elementid);
> > Bokeh.load_models(all_models);
> > model = Bokeh.Collections(modeltype).get(modelid);
> > view = new model.default_view({model: model, el: '#CCF'});
> > });
> > </script>
> > <script>
> > $document$\.ready$function\($ \{ > > ( "#update" ).click(function() {
> > data.attributes.data.x = [0,2,5]
> > data.attributes.data.y = [0,2,5]
> > view = new model.default_view({model: model, el: '#CCF'})
> > });
> > });
> > </script>
> > </head>
> > <body>
> > <div class="plotdiv" id="CCF">Plots</div>
> > <div id="update" name='update'>
> > Click here
> > </div>
> >
> > </body>
> > </html>
> >
> >
> >
> > Le mardi 29 avril 2014 16:17:26 UTC+2, Bryan Van de ven a écrit :
> > Hi Thomas,
> >
> > Right now Bokeh plots are only reactive from the updates from the server. Without the server, coupling a button press to "multiply all values by two" means that that data update has to happen purely in JavaScript. Perhaps we could think about exposing some kind of plug in system that allows events to be bound to arbitrary snippets of javascript, but there is no functionality for that currently.
> >
> > Bryan
> >
> >
> > On Apr 29, 2014, at 6:35 AM, Thomas Lecocq <[email protected]> wrote:
> >
> > > Hi all,
> > >
> > > I'm trying to make a minimal example of a line plot, that takes an external json content and plots it. I first would like just to load the json, not really have to rely on the bokeh-server or anything else... Once this is done, I want to be able to update the plot (say, click a button, multiply all elements from the data by 2, and update the view) ... ?
> > >
> > > Any hint ?
> > >
> > > Thanks a lot,
> > >
> > > Tom
> > >
> > > --
> > > 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 bokeh+un...@continuum.io.
> > > To post to this group, send email to bo...@continuum.io.
> > > To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6727a554-3420-4e33-b676-85a3ccef2273%40continuum.io\.
> > > For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
> >
> >
> > --
> > 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 bokeh+un...@continuum.io.
> > To post to this group, send email to bo...@continuum.io.
> > To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/f1f888f9-c084-4a31-a748-dda332b568e3%40continuum.io\.
> > For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
>
>
> --
> 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 bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/b8fbc25a-601c-49a9-94fc-fbb062374a3c%40continuum.io\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
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/35842ee3-5445-4bf1-b723-e85cc6097be0%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.