Firstly say to all of you i am new to dojo charts. I made a dojo clustered column chart. Here i am made different series for show clustered chart. But here is my graph shows different color for different bedrooms with their respective project name. But i want my graph shows like different projects wise color with their respective bedrooms. For this problem i am facing from last 5 days but can not got any proper solutions. I searched from Stack Overflow suggestions but i am failed. So please tell me how can i show my graph with bedroom wise with different different colored projects.Here i am making a jsfiddle link[ http://jsfiddle.net/sunman/rV9g4/ ] .
Here is my code index.php
$series1 =array();
$result = array();
$Bedroom_Area=$conn->prepare("SELECT penthouse.*,projects_detail.Project_name From penthouse
left join projects_detail on penthouse.project_id=projects_detail.project_id where penthouse.project_id in (1,8,14,29,33,101)
");
$Bedroom_Area->execute();
//$i=0;
while($result_Bed=$Bedroom_Area->fetch()){
$series1[] = array('month' => $result_Bed['Project_name'],'BedRoom2'=> $result_Bed['bed_room2'],
'BedRoom3' => $result_Bed['bed_room3'],'BedRoom4' => $result_Bed['bed_room4'],
'BedRoom5' => $result_Bed['bed_room5']);
//$array1[]= array("value" => $i, "text" => $result_Bed['Project_name']);
//$i++;
}
print json_encode($series1,JSON_NUMERIC_CHECK);
var switchClustering;
require(["dojo/_base/declare", "dojo/ready", "dojo/dom", "dojox/charting/Chart",
"dojo/store/Memory", "dojox/charting/StoreSeries", "dojo/on", "dojox/gesture/tap",
"dojox/charting/themes/PlotKit/blue", "dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns", "dojox/charting/plot2d/ClusteredColumns",
"dojox/charting/plot2d/Grid", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/Highlight"],
function(declare, ready, dom, Chart, Memory, StoreSeries, on, tap, blue, Default,
StackedColumns, ClusteredColumns, Grid, Tooltip, Highlight){
var chart;
var sales = <?php echo json_encode($series1,JSON_NUMERIC_CHECK);?>;
ready(function() {
var store = new Memory({ data: sales });
var clustered = true;
var monthLabel = function(index){
if(index>12 || index<1){
return "";
}
return sales[index-1].month;
};
chart = new Chart("chart").
setTheme(blue).
addAxis("x", {title:"Project Name",
titleGap: 5,
titleFont: "bold bold bold 12pt Arial,sans-serif",
titleOrientation: "away",
dropLabels: false,
labelSizeChange: true,
rotation:-20,
majorTickStep: 1,
minorTicks: false,
labelFunc: monthLabel,
minorLabels: false}).
addAxis("y", {
vertical: true,
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 10,
max: 500,
title: "Bedroom Comparision" }).
addPlot("default", {type: ClusteredColumns,
gap: 10,
//maxBarSize: 35,
vAxis: "y",
animate: true}).
addPlot("grid", { type: "Grid",
vMajorLines: false,
vAxis: "y"}).
addSeries("data1", new StoreSeries(store, {}, function(item){
return item.BedRoom2;
}), { plot: "default",
stroke: {
color: null
},
fill: "#f7a35c"}).
addSeries("data2", new StoreSeries(store, {}, function(item){
return item.BedRoom3;
}), {plot: "default" ,
stroke: {
color: "#FFFFFF"
},
fill: "#8bbc21"}).
addSeries("data3", new StoreSeries(store, {}, function(item){
return item.BedRoom4;
}), {plot: "default" ,
stroke: {
color: null
},
fill: "#2f7ed8"}).
addSeries("data4", new StoreSeries(store, {}, function(item){
return item.BedRoom5;
}), {plot: "default",
stroke: {
color: null
},
fill: "#9966FF"});
chart.title = "Bedroom Comparision";
chart.render();
on(dom.byId("chart"), tap.doubletap, switchClustering);
});
});
Please refer above code and tell me how can got my graph bedroom wise with different different colored projects.