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??
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...