Highchart Stream Example

26 October 2021 by skyghis

Level: expert • Mithril.js Version: latest

3rd-party charts dom m.mount m.request m.stream oncreate onremove

This example shows how to use 3rd party libraries together with Mithril.js and mithril-stream. The external library here is https://www.highcharts.com/ besides Mithril.js' own stream library. In the demo two charts and three buttons are rendered, that can be used to interact with the rendered charts.

Live Example #

JavaScript #

// app.js
function Chart() {
  let chart;
  let dataStream;

  return {
    view: () => m(""),
    oncreate: ({attrs: {data}, dom}) => {
      chart = Highcharts.chart(dom, data());
      dataStream = data.map((options) => chart.update(options, true));
    },
    onremove: () => chart && chart.destroy()
  };
};

const model = {
  serie1: m.stream([]),
  serie2: m.stream([])
};

const actions = {
  clear: () => {
    model.serie1([]);
    model.serie2([]);
  },
  query: {
    data1: () => {
      const rnd = Math.random();
      m.request("https://raw.githubusercontent.com/highcharts/highcharts/master/samples/data/aapl-c.json")
        .then((data)  => data.map(([x, y]) => [x, (y / 100) - rnd]))
        .then((data) => model.serie1(data));
    },
    data2: () => {
      const rnd = Math.random();
      m.request("https://cdn.rawgit.com/highcharts/highcharts/master/samples/data/usdeur.json")
        .then((data)  => data.map(([x, y]) => [x, y + rnd]))
        .then((data) => model.serie2(data))
    }
  }
}

m.mount(document.body, {
  view: () => [
    m("", [
      m("input[type=button][value=load serie 1]", {onclick: actions.query.data1}),
      m("input[type=button][value=load serie 2]", {onclick: actions.query.data2}),
      m("input[type=button][value=clear]", {onclick: actions.clear}),
    ]),
    m(Chart, {data: model.serie1.map((data) => ({
      xAxis: {type: "datetime"},
      series: [{name: "serie 1", data: data}]
    }))}),
    m(Chart, {data: m.stream.merge([model.serie1, model.serie2]).map(([data1, data2]) => ({
      xAxis: {type: "datetime"},
      series: [
        {id: 1, name: "serie 1", data: data1},
        {id: 2, name: "serie 2", data: data2}
      ]
    }))})
  ]
});

The snippet requires the latest version of Mithril.js framework. As an expert user, who is familiar with all the aspects of Mithril.js and JavaScript itself, you are able the follow the example easily.

In this example we can see some Mithril.js API methods like m.stream, m.request or m.mount, besides Mithril.js' basic m() hyperscript function. It also demonstrates, how Mithril.js' lifecycle methods (aka hooks) like onremove and oncreate can be used.

The code sample was authored by skyghis. It was last modified on 26 October 2021.

Contribute #

Do you see some improvements, that could be addressed here? Then let me know by opening an issue. As an alternative, you can fork the repository on GitHub, push your commits and send a pull request. To start your work, click on the edit link below. Thank you for contributing to this repo.

See more code examples  •  Edit this example on GitHub