Changing color on dojo charting ThreeD theme

Question

I am displaying a graph using the ThreeD theme from dojo charting. When I modify the data so I can show a different color for certain bars in the graph, I lose the 3D look.

Default color for ThreeD them is red

{y:"15",tooltip: "15 Alarms",fill: 'yellow'}

Adding 'fill: yellow' on the data item changes the bar to yellow, but I lose the 3D look.

Any ideas on the best way to change the main theme color and keep 3d look??

Answer 1

I was able to accomplish this by grabbing the code from ThreeD.js and applying it to my app:

var colors = ["#f00", "#0f0", "#00f", "#ff0", "#0ff", "#f0f", "dojox/charting/themes/common"];
var defaultFill = {type: "linear", space: "shape", x1: 0, y1: 0, x2: 100, y2: 0};
    // 3D cylinder map is calculated using dojox.gfx3d
var cyl3dMap = [
        {o: 0.00, i: 174}, {o: 0.08, i: 231}, {o: 0.18, i: 237}, {o: 0.30, i: 231},
        {o: 0.39, i: 221}, {o: 0.49, i: 206}, {o: 0.58, i: 187}, {o: 0.68, i: 165},
        {o: 0.80, i: 128}, {o: 0.90, i: 102}, {o: 1.00, i: 174}
        ];

var hiliteIndex = 2;
var hiliteIntensity = 100;
var lumStroke = 50;
var cyl3dFills = ArrayUtil.map(colors, function(c){
    var fill = lang.delegate(defaultFill);
    var colors = fill.colors = gradientGenerator.generateGradientByIntensity(c, cyl3dMap),
        hilite = colors[hiliteIndex].color;
        // add highlight
        hilite.r += hiliteIntensity;
        hilite.g += hiliteIntensity;
        hilite.b += hiliteIntensity;
        hilite.sanitize();
        return fill;
});

When I create the JSON string for the graph data, I use cyl3dFill[x] to set the color:

{y: "10", tooltip: "10 Alarms", fill: cyl3dFill[3]}  //Sets 3D Yellow fill

If fill is not added to the data record, default colors are assumed (Red). Not sure if this is a bad approach or not, but I like it....

Not sure what the next method does with the ThreeD theme, but it looks like it changes the color of the theme. Can't get the method to work...

https://dojotoolkit.org/api/dojox/charting/themes/ThreeD

Answer 2

Just create a new theme based on ThreeD, and change the colors variable with the colors you want to use. I suggest you :

• read this blog post : http://www.sitepen.com/blog/2010/07/26/dojo-chart-theming/
• Clone dojox/charting/themes/ThreeD.js into your own theme file
• Edit your new file (you should just have to modify the "colors" array at the top)
• Use your newly created theme...