Data Basics

This page lists the basic data types and the best practices when importing them to your chart.

Data Types

In general, ZingChart has two types of data: single and multidimensional. This includes Cartesian plots (x/y axis), that are the most popular chart type.

For specialty chart types that we do support, you can read more about them in the series-values JSON API page.

Single Dimension

The most common type, single dimensional data is used to plot linear data where there is a consistent step between each value point. A good example of this would be the days of the week; you only want to report data for one day each. Line and Bar charts fit this type of data.

Multidimensional

Multidimensional data is used to plot non-linear data, where there is a not a consistent step between each value point. It often involves relationships between two or more sources. Time-Series, Heatmap, and Scatter charts fit this type of data.

series: [
  {
  	values: [
	  [1147651200000, 18921051],
      [1147737600000, 33470860],
      [1147824000000, 26941146],
      [1147910400000, 23524811]
      ...
    ]
  }
]

You can read our API methods doc to know more about using the API.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/6DUTSH4Z

Remote Configuration

It is very common to have the data received from a remote, REST endpoint instead of hard-coded. There are a few options available to connect to your data.

dataurl

To directly apply remote data to the chart render, set the dataurl property. The url must provide both the valid series data, and the chart-configuration formatting object.

zingchart.render({ 
    id: 'myChart', 
    dataurl: 'https://cdn.zingchart.com/datasets/remote-config.json', 
    height: '100%', 
    width: '100%' 
});
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/DSVE88FZ

setdata

You may also update the rendered chart with data at a later point, after the initial chart render. The setdata method will set/replace the whole chart configuration, and essentially reloads the chart.

fetch('https://cdn.zingchart.com/datasets/remote-config.json')
  .then(res => res.json())  	
  .then(results => {
  	// use setdata to instantiate the chart
  	zingchart.exec('myChart', 'setdata', {
      data: results
    });
  })

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/3KXICENJ

You can read more about manipulating post-rendered charts on the data-manipulation methods page.

AJAX Data

If you want to manipulate asynchronous data before it goes into the chart, use the ZingChart API.

A typical use of the API is demonstrated in the following steps:

1. Synchronously render an empty chart with the noData attribute, to notify users the data is on its way.

let chartConfig = {
  type: 'bar',
  noData: {
    text: 'Fetching remote data...',
    backgroundColor: '#eeeeee',
    fontSize: 18
  }
};
zingchart.render({ 
  id: 'myChart', 
  data: myConfig,
  height: '100%', 
  width: '100%' 
});

2. Once the new asynchronous data is available, use the API to hydrate the chart with the new data.

zingchart.exec('myChart', 'setseriesdata', {
  data: results
});

There are two basic ways to update the chart data after render: setseriesdata and setseriesvalues.

setseriesdata

The setseriesdata method sets or replaces the whole series object. Use this if you want to manipulate the data-point values as well as their styling and configuration.

fetch('https://cdn.zingchart.com/datasets/remote-data.json')
  .then(res = return res.json())  	
  .then(results => {
  	// use setseriesdata to instantiate the chart data
  	zingchart.exec('myChart', 'setseriesdata', {
      data: results
    });
  })
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/ZZQIHMH0

For the purposes of setting or replacing data, the data property is synonymous with the chart configuration's series property.

setseriesvalues

The setseriesvalues method, instead, updates just the series data values. Use this if you don't need to update plot styling or configuration.

fetch('https://cdn.zingchart.com/datasets/remote-seriesvalues.json')
  .then(res => return res.json())  	
  .then(results => {
  	// use setseriesdata to instantiate the chart data
  	zingchart.exec('myChart', 'setseriesvalues', {
      values: results
    });
  })
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/6SWVWKVA

Setting Individual Data Points

To individually add data points, instead of all at once, use the addplot method. This is great if you want stream updates to the chart instead of waiting for all of them to return.

zingchart.exec('myChart', 'addplot', {
  plotindex: plotIndex,
  data: results
});
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/KVKZC3WS

These new plots can be different chart types or even different scales. You could even react to user interactions by throwing this code inside an event listener.

Feed Data

Add dynamic, real-time feed data to the chart with the refresh object.

//real-time feed
let chartConfig = {
  type: 'line',
  refresh: {
    type: 'feed',
    transport: 'js',
    url: 'realTimeFeed()',
    interval: 500,
  },
  ...
};
zingchart.render({...});
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/NVJGY80R

You can read up on all feed functionality in our real time feed docs.

CSV Data

Import data from a CSV file with the csv object.

let chartConfig = {
  type: 'line',
  csv:{
    url:'https://storage.googleapis.com/studio-assets/resources/company.csv',
    verticalLabels: true,
    smartScales: true
  },
  ...
};
zingchart.render({...});
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/6MQN44M2

You can read up on all feed functionality in our csv docs.

Moving Forward

You now understand the basics of the common data structures, and how to import them into your chart. Next up is learning how to style your data, and how to add additional features and configuration. Visit the Where to Go Next page for a full list of recommended next steps.