dude
dude

Reputation: 4972

Merge or Group two pie chart into one pie chart

JSFIDDLE

How to merge two pie chart into one pie chart using jqplot

var firstv=30;
            var secondv=40;
            var thirdv=30;
            var name1="giri";
            var name2="shiva";
            var name3="nanda";
    var data =  [[name1, firstv],[name2, secondv],[name3,thirdv]];

var plot1 = jQuery.jqplot('chart1', [data],
        {
            grid: {
                shadow: false,
                background: '#FFFFFF',                                                                                          
            },
            seriesDefaults: {
                // Make this a pie chart.
                renderer: jQuery.jqplot.PieRenderer,
                rendererOptions: {
                    showDataLabels: true,
                    padding: 20,
                    startAngle: 270
                }
            },
            legend: {
                show: true,
                location: 'e',
                fontSize: 11,
                marginTop: 10,                                
            }
        });

Upvotes: 0

Views: 496

Answers (1)

Mark
Mark

Reputation: 108567

Still not sure what you are after but taking a guess.

Given this data:

var firstv=10;
var secondv=20;
var thirdv=70;
var name1="ram";
var name2="kumar";
var name3="manju";

var data1 = [[name1, firstv],[name2, secondv],[name3,thirdv]];

and:

var firstv=30;
var secondv=40;
var thirdv=30;
var name1="giri";
var name2="shiva";
var name3="nanda";

var data2 =  [[name1, firstv],[name2, secondv],[name3,thirdv]];

Then merging the two datasets together:

  var plot2 = jQuery.jqplot('chart2', [$.merge(data,data2)], //using jquery to merge the two datasets
  {
      grid: {
          shadow: false,
          background: '#FFFFFF',                                                                                          
      },
      seriesDefaults: {
          // Make this a pie chart.
          renderer: jQuery.jqplot.PieRenderer,
          rendererOptions: {
              showDataLabels: true,
              padding: 20,
              startAngle: 270
          }
      },
      legend: {
          show: true,
          location: 'e',
          fontSize: 11,
          marginTop: 10,                                
      }
  });

Produces:

enter image description here

Upvotes: 1

Related Questions