BokehJS basic demo not working?

On Wed, Oct 25, 2017 at 4:39 PM, Astrum42 astrum42@gmail.com wrote:

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

you need to add bokeh-api javascript file after bokeh. On the other hand, bokeh-widgets and bokeh-tables are unnecessary to run this example.

Mateusz

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](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](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](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](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](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](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>

–

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+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/220c6bc7-25d6-4fe9-9be1-924d86bd8e9c%40continuum.io.

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

On Wed, Oct 25, 2017 at 4:59 PM, Mateusz Paprocki mpaprocki@anaconda.com wrote:

Hi,

–

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

To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/ZUbe6nDGyeI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to bokeh+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8iAHtaeSvGnNoKZgQrvr0rXO%2BPqmuS8jPvm_GrkUe7jfw%40mail.gmail.com.

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

On Wed, Oct 25, 2017 at 4:39 PM, Astrum42 astrum42@gmail.com wrote:

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

you need to add bokeh-api javascript file after bokeh. On the other hand, bokeh-widgets and bokeh-tables are unnecessary to run this example.

Mateusz

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](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](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](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](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](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](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>

–

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+unsubscribe@continuum.io.

To post to this group, send email to bokeh@continuum.io.

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/220c6bc7-25d6-4fe9-9be1-924d86bd8e9c%40continuum.io.

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

On Oct 25, 2017, at 10:08, Romain Astro <astrum42@gmail.com> wrote:

thanks for the quick reply, this is now working (after you uncomment line 6 "var source = [...]").
Maybe a quick update of page <no title> — Bokeh 3.3.2 Documentation
could help beginners like me!
Cheers,
A

On Wed, Oct 25, 2017 at 4:59 PM, Mateusz Paprocki <mpaprocki@anaconda.com> wrote:
Hi,

On Wed, Oct 25, 2017 at 4:39 PM, Astrum42 <astrum42@gmail.com> wrote:
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: javascript - BokehJS basic example error - Cannot read property 'linspace' of undefined - Stack Overflow

you need to add bokeh-api javascript file after bokeh. On the other hand, bokeh-widgets and bokeh-tables are unnecessary to run this example.

Mateusz

Thanks in advance for your help!

Cheers!

<html>
    <head>
        
        <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.css&quot;&gt;
        <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.css&quot;&gt;
        <link rel="stylesheet" type="text/css" href="http://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.css&quot;&gt;

        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.10.min.js&quot;&gt;&lt;/script&gt;
        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.10.min.js&quot;&gt;&lt;/script&gt;
        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-tables-0.12.10.min.js&quot;&gt;&lt;/script&gt;

        <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>

--
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+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/220c6bc7-25d6-4fe9-9be1-924d86bd8e9c%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
You received this message because you are subscribed to a topic in the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this topic, visit https://groups.google.com/a/continuum.io/d/topic/bokeh/ZUbe6nDGyeI/unsubscribe\.
To unsubscribe from this group and all its topics, send an email to bokeh+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CANFzp8iAHtaeSvGnNoKZgQrvr0rXO%2BPqmuS8jPvm_GrkUe7jfw%40mail.gmail.com\.

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+unsubscribe@continuum.io.
To post to this group, send email to bokeh@continuum.io.
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAHC6o1v0s2OV965pL-G0KcvBZBvhj5djAXzVB5P2Z2mePA5_6Q%40mail.gmail.com\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.