Search code examples
javascriptchartspie-chartdimple.js

Creating an incomplete pie chart in Dimple.JS

I have a pie chart that needs to have a missing 10% missing slice. I have the following code but the pie is always 100%.

        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(50, 50, 180, 180);
        myChart.defaultColors = chartOptions.colors;
        myChart.data.startAngle = 0;
        myChart.data.endAngle = (2 * Math.PI * 0.9);

        myAxis = myChart.addMeasureAxis('p', 'amount');

        var mySeries = myChart.addSeries('legend', dimple.plot.pie);

How do I make the pie less than 100%? The above example needs to have the pe be 90 percent.

Solution

  • The only way I can see to hack this into dimple.js is with a fake datapoint, you hide after the draw:

    <!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
  <script data-require="[email protected]" data-semver="2.1.2" src="//cdnjs.cloudflare.com/ajax/libs/dimple/2.1.2/dimple.latest.min.js"></script>
</head>

<body>
  <script>
  
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);
  
    var data = [
      { "legend":"one", "amount": 2000 },
      { "legend":"two", "amount": 2000 * 0.10 }
    ];

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(50, 50, 180, 180);
    myAxis = myChart.addMeasureAxis('p', 'amount');
    var mySeries = myChart.addSeries('legend', dimple.plot.pie);

    myChart.draw();
    
    d3.select(".dimple-two")
      .style("display", "none");
      
  </script>
</body>

</html>