Using JSON Data To Make Charts

Using JSON Data to Make Charts

Overview

JSON (JavaScript Object Notation) is a format that uses human-readable text to transmit data objects. By externalizing our chart data, we can reference our data from multiple locations and set caching options.

Loading an External JSON Data File

Here are the contents of our chart.json file:

{

    type: "line",
    title: {
        text: "Chart Loaded from External JSON File"
    },
    series: [
        {
            values: [25,15,26,21,24,26,33,25,15,25,22,24]
        }
    ]
}

Caching

The cache option of the zingchart.render method allows us to set the caching options for chart data, theme defaults, CSS files, and CSV files.

{
    data: true | false
    defaults: true | false
    css: true | false
    csv: true | false
}

In this case, we will only cache the data file used to create our chart.

zingchart.render({
    id: "myChart",
    output: "svg",
    height:400,
    width: "100%",
    dataurl: "resources/cachedchart.json",
    cache: {
        data: true
    }
});

If you would like to see how caching affects the performance of your chart, use your browser's developer tools to view the individual network connections. When data caching is set to false, ZingChart will always make a network request for the external file. With data caching set to true, ZingChart will use the chart data stored in the cache, reducing the number of network requests.

This chart uses caching:

This chart does not use caching:

We can see the benefits of caching chart data by using the network panel in our browser's developer tools. This allows us to see the difference in the amount of time needed to load the chart data. When the data is cached, the browser will use the cached version, as long as the resource has not been modified since it was originally cached. When the data is not cached, the browser will load the resource every time the chart is rendered.

Summary

The ability to use external JSON data files is another great example of what makes ZingChart the most flexible charting library out there!