CODEWITHSUNDEEP
dojodojox.charting
patb23
patb23

Reputation: 397

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));

Upvotes: 0

Views: 191

Answers (1)

Frode
Frode

Reputation: 5710

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)
    };    
}));

Upvotes: 1

Related Questions