CODEWITHSUNDEEP
dojodojox.griddojox.charting
Rajeev
Rajeev

Reputation: 4992

Unable to plot pie chart in Dojo

I am trying to plot pie chart in dojo for a POC. I am not able to draw it. Can someone help me to figure out the issue. I googled lot but couldn't find exact issue.

I am able to draw bar chart but seeing issues with pie chart. I am storing data in dojo store and converting into series and providing to pie graph but ending up seeing nothing.

I will be so grateful if someone help me to figure out the issue.

Below is my code : 

<script>
    var geoData = {
      identifier: 'Id',
      label: 'Id',
      items: [{
        Id: '1',
        Name: 'Africa',
        Age: 10,
        Gender: 'Male',
        Area: "Java",
        Experience: 1
      }, {
        Id: '2',
        Name: 'Asia1',
        Age: 45,
        Gender: 'Male',
        Area: "C",
        Experience: 3
      }, {
        Id: '3',
        Name: 'Asia2',
        Age: 35,
        Gender: 'Male',
        Area: "Java",
        Experience: 2
      }, {
        Id: '4',
        Name: 'Asia3',
        Age: 23,
        Gender: 'Male',
        Area: "C",
        Experience: 1
      }, {
        Id: '5',
        Name: 'Asia4',
        Age: 78,
        Gender: 'Male',
        Area: "Perl",
        Experience: 4
      }]
    };

    var layoutGeo = [
      [{
        field: "Id",
        name: "Id",
        width: 10
      }, {
        field: "Name",
        name: "Name",
        width: 10,
        editable: true
      }, {
        field: "Age",
        name: "Age",
        width: 10,
        editable: true
      }, {
        field: "Gender",
        name: "Gender",
        width: 10,
        editable: true,
        type: "dojox.grid.cells.Select",
        options: ["Male", "Female"]
      }, {
        field: "Area",
        name: "Area",
        width: 10,
        editable: true
      }, {
        field: "Experience",
        name: "Experience",
        width: 10,
        editable: true
      }]
    ];

    function plotPieChart() {
      dojo.empty("peiDiv");

      // Create the chart within it's "holding" node
      var pieChart = new dojox.charting.Chart2D("peiDiv");

      // Set the theme
      pieChart.setTheme(dojox.charting.themes.Claro);

      // Add the only/default plot
      pieChart.addPlot("default", {
        type: "Pie",
        radius: 200,
        fontColor: "black",
        labelOffset: 20
      });

      var series = makeseries(geoData);

      // Add the series of data
      pieChart.addSeries("Area", series);

      // Render the chart!
      pieChart.render();
    }

    function makeseries(data) {
      return [{
        datapoints: "items",
        field: "Id",
        name: "Id"
      }, {
        datapoints: "items",
        field: "Name",
        name: "Name"
      }, {
        datapoints: "items",
        field: "Area",
        name: "Area"
      }];
    }
    </script>

  </head>
  <body class="claro">
    <div data-dojo-type="dojo/data/ItemFileWriteStore" data-dojo-props="data:geoData" data-dojo-id="geoStore" columnreordering="true"></div>
    <b>Set the population to assign to all items</b><br>
    <div id="grid" 
    data-dojo-type="dojox/grid/DataGrid"
    data-dojo-props="store:geoStore,
    structure:layoutGeo,
    query:{},
    queryOptions:{'deep':true},
    rowsPerPage:40">
  </div>
  <div display:inline-block>
    <div data-dojo-type="dijit/form/Button" data-dojo-id="Add">Add</div>
    <div data-dojo-type="dijit/form/Button" data-dojo-id="Remove">Remove</div>
  </div>
  <br>
  <div display:inline-block>
    <div id="chartDiv" style="width: 400px; height: 250px;"></div>
    <br>
    <div id="peiDiv" style="width: 400px; height: 250px;"></div>
  </div>
</body>
</html>

Upvotes: 0

Views: 383

Answers (1)

Thomas Upton
Thomas Upton

Reputation: 1899

Your makeseries function isn't returning data in the format that a pie chart can use. Take a look at the example in the documentation here. If, for example, you wanted to plot a pie chart of the ages in geoData, makeseries should be something like the following:

function makeseries(data) {
    return data.items.map(function(d) {
        return {x: d['Id'], y: d['Age']};
    });
}

Here's a jsfiddle showing that in the context of your original code. It looks like you'll also have to resize the pie chart's containing div.

Upvotes: 1

Related Questions