Search code examples
dojodojox.charting

Specify the color for a Pie in Dojo Charting


I am using Dojo 1.9, using memoryStore and the store has 4 data elements, in addition to the key. For each of the 4 data elements, I need to plot a Pie-Chart. working fine but only issue is that I do not know how to specify the color.

The identifier could be one of the Following - Low, Moderate,High and Extreme. I want to use the same colors for each identifier, in all the charts. Is it possible for me to specify a color based on the value of the identifier?

The code snippet is as shown below:

   var store = new Observable(new Memory({
   data: {
   identifier: "accumulation",
   items: theData
   }

   }));


   theChart.setTheme(PrimaryColors)
    .addPlot("default", {
   type: Pie,
   font: "normal normal 11pt Tahoma",
   fontColor: "black",
   labelOffset: -30,
   radius: 80
   }).addSeries("accumulation", new StoreSeries(store, { query: {  } }, dataElement));

Solution

  • I'm possibly misunderstanding your question here (is the plot interacting directly with the store? StoreSeries?), but is the fill property what you're looking for?

    // Assuming data is an array of rows retrieved from the store
    for(var i etc...) {
        // make chart
        // ...
        chart.addSeries("things", [
            { y: data[i]["low"],  fill: "#55FF55", text: "Low" },
            { y: data[i]["mod"],  fill: "#FFFF00", text: "Moderate" },
            { y: data[i]["high"], fill: "#FFAA00", text: "High" },
            { y: data[i]["extr"], fill: "#FF2200", text: "Extreme" }
        ]);
    }
    

    Update: When using a StoreSeries, the third argument (dataElement in your code) can also be a function. You can use the function to return an object (containing the properties above, such as fill) instead of just a value.

    chart.addSeries("thingsFromStore", new StoreSeries(store, {}, function(i) { 
        return {
            y   : i[dataElement], 
            text: "Label for " + i.accumulation, 
            fill: getColorForAccumulation(i)
        };    
    }));