Join missing data with styled line

Join the missing data points in a time series chart with solid lines

Choose a theme:

The complete code of the above pollution report of yatcha street is given below:

JavaScript
React
Angular
jQuery
Vue
Ember
Svelte
AngularJS
PHP
ASP.NET (C#)
Python
js
Copy
Promise.all([
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/join-missing-data-with-styled-line_data.json"
  ),
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/join-missing-data-with-styled-line_schema.json"
  )
]).then(function(res) {
  const data = res[0];
  const schema = res[1];

  const dataStore = new FusionCharts.DataStore();
  const dataSource = {
    caption: {
      text: "Pollution Report of Yatcha Street"
    },
    subcaption: {
      text: "An industrial town"
    },
    yaxis: [
      {
        plot: [
          {
            value: "Pollution",
            connectnulldata: true,
            style: {
              "plot.null": {
                "stroke-dasharray": "none",
                stroke: "#FF0000"
              }
            }
          }
        ],
        title: "Pollution Concentration (in ppm)",
        min: "130"
      }
    ]
  };
  dataSource.data = dataStore.createDataTable(data, schema);

  new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    width: "100%",
    height: "500",
    dataSource: dataSource
  }).render();
});
html
Copy
<div id="chart-container"></div>