Hi Bokeh team!
that’s my first post on this forum.
I’ve been using Bokeh for 1-2 years now for small (but most helpful) data visualization tools, and it’s been working great so I’d like to start by thanking you all for the amazing work you have achieved so far and I’m really looking forward to the day v1.0 will be available!
Right now I’m getting started with BokehJS, so I simply copy-pasted the basic example from bokeh documentation into a very simple html file but somehow it does not display anything. Instead I get following javascript error message: “Uncaught TypeError: Cannot read property ‘linspace’ of undefined at window.onload” (line 16)
Below is the html I use, can you spot anything obviously wrong? Or did the API drastically changed since this demo was written?
Question is also here in case it was indeed an interesting one: https://stackoverflow.com/questions/46935288/bokehjs-basic-example-error-cannot-read-property-linspace-of-undefined
Thanks in advance for your help!
Cheers!
<link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.css">
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.js"></script>
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.js"></script>
<script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.js"></script>
<script type="text/javascript">
window.onload=function(){
// create some data and a ColumnDataSource
var x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
var y = x.map(function (v) { return v * 0.5 + 3.0; });
//var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });
// create some ranges for the plot
var xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
var ydr = Bokeh.Range1d(-0.5, 20.5);
// make the plot
var plot = new Bokeh.Plot({
title: "BokehJS Plot",
x_range: xdr,
y_range: ydr,
plot_width: 400,
plot_height: 400,
background_fill_color: "#F2F2F7"
});
// add axes to the plot
var xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
var yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
plot.add_layout(xaxis, "below");
plot.add_layout(yaxis, "left");
// add grids to the plot
var xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
var ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
plot.add_layout(xgrid);
plot.add_layout(ygrid);
// add a Line glyph
var line = new Bokeh.Line({
x: { field: "x" },
y: { field: "y" },
line_color: "#666699",
line_width: 2
});
plot.add_glyph(line, source);
// add the plot to a document and display it
var doc = new Bokeh.Document();
doc.add_root(plot);
var div = document.getElementById("myPlot");
Bokeh.embed.add_document_standalone(doc, div);
};
</script>
</head>
<body>
<div id="myPlot"></div>
</body>