CODEWITHSUNDEEP
javascriptplotundefinedbokeh
Astrum42
Astrum42

Reputation: 115

BokehJS basic example error - Cannot read property 'linspace' of undefined

I am getting started with BokehJS. Hopefully, this will be useful to everybody else for their first attempt with BokehJS.

As a first try I simply copied the basic example from Bokeh online documentation into the following html file.

However when loading it, no plot is displayed and I get a error message at line 15: Uncaught TypeError: Cannot read property 'linspace' of undefined at window.onload

Can you spot anything obviously wrong here? Thanks!

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.9.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.9.min.css">

        <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.js"></script>
        <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.9.min.js"></script>
        <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.9.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>
</html>

Upvotes: 1

Views: 1302

Answers (1)

Alexus
Alexus

Reputation: 1973

you're most likely missing the api lib. Try below example. 

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.9.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.9.min.css">

        <script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.js"></script>
        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.9.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>
</html>

Upvotes: 2

Related Questions