Stream Graph

Overview

JavaScript stream graph is a method of viewing data over time as a stream. The overall result is similar to a stacked area chart but the result here is displayed over time. Stream Graphs are ideal for displaying high-volume datasets, in order to discover trends and patterns over time across a wide range of categories.

Render

Stream graphs require you to put the zingchart.render method inside of the plugin callback. This will dynamically fetch the plugin and render the grid.

 // load module stream and in callback success of that
// module loading, render the chart
zingchart.loadModules('stream', function() {
  zingchart.render({ 
  	id : 'myChart', 
  	data : myConfig, 
  	height: 400, 
  	width: '100%' 
	});
});

You can load the plugin manually by importing that script module explicitly.

If you load the plugin manually you DO NOT have to use the loadModules method as a wrapper for your render function.

HTML

<script src="https://cdn.zingchart.com/modules/zingchart-stream.min.js"></script>

JavaScript

import {zingchart, ZC} from 'zingchart/es6';
// to import the stream chart module
import 'zingchart/modules-es6/zingchart-stream.min.js';

Type

ZingChart stream graphs use the type="stream" or type="vstream" attribute in your chart object to define horizontal and vertical streams.

let chartConfig = {
	type: 'stream', // vstream will present a vertical stream
  ...
};

Data

Stream graphs use the same data format as a cartesian x/y chart's. You can enter in data as single dimensional array or a two dimensional [timestamp, value] array. To enter data into the stream chart, use the series array. Each object in the series array requires a values array to function properly. More information regarding the series array is available here.

1D

A single dimensional array with values defined in the scaleX object and the series object.

"scaleX":{
	"maxItems":8,
	"transform":{
			"type":"date"
			},
	"zooming":true,
	"values":[1442905200000,1442908800000,1442912400000,1442916000000,1442919600000,1442923200000,1442926800000,1442930400000,1442934000000,1442937600000,1442941200000,1442944800000,1442948400000],
},
"series":[
	{
			"text":"All Sites",
			"values":[2596,2626,4480,6394,7488,14510,7012,3389,20281,48597,53309,52385,47097,50813,13510],
			"backgroundColor":"#E84F28",
			"lineColor":"#E84F28"
	},
]

2D

You can plot the data all within the series in a [x,y] format for the values array.

"series":[
	{
			"text":"All Sites",
			"values": [
				[1442905200000,2596],
				[1442908800000,2626],
				[1442912400000,4480],
				[1442916000000,6394]
			],
			"backgroundColor":"#E84F28",
			"lineColor":"#E84F28"
	},
]
https://app.zingsoft.com/demos/embed/W9E2O6PF
https://app.zingsoft.com/demos/embed/W9E2O6PF

Feed

Stream graphs can be hooked up to feed to stream data into the chart. This is the intended purpose for stream graphs. The object formatted you should pass to the chart should look like this:

See our docs on feeds to get a better understanding of dynamic data in ZingChart.

{
	plot0: null,  // insert a null value to create space
	plot1: 3, // first plot
	plot2: 18, // second plot
	// optional label format or unix millisecond timestamp (for both	plots)
	scaleX: 1442908800000 // or label - "13:33:48"
}
https://app.zingsoft.com/demos/embed/04P3M4GM
https://app.zingsoft.com/demos/embed/04P3M4GM

Summary

Got a question about how depth charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.