Data Basics

[values] Attribute

ZingChart provides the values attribute to store an array of values. There are two main accepted data types in ZingChart, single and multi-dimensional arrays.

Single Dimensional Array

A standard array is the most common chart type accepted data format in ZingChart. Linear data is the most common form of data as well:

{
    values: [23,20,27,29,25,17,15]
}

Multi Dimensional Array

Non-linear data is represented by multi-dimensional arrays represented by [x,y] for a single node. Typically the standard use for this is timeseries data [1147651200000, 18921051].You can also use strings, instead of numbers to map multi dimensional arrays ([]).

Using multi dimensional array will slow down the chart because of the 2D array. You will see a speed decrease around 20k nodes.

String values

The main use case for using strings to map multi dimensional arrays is to set the x-axis labels easily.

values: [
  [ 'Mon', 23 ],
  [ 'Tue', 20 ],
  [ 'Wed', 27 ],
  [ 'Thu', 29 ],
  [ 'Fri', 25 ],
  [ 'Sat', 17 ],
  [ 'Sun', 15 ]
]
https://app.zingsoft.com/demos/embed/KYFIA911
https://app.zingsoft.com/demos/embed/KYFIA911

Timeseries data

Non-linear data means that your timestamps wont have an equal step. If you are plotting a chart that has consistent time interval, you do not need to use this data format. Timeseries data also allows certain features in a chart like displaying scale dates and adding default zoom buttons.

Timeseries values use 'millisecond' values in ZingChart. If you have second values, just multiply by 1000.

values: [
  [1147651200000, 18921051],
  [1147737600000, 33470860],
  [1147824000000, 26941146],
  [1147910400000, 23524811],
  [1147996800000, 35221586],
  [1148256000000, 25680800],
  [1148342400000, 24814061]
]
https://app.zingsoft.com/demos/embed/6DUTSH4Z
https://app.zingsoft.com/demos/embed/6DUTSH4Z

Remote JSON Config

You can target a remote or local .json file to populate the chart. configuration. This is enabled through the dataurl property.

JSON performance is much quicker than Javascript object performance. Shipping JSON configurations is the fastest way for the browser and ZingChart to render charts.

zingchart.render({ 
  id: 'myChart', 
  dataurl: 'https://app.zingsoft.com/api/file/DSVE88FZ/remote-config.json', 
  height: '100%', 
  width: '100%' 
});
https://app.zingsoft.com/demos/embed/DSVE88FZ
https://app.zingsoft.com/demos/embed/DSVE88FZ

Feed Data

It is a common to have a dynamic endpoint or file with a set of values that is changing. You can easily hook up that endpoint/feed with the refresh object. ZingCharts native implementation for polling and displaying data. You can read more about this in our feed docs.

 // Real-time feed
refresh: {
  type: 'feed',
  transport: 'http',
  // 'url' is a endpoint that will return a single new value 
  // every 200ms (as defined by 'interval' property)
  url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=40&plots=1',
  interval:200,
  maxTicks:10,
  adjustScale: true,
  resetTimeout: 10,
},
https://app.zingsoft.com/demos/embed/VIJMFV9H
https://app.zingsoft.com/demos/embed/VIJMFV9H

AJAX

It's common to request remote data from an endpoint. If you don't want to use the built in ZingChart methods, you can use our API setdata or setseriesvalues methods.

setdata

You can fetch the whole chart configuration and use setdata to instantiate the chart or override the current 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
    });
  })
https://app.zingsoft.com/demos/embed/3KXICENJ
https://app.zingsoft.com/demos/embed/3KXICENJ

setseriesdata/setseriesvalues

You can fetch the data for the chart and use setseriesvalues or setseriesdata to hydrate the chart later. Which method you choose depends on how much information in the series object you need/want to update.

setseriesdata

You can find more information about setseriesdata in our api docs.

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

setseriesvalues

You can find more information about setseriesvalues in our api docs.

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

Async (addplot)

Rendering plots asynchronously is easy, just the addplot method to append plots to the current chart. You can find more information about addplot in our api docs.

fetch(`https://cdn.zingchart.com/datasets/remote-data-plot1.json`)
  .then(res => res.json())
  .then(results => {
  	// Use addplot to instantiate the chart data
  	zingchart.exec('myChart', 'addplot', {
      plotindex: 1,
      data: results
    });
  })
https://app.zingsoft.com/demos/embed/KVKZC3WS
https://app.zingsoft.com/demos/embed/KVKZC3WS

Loading Screen

You can display a loading screen on the chart by adding the noData object.

noData: {
  text: 'Fetching remote data...',
  backgroundColor: '#eeeeee',
  fontSize: 18
}

Moving Forward

Some chart types use different data objects. Check out the values doc for accepted chart types data structures. You now understand basic local and remote data assignment. If you want to learn more about features in ZingChart read our where to go next.