Show Nav

Graphset

Overview

When building charts and dashboards you may want to consider leveraging the graphset:[] functionality in ZingChart. This is a fairly unique feature which affords a few different benefits. Using graphset:[] is not required to create a chart, however it is required if you want to customize the content-menu, or use features like ZingChart’s history for drilldown charts, or shared interactions. You can also set globals:{ } for all your charts in a graphset:[].

A graphset:[] provides the ability to create an array of chart objects. This allow you to create multiple charts within a single container on your page.

Getting Started with graphset:[]

The first step of a graphset:[] is to create an object:

{
    
}

Then the graphset:[] array is nested in that object.

{ //root object
  graphset:[ //parent container for chart objects
      
  ]
};

When using the graphset:[] array you get the benefit of adding multiple chart objects into a single container.

{
  graphset:[
    {
     //chart 1
    },
    {
     //chart 2
    }
  ]
};

The root object would also hold the configuration for features like modifying your gui, content-menu or history for drilldown.

{ //root object
  gui:{
    contextMenu:{

    }
  },
  history:{
    
  },
  graphset:[
    {
      //chart 
    },
    {
      //chart 
    }
  ]
};

When using the graphset:[ ] array you get the benefit of adding multiple chart objects into a single container.

Multiple Charts

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

When using graphset:[] you can define a single container on your page and pass multiple chart objects with a single request. You also can use cool features like shared interactions or really take advantage of our media rules.

When creating multiple charts in a graphset:[] you can use all the same features in your charts as you normally would. You will however need to define the layout of your charts within the graphset:[]. ZingChart provides some simple options to handle this.

Here is a graphset:[] with 4 charts and no code to modify the layout but different shades of grey have been applied to show you how each chart object is divided by default.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Basic Chart Oranization

You can define layout:“horizontal” or layout:“vertical” outside of the graphset:[] to change how the charts are oriented.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

You can also define layout as some type of grid such as layout: “3x2”

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Dashboard Configuration

In most cases you are likely going to want to define some type of custom layout for your graphset:[ ]. Below are a few demos showing you a couple different implementations. There are 5 things you will always do with each chart when organizing a graphset:[ ]

1. Define the height of the specific chart in relation to the entire graphset container.

2. Define the width of the specific chart in relation to the entire graphset container.

3. Define the “x” position of the chart.

4. Define the “y” position of the chart.

5. Finally you will modify your plotarea:{} margins of each chart to ensure they fit correctly.

Tips

1. “x”:0 “y”:0 is the upper left corner of the chart.

2. Position charts with percentages instead of pixels to help with responsiveness. You can use media rules for fully responsive or adaptive charts.

3. Start with setting the backgroundColor of each chart to something different so you can see the spacing between charts. Then set the backgroundColor to what fits your design best at the end.

Basic Dashboard Demos

Demo 1

Demo 2

Advanced Dashboard Demo

ZingChart does support a media query like syntax. We call this media rules. This feature allows you to define unique configurations at different screen sizes. It takes a little work but if used with graphset:[] you can create a fully responsive/adaptive dashboard which fully modifies the layout based on screen size.

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