CodePen Embed - SUPPORT-2242(5)

<script language="javascript" type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/3.20.0/fusioncharts.js"></script>
<script language="javascript" type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.candy.js"></script>
<div id="container">FusionCharts will render here</div>

const URL_DATA =
  "https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/examples/online-sales-single-series/data.json";
const URL_SCHEMA =
  "https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/examples/online-sales-single-series/schema.json";

const jsonify = (res) => res.json();
const dataFetch = [
  ["16-06-2022 17:00", "Prod Count ", "0.00000"],
  ["16-06-2022 07:00", "Rate", "11985.00000"],
  ["16-06-2022 17:01", "Prod Count ", "0.00000"],
  ["16-06-2022 07:01", "Rate", "1190.00000"],
  ["16-06-2022 07:02", "Prod Count ", "0.00000"],
  ["16-06-2022 07:02", "Rate", "11658.00000"],
  ["16-06-2022 07:03", "Prod Count ", "0.00000"],
  ["16-06-2022 07:03", "Rate", "2878.00000"],
  ["16-06-2022 07:04", "Prod Count ", "0.00000"],
  ["16-06-2022 07:04", "Rate", "1582.00000"],
  ["16-06-2022 18:05", "Prod Count ", "0.00000"],
  ["16-06-2022 07:05", "Rate", "158.00000"],
  ["16-06-2022 07:06", "Prod Count ", "0.00000"],
  ["16-06-2022 07:06", "Rate", "845.00000"],
  ["16-06-2022 07:07", "Prod Count ", "0.00000"],
  ["16-06-2022 07:07", "Rate", "1985.00000"],
  ["16-06-2022 07:08", "Prod Count ", "0.00000"],
  ["16-06-2022 07:08", "Rate", "565.00000"],
  ["16-06-2022 07:09", "Prod Count ", "0.00000"],
  ["16-06-2022 07:09", "Rate", "545.00000"],
  ["16-06-2022 07:10", "Prod Count ", "0.00000"],
  ["16-06-2022 07:10", "Rate", "1574.00000"],
  ["16-06-2022 07:11", "Prod Count ", "0.00000"],
  ["16-06-2022 07:11", "Rate", "1744.00000"],
  ["16-06-2022 07:12", "Prod Count ", "0.00000"],
  ["16-06-2022 07:12", "Rate", "1145.00000"],
  ["16-06-2022 07:13", "Prod Count ", "0.00000"],
  ["16-06-2022 07:13", "Rate", "1743.00000"],
  ["16-06-2022 07:14", "Prod Count ", "25.00000"],
  ["16-06-2022 07:14", "Rate", "1685.00000"],
  ["16-06-2022 07:15", "Prod Count ", "0.00000"],
  ["16-06-2022 07:15", "Rate", "1478.00000"],
  ["16-06-2022 07:16", "Prod Count ", "0.00000"],
  ["16-06-2022 07:16", "Rate", "1907.00000"],
  ["16-06-2022 07:17", "Prod Count ", "0.00000"],
  ["16-06-2022 07:17", "Rate", "66.00000"],
  ["16-06-2022 07:18", "Prod Count ", "10.00000"],
  ["16-06-2022 07:18", "Rate", "548.00000"],
  ["16-06-2022 07:19", "Prod Count ", "0.00000"],
  ["16-06-2022 07:19", "Rate", "452.00000"],
  ["16-06-2022 07:20", "Prod Count ", "0.00000"],
  ["16-06-2022 07:20", "Rate", "374.00000"],
  ["16-06-2022 07:21", "Prod Count ", "0.00000"],
  ["16-06-2022 07:21", "Rate", "1857.00000"],
  ["16-06-2022 07:22", "Prod Count ", "0.00000"],
  ["16-06-2022 07:22", "Rate", "1754.00000"],
  ["16-06-2022 07:23", "Prod Count ", "0.00000"],
  ["16-06-2022 07:23", "Rate", "1635.00000"],
  ["16-06-2022 07:24", "Prod Count ", "0.00000"],
  ["16-06-2022 07:24", "Rate", "600.00000"],
  ["16-06-2022 07:25", "Prod Count ", "0.00000"],
  ["16-06-2022 07:25", "Rate", "1905.00000"],
  ["16-06-2022 07:26", "Prod Count ", "0.00000"],
  ["16-06-2022 07:26", "Rate", "77.00000"],
  ["16-06-2022 07:27", "Prod Count ", "0.00000"],
  ["16-06-2022 07:27", "Rate", "574.00000"],
  ["16-06-2022 07:28", "Prod Count ", "0.00000"],
  ["16-06-2022 07:28", "Rate", "1491.00000"],
  ["16-06-2022 07:29", "Prod Count ", "0.00000"],
  ["16-06-2022 07:29", "Rate", "325.00000"],
  ["16-06-2022 07:30", "Prod Count ", "0.00000"],
  ["16-06-2022 07:30", "Rate", "453.00000"],
  ["16-06-2022 07:31", "Prod Count ", "0.00000"],
  ["16-06-2022 07:31", "Rate", "1210.00000"],
  ["16-06-2022 07:32", "Prod Count ", "0.00000"],
  ["16-06-2022 07:32", "Rate", "550.00000"],
  ["16-06-2022 07:33", "Prod Count ", "0.00000"],
  ["16-06-2022 07:33", "Rate", "1180.00000"],
  ["16-06-2022 07:34", "Prod Count ", "0.00000"],
  ["16-06-2022 07:34", "Rate", "412.00000"],
  ["16-06-2022 07:35", "Prod Count ", "0.00000"],
  ["16-06-2022 07:35", "Rate", "267.00000"],
  ["16-06-2022 07:36", "Prod Count ", "0.00000"],
  ["16-06-2022 07:36", "Rate", "149.00000"],
  ["16-06-2022 07:37", "Prod Count ", "0.00000"],
  ["16-06-2022 07:37", "Rate", "1511.00000"],
  ["16-06-2022 07:38", "Prod Count ", "0.00000"],
  ["16-06-2022 07:38", "Rate", "1529.00000"],
  ["16-06-2022 07:39", "Prod Count ", "0.00000"],
  ["16-06-2022 07:39", "Rate", "311.00000"],
  ["16-06-2022 07:40", "Prod Count ", "0.00000"],
  ["16-06-2022 07:40", "Rate", "268.00000"],
  ["16-06-2022 07:41", "Prod Count ", "0.00000"],
  ["16-06-2022 07:41", "Rate", "1586.00000"],
  ["16-06-2022 07:42", "Prod Count ", "0.00000"],
  ["16-06-2022 07:42", "Rate", "111.00000"],
  ["16-06-2022 07:43", "Prod Count ", "0.00000"],
  ["16-06-2022 07:43", "Rate", "88.00000"],
  ["16-06-2022 07:44", "Prod Count ", "520.00000"],
  ["16-06-2022 07:44", "Rate", "59.00000"],
  ["16-06-2022 07:45", "Prod Count ", "0.00000"],
  ["16-06-2022 07:45", "Rate", "059.00000"],
  ["16-06-2022 07:46", "Prod Count ", "0.00000"],
  ["16-06-2022 07:46", "Rate", "1910.00000"],
  ["16-06-2022 07:47", "Prod Count ", "0.00000"],
  ["16-06-2022 07:47", "Rate", "130.00000"],
  ["16-06-2022 07:48", "Prod Count ", "0.00000"],
  ["16-06-2022 07:48", "Rate", "1548.00000"],
  ["16-06-2022 07:49", "Prod Count ", "67.00000"],
  ["16-06-2022 07:49", "Rate", "111.00000"],
  ["16-06-2022 07:50", "Prod Count ", "0.00000"],
  ["16-06-2022 07:50", "Rate", "88.00000"],
  ["16-06-2022 07:51", "Prod Count ", "0.00000"],
  ["16-06-2022 07:51", "Rate", "158.00000"],
  ["16-06-2022 07:52", "Prod Count ", "0.00000"],
  ["16-06-2022 07:52", "Rate", "90.00000"],
  ["16-06-2022 07:53", "Prod Count ", "0.00000"],
  ["16-06-2022 07:53", "Rate", "18.00000"],
  ["16-06-2022 07:54", "Prod Count ", "0.00000"],
  ["16-06-2022 07:54", "Rate", "110.00000"],
  ["16-06-2022 07:55", "Prod Count ", "0.00000"],
  ["16-06-2022 07:55", "Rate", "40.00000"],
  ["16-06-2022 07:56", "Prod Count ", "0.00000"],
  ["16-06-2022 07:56", "Rate", "7.00000"],
  ["16-06-2022 07:57", "Prod Count ", "0.00000"],
  ["16-06-2022 07:57", "Rate", "92.00000"],
  ["16-06-2022 07:58", "Prod Count ", "92.00000"],
  ["16-06-2022 07:58", "Rate", "125.00000"],
  ["16-06-2022 07:59", "Prod Count ", "0.00000"],
  ["16-06-2022 07:59", "Rate", "510.00000"],
  ["16-06-2022 08:00", "Prod Count ", "0.00000"],
  ["16-06-2022 08:00", "Rate", "526.00000"],
  ["16-06-2022 08:01", "Prod Count ", "0.00000"],
  ["16-06-2022 08:01", "Rate", "127.00000"],
  ["16-06-2022 08:02", "Prod Count ", "0.00000"],
  ["16-06-2022 08:02", "Rate", "290.00000"],
  ["16-06-2022 08:03", "Prod Count ", "0.00000"],
  ["16-06-2022 08:03", "Rate", "550.00000"],
  ["16-06-2022 08:04", "Prod Count ", "0.00000"],
  ["16-06-2022 08:04", "Rate", "116.00000"],
  ["16-06-2022 08:05", "Prod Count ", "0.00000"],
  ["16-06-2022 08:05", "Rate", "10.00000"],
  ["16-06-2022 08:06", "Prod Count ", "0.00000"],
  ["16-06-2022 08:06", "Rate", "121.00000"],
  ["16-06-2022 08:07", "Prod Count ", "0.00000"],
  ["16-06-2022 08:07", "Rate", "139.00000"],
  ["16-06-2022 08:08", "Prod Count ", "0.00000"],
  ["16-06-2022 08:08", "Rate", "128.00000"],
  ["16-06-2022 08:09", "Prod Count ", "0.00000"],
  ["16-06-2022 08:09", "Rate", "133.00000"],
  ["16-06-2022 08:10", "Prod Count ", "0.00000"],
  ["16-06-2022 08:10", "Rate", "50.00000"],
  ["16-06-2022 08:11", "Prod Count ", "0.00000"],
  ["16-06-2022 08:11", "Rate", "590.00000"],
  ["16-06-2022 08:12", "Prod Count ", "0.00000"],
  ["16-06-2022 08:12", "Rate", "1725.00000"],
  ["16-06-2022 08:13", "Prod Count ", "0.00000"],
  ["16-06-2022 08:13", "Rate", "169.00000"],
  ["16-06-2022 08:14", "Prod Count ", "0.00000"],
  ["16-06-2022 08:14", "Rate", "159.00000"],
  ["16-06-2022 08:15", "Prod Count ", "0.00000"],
  ["16-06-2022 08:15", "Rate", "28.00000"],
  ["16-06-2022 08:16", "Prod Count ", "0.00000"],
  ["16-06-2022 08:16", "Rate", "169.00000"],
  ["16-06-2022 08:17", "Prod Count ", "0.00000"],
  ["16-06-2022 08:17", "Rate", "159.00000"],
  ["16-06-2022 08:18", "Prod Count ", "0.00000"],
  ["16-06-2022 08:18", "Rate", "75.00000"],
  ["16-06-2022 08:19", "Prod Count ", "0.00000"],
  ["16-06-2022 08:19", "Rate", "99.00000"],
  ["16-06-2022 08:20", "Prod Count ", "0.00000"],
  ["16-06-2022 08:20", "Rate", "51.00000"],
  ["16-06-2022 08:21", "Prod Count ", "0.00000"],
  ["16-06-2022 08:21", "Rate", "225.00000"],
  ["16-06-2022 08:22", "Prod Count ", "0.00000"],
  ["16-06-2022 08:22", "Rate", "149.00000"],
  ["16-06-2022 08:23", "Prod Count ", "0.00000"],
  ["16-06-2022 08:23", "Rate", "181.00000"],
  ["16-06-2022 08:24", "Prod Count ", "0.00000"],
  ["16-06-2022 08:24", "Rate", "11.00000"],
  ["16-06-2022 08:25", "Prod Count ", "0.00000"],
  ["16-06-2022 08:25", "Rate", "19.00000"],
  ["16-06-2022 08:26", "Prod Count ", "0.00000"],
  ["16-06-2022 08:26", "Rate", "525.00000"],
  ["16-06-2022 08:27", "Prod Count ", "0.00000"],
  ["16-06-2022 08:27", "Rate", "191.00000"],
  ["16-06-2022 08:28", "Prod Count ", "0.00000"],
  ["16-06-2022 08:28", "Rate", "41.00000"],
  ["16-06-2022 08:29", "Prod Count ", "0.00000"],
  ["16-06-2022 08:29", "Rate", "34.00000"],
  ["16-06-2022 08:30", "Prod Count ", "0.00000"],
  ["16-06-2022 08:30", "Rate", "75.00000"],
  ["16-06-2022 08:31", "Prod Count ", "0.00000"],
  ["16-06-2022 08:31", "Rate", "149.00000"],
  ["16-06-2022 08:32", "Prod Count ", "0.00000"],
  ["16-06-2022 08:32", "Rate", "33.00000"],
  ["16-06-2022 08:33", "Prod Count ", "0.00000"],
  ["16-06-2022 08:33", "Rate", "153.00000"],
  ["16-06-2022 08:34", "Prod Count ", "0.00000"],
  ["16-06-2022 08:34", "Rate", "129.00000"],
  ["16-06-2022 08:35", "Prod Count ", "0.00000"],
  ["16-06-2022 08:35", "Rate", "122.00000"],
  ["16-06-2022 08:36", "Prod Count ", "0.00000"],
  ["16-06-2022 08:36", "Rate", "136.00000"],
  ["16-06-2022 08:37", "Prod Count ", "0.00000"],
  ["16-06-2022 08:37", "Rate", "11.00000"],
  ["16-06-2022 08:38", "Prod Count ", "0.00000"],
  ["16-06-2022 08:38", "Rate", "70.00000"],
  ["16-06-2022 08:39", "Prod Count ", "0.00000"],
  ["16-06-2022 08:39", "Rate", "11.00000"],
  ["16-06-2022 08:40", "Prod Count ", "0.00000"],
  ["16-06-2022 08:40", "Rate", "55.00000"],
  ["16-06-2022 08:41", "Prod Count ", "0.00000"],
  ["16-06-2022 08:41", "Rate", "61.00000"],
  ["16-06-2022 08:42", "Prod Count ", "0.00000"],
  ["16-06-2022 08:42", "Rate", "41.00000"],
  ["16-06-2022 08:43", "Prod Count ", "0.00000"],
  ["16-06-2022 08:43", "Rate", "33.00000"],
  ["16-06-2022 08:44", "Prod Count ", "0.00000"],
  ["16-06-2022 08:44", "Rate", "129.00000"],
  ["16-06-2022 08:45", "Prod Count ", "0.00000"],
  ["16-06-2022 08:45", "Rate", "11.00000"],
  ["16-06-2022 08:46", "Prod Count ", "0.00000"],
  ["16-06-2022 08:46", "Rate", "143.00000"],
  ["16-06-2022 08:47", "Prod Count ", "0.00000"],
  ["16-06-2022 08:47", "Rate", "37.00000"],
  ["16-06-2022 08:48", "Prod Count ", "0.00000"],
  ["16-06-2022 08:48", "Rate", "330.00000"],
  ["16-06-2022 08:49", "Prod Count ", "0.00000"],
  ["16-06-2022 08:49", "Rate", "1124.00000"],
  ["16-06-2022 08:50", "Prod Count ", "0.00000"],
  ["16-06-2022 08:50", "Rate", "50.00000"],
  ["16-06-2022 08:51", "Prod Count ", "0.00000"],
  ["16-06-2022 08:51", "Rate", "330.00000"],
  ["16-06-2022 08:52", "Prod Count ", "0.00000"],
  ["16-06-2022 08:52", "Rate", "19.00000"],
  ["16-06-2022 08:53", "Prod Count ", "50.00000"],
  ["16-06-2022 08:53", "Rate", "10.00000"],
  ["16-06-2022 08:54", "Prod Count ", "0.00000"],
  ["16-06-2022 08:54", "Rate", "33.00000"],
  ["16-06-2022 08:55", "Prod Count ", "0.00000"],
  ["16-06-2022 08:55", "Rate", "753.00000"]
];
const schemaFetch = [
  { name: "Time", type: "date", format: "%d-%m-%Y %H:%M" },
  { name: "Type", type: "string" },
  { name: "Production Rate", type: "number" }
];

Promise.all([dataFetch, schemaFetch]).then(([data, schema]) => {
  var fusionTable = new FusionCharts.DataStore().createDataTable(data, schema);

  new FusionCharts({
    type: "timeseries",
    renderAt: "container",
    width: "90%",
    height: 490,
    dataSource: {
      data: fusionTable,
      chart: {
        exportEnabled: 1
      },
      caption: {
        text: "Online Sales of Zara "
      },
      xaxis: {
        plot: "Time",
        outputTimeFormat: {
          minute: "%H:%M",
          hour: "%H:%M"
        }
      },
      yAxis: {
        plot: {
          value: "Sales",
          type: "line"
        }
      },
      tooltip: {
        enabled: "false", // Disables the Tooltip
        outputTimeFormat: {
          minute: "%d-%m-%Y %H:%M"
        }
      },
      navigator: {
        outputTimeFormat: "%b %d, %Y %H:%M",
        //Added "HourTimeFormat" to set the time format of navigator to either 24 hours or 12 hours
        HourTimeFormat: 24
      }
    }
  }).render();
});

This Pen is owned by FusionCharts on CodePen.

See more by @fusioncharts on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.