CODEWITHSUNDEEP
javascripthtmlvue.js
Toby Liao
Toby Liao

Reputation: 55

Inserting Vanilla JS into VueJS framework

With the concept of VueJS is a kind of framework of JS, then it should have no problem inserting the vanilla JS into it. The following is the attempt to insert the pure JS code into vue-cli project(webpack structure).

[Before Start] I tried the example code as the following link(official document)

URL: https://codepen.io/Tobyliao/pen/ZEWNvwE?editable=true%3Dhttps%3A%2F%2Fdocs.bokeh.org%2F

it works.

[Question] As I tried to imlement into Vue project. It fails. picture1 is the directory structure.

  1. I tried to place the src url include into ./public/html's tag as following:
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.1.min.js"></script>
  1. Create a componet in './src/components/BokehPlot.vue'

inside the code, I insert

<template>
    <h1>Measurement Plotting</h1>
</template>
<script src='./main.js'>
export default {

}
</script>
  1. Then finally place all the Bokeh code into './src/component/main.js'. It is the pure JS code I want to import into the structure.

[Result]

  1. I can see the plot in the background, but it kept on showing the error message like picture2.

picture1

picture2

Upvotes: 0

Views: 689

Answers (1)

Tim Wickstrom
Tim Wickstrom

Reputation: 5701

You have many options here, I went ahead and simply made a mixin to utilize the component lifecycle that Vue provides. source

Here are the relevant parts:

BokehPlot.vue

<template>
  <h1>治具量測</h1>
</template>
<script>
import Chart from "@/mixins/Chart";
export default {
  mixins: [Chart],
};
</script>

Chart.js

export default {
  data() {
    return {
      plot: null,
      xdr: null,
      ydr: null
    };
  },
  beforeMount() {
    // create some ranges for the plot
    this.xdr = new Bokeh.Range1d({ start: -1, end: 100 });
    this.ydr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });

    // make the plot
    this.plot = new Bokeh.Plot({
      title: "BokehJS Plot",
      x_range: this.xdr,
      y_range: this.ydr,
      plot_width: 400,
      plot_height: 400,
      background_fill_color: "#F2F2F7"
    });
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // create some data and a ColumnDataSource
      let x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
      let y = x.map(function (v) {
        return v * 0.5 + 3.0;
      });
      let source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });

      // add axes to the plot
      let xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
      let yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
      this.plot.add_layout(xaxis, "below");
      this.plot.add_layout(yaxis, "left");

      // add grids to the plot
      let xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
      let ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
      this.plot.add_layout(xgrid);
      this.plot.add_layout(ygrid);

      // add a Line glyph
      let line = new Bokeh.Line({
        x: { field: "x" },
        y: { field: "y" },
        line_color: "#666699",
        line_width: 2
      });
      this.plot.add_glyph(line, source);

      Bokeh.Plotting.show(this.plot);
    }
  }
};

Many decisions to still make, but hopefully that will get you pointed down the right path.

See working example: https://codesandbox.io/s/bokehjs-forked-4w20k?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 1

Related Questions