> > > How to render multiple pie charts in a single div? | Zingchart

How to render multiple pie charts in a single div? | Zingchart

Zingchart is a popular javascript charting library.It has support for  all kind of charts like pie chart, bar charts, area charts and many more. For more information you can visit the below given link:

www.zingchart.com

In this blog we will see how we can render a pie chart using zinchart library? And what to do when we need to draw multiple pie charts simultaniously?

So first we will look for how we can draw a single pie chart using Zingchart library ?

Steps for drawing pie chart!

 Before starting , we have to include zingchart-html5-min.js file in our html file.

 Now we can check what all we need to draw the chart?

  • A container <div></div> tag to draw the chart.
  • Data for the pie chart
  • A method to render the chart

Container for the Pie Chart

We need a <div></div> container with an id to draw the chart. So first we need to create a HTML file which has the div container tag.

<html>
<head>
<script type="text/javascript" src="zingchart-html5-min.js"> //Zingchart library
</head>
><body>
<div id="myChartDiv"></div> // chart container
</body>
</html>

Now we have the container <div></div> tag.Next we have to create the data for the pie charts.

Creating data for Pie Chart

Data for drawing the chart is in the form of  JSON object .

<script>

var myChartData={
 "graphset":[
 {
 "plot":{
   "value-box":{
   "text":"%v",
   "placement":"in"
 }
 },
 "type":"pie",
 "series":[
 {
 "values":[20]
 },
 {
 "values":[36]
 },
 {
 "values":[42]
 },
 {
 "values":[2]
 }
 ]
 }
 ]
};
<script>

Now we have the data to draw a single Pie Chart. So next we have to render the data inorder to get the chart. For that we will write a render function.

Rendering-Pie chart

The render function will look like as follows.

window.onload=function(){
zingchart.render({
id : "myChartDiv",
height : 450,
width : 600,
data : myChartData
});
};

In the render method we have four mandatory fields.

The  “id” field will have the id of our container div tag. height and width will specify the height and width of the chart.Data is our json object. After rendering the pie chart will look like this.

Pie Chart
Pie Chart

So this will draw a single pie chart in the given “id”. So what should we do to render multiple charts in a single div?The answer is too simple, We need to pass an arrays to the “value” key in the “series”.

Rendering multiple Pie Charts in a Div

For that, we need to pass an array of data to the series as values. Either we can use an array itself or we can put all arrays in a single object and we can pass that too.So after modification the “series” item will look like this,

 "series":[
 {
 "values":[20,25,15,30,35,45,55,40,34]
 },
 {
 "values":[30,35,45,40,10,20,15,19,26]

 },
 {
 "values":[40,10,20,10,30,20,14,21,13]
 },
 {
 "values":[10,30,20,20,25,15,16,20,27]
 }
 ]

And the myChartDiv will change like this,

Pie Chart
Pie Chart

Setting the size of Pie Chart

For setting the size of each pie that we are drawing we can use “size”key.

"type":"pie",
"size":100,
"series":[
{
"values":[20,25,15,30,35,45,55,40,34]
},
{
"values":[30,35,45,40,10,20,15,19,26]

},
{
"values":[40,10,20,10,30,20,14,21,13]
},
{
"values":[10,30,20,20,25,15,16,20,27]
}
]

 Setting rules for checking conditions

What do we do if we need to change the colour of the chart portion according to the value? or we need to hide the charts which is having a value “0” or any other condition.We need to check for the condition. For that we will set rules in zingchart.

So we will change our “series” like this,

 "series":[
 {
 "values":[20,25,15,30,35,45,55,40,60],
 "background-color":"#99CC00",
"rules":[
{
"rule":"%v > 50",
"background-color":"orange"
},
{
"rule":"%v <20",
"background-color":"#CC0066"
}
]
 },
 {
 "values":[30,35,45,40,10,20,15,19,10],
"background-color":"#FF0000",
"rules":[
"rule":"%v > 50",
"background-color":"orange"
},
{
"rule":"%v <20",
"background-color":"#CC0066"
}
]
 },
 {
 "values":[40,10,20,10,30,20,14,21,20],
"background-color":"#CFA600",
"rules":[
{
"rule":"%v > 50",
"background-color":"orange"
},
{
"rule":"%v <20",
"background-color":"#CC0066"
}
]
},
 {
 "values":[10,30,20,20,25,15,16,20,10],
"background-color":"#0066FF",
"rules":[
{
"rule":"%v > 50",
"background-color":"orange"
},
{
"rule":"%v <20",
"background-color":"#CC0066"
}
]
}
]

And the output window will look like this,

 

 

Pie Chart
Pie Chart

 

There are lot of other things that we can do in pie charts using Zingchart library. For that you can visit the Zingchart official website.

The following two tabs change content below.

Aravind Radhakrishnan

A smart working techie who is currently working as HTML 5 & Java developer, having sound knowledge in Adobe Flex and Flash. Born and brought up in Kerala. Currently working in Chennai

7 thoughts on “How to render multiple pie charts in a single div? | Zingchart

  • Pingback: Easy way for creating mirrored bar chart | Zingchart

  • October 14, 2014 at 3:10 am
    Permalink

    Thank for you covering this topic! You actually chose an interesting way to include multiple charts. Another way is to place them individually within a graphset. This is especially helpful when you want to use more than one type of chart.

    Here is the code:

    {
    "graphset":[
    {
    "type":"line",
    "series":[
    {
    "values":[69,68,54,48,70]
    },
    {
    "values":[51,53,47,60,48]
    }
    ]
    },
    {
    "type":"area",
    "series":[
    {
    "values":[69,68,54,48,70]
    },
    {
    "values":[51,53,47,60,48]
    }
    ]
    },
    {
    "type":"bar",
    "series":[
    {
    "values":[69,68,54,48,70]
    },
    {
    "values":[51,53,47,60,48]
    }
    ]
    },
    {
    "type":"hbar",
    "series":[
    {
    "values":[69,68,54,48,70]
    },
    {
    "values":[51,53,47,60,48]
    }
    ]
    }
    ]
    }

    Also you can view the resulting charts at: http://www.zingchart.com/playground/run/543c40e97ce0e

    Thanks again, and please let us know if we can provide any additional info 🙂

    Reply
  • October 16, 2015 at 1:26 pm
    Permalink

    Hello,
    Is it possible to render multiple charts in different divs in the same page?

    Reply
    • October 16, 2015 at 2:16 pm
      Permalink

      Yes, it is possible by passing multiple div id’s. The charts are getting displayed in the id’s that we are giving in the id field of zingchart render method.

      Reply
      • October 17, 2015 at 11:32 pm
        Permalink

        Somehow the same method is not working for Gauge chart.
        I am trying to create the JSON on the fly from a datatable.
        Lets say there is a column called Variation by Region [1.2,0.9,1.1]
        0.1 on both sides of 1 is OK, beyond that is ‘Red’

        Any easy way to build multiple charts without repeating the whole Json?

        This is what I am trying at the moment. As you notice, two needles appear on the same Gauge instead of two gauges

        {“graphset”:[{“type”:”gauge”,”background-color”:”#A20467″,”scale-r”:{“values”:”0:100:20″,”line-color”:”none”,”guide”:{“background-color”:”black”,”alpha”:1},”tick”:{“line-width”:3,”line-color”:”white”,”size”:14},”minor-ticks”:4,”minor-tick”:{“line-color”:”white”,”visible”:true,”size”:7,”placement”:”inner”},”item”:{“color”:”white”,”placement”:”inner”,”offset-r”:-5},”aperture”:270,”center”:{“background-color”:”#CC0000″,”size”:11},”background-color”:”black”,”ring”:{“type”:”circle”,”size”:8,”rules”:[{“rule”:”%v=40″,”background-color”:”limeGreen”,”border-width”:0},{“rule”:”%v>=60″,”background-color”:”red”,”border-width”:0}]}},
        “labels”:[{“text”:’Oct-15′,”color”:”white”,”width”:”6%”,”x”:”47%”,”y”:”76%”},{“text”:’Oct-16′,”color”:”white”,”width”:”6%”,”x”:”47%”,”y”:”76%”}]
        ,

        “series”:[{“values”:[64.5],”background-color”:”white”,”shadow”:false,”size”:50,”csize”:8},{“values”:[44.5],”background-color”:”white”,”shadow”:false,”size”:50,”csize”:8}]

        }]}

        Reply
        • October 19, 2015 at 10:10 am
          Permalink

          Whether you have seen the previous comment by Merrily.? Try by including an array of graphset velues, then you don’t have to repeat the whole json again, simply you can add one more type in the graphset.

          Reply
          • October 19, 2015 at 7:34 pm
            Permalink

            I suppose you haven’t encountered the requirement in real life.
            The problem is that the syntax for parsing values is different for the Pie/Guage vs Bar/Line etc.
            Try to load data from SQL and create JSON dynamically. The number of datapoints is not known beforehand, that is, I do not know if there are 12 Y axis values or 20
            The ‘Y’ values repeat quite nicely in Bar charts (12,34,66..) which is somewhat easy to custom script. On the other hand, the Guage chart has syntax like Series…Value(12)…
            Series… Value(34)..

            Merrily is from ZingChart team. Ideally they should have had an inbuilt function which accepts values in the same format/syntax for all chart types as an array.
            This was the problem with Amcharts as well, which is one of the reasons we stopped using that.
            Anyhow, I have ended up writing a function which takes the dataset and ‘charttype’ as variables and outputs the required JSON.
            2D table from standard sql is the most common database output. Native support to parse tabular data would have been nice. Perhaps they can include in the next version of zing js

Leave a Reply

Your email address will not be published. Required fields are marked *