dimple.js addColorAxis prevents legend from rendering

I'm using dimple.plot.pie to make a simple pie chart showing the relative population of different age_groups with:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
    var svg = dimple.newSvg("body", 690, 400);
    d3.csv("data.csv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(20, 20, 660, 360)
      myChart.addMeasureAxis("p", "Population");
      myChart.addColorAxis("Age_Group",["#FF0000","#00FF00"]);
      mySeries = myChart.addSeries("Age_Group", dimple.plot.pie);
      mySeries.addOrderRule([0,10,20,30,40,50,60,70,80,90,100]);
      myChart.draw();
    });
  </script>
    </body>
</html>

The above works exactly as expected if I comment out the addColorAxis line. I get a pie chart with appropriate slices, and a legend, etc.

But for my presentation I really need to specify a particular coloring for the pie slices, so I added the addColorAxis method, which works as expected, except that the legend is not showing up.

I'd like to both have a working color axis (or some way to specify the matching from color to slice) as well as a working Legend. I'm new to JavaScript.

Thanks in advance.

Solution

The colour axis doesn't work with legend - it's intended for continuous data, and it works in your case because your categorical data is numeric but it's not intended that way. To allocate particular colours for categorical data you can use the assignColor method:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js">
        </script>
    </head>
    <body>
        <script type="text/javascript">
            var svg = dimple.newSvg("body", 690, 400);
            d3.csv("data.csv", function (data) {
                var myChart = new dimple.chart(svg, data);
                myChart.setBounds(20, 20, 660, 360)
                myChart.addMeasureAxis("p", "Population");
                mySeries = myChart.addSeries("Age_Group", dimple.plot.pie);
                myChart.assignColor("0", "#FF0000")
                myChart.assignColor("10", "#E61E00")
                myChart.assignColor("20", "#CD3700")
                myChart.assignColor("30", "#B45000")
                myChart.assignColor("40", "#9B6900")
                myChart.assignColor("50", "#828200")
                myChart.assignColor("60", "#699B00")
                myChart.assignColor("70", "#50B400")
                myChart.assignColor("80", "#37CD00")
                myChart.assignColor("90", "#1EE600")
                myChart.assignColor("100", "#00FF00")
                mySeries.addOrderRule([0,10,20,30,40,50,60,70,80,90,100]);
                myChart.draw();
            });
        </script>
    </body>
</html>