グリッド データから円グラフを描画するコードを追加しました。パラメータの名前をチャートに追加したい。どうすればこれを表すことができますか。
円グラフの面積とその面積を持つ人の数をプロットしたいと思います。チャートを取得していますが、チャートでエリア名を表すことができません。どうすればこれを達成できますか。
jsfiddle リンク: http://jsfiddle.net/rajeevprasanna/9wG3m/
//charts
plotPieChart();
function plotPieChart() {
dojo.empty("peiDiv");
// Create the chart within it's "holding" node
var pieChart = new dojox.charting.Chart2D("peiDiv");
// Set the theme
pieChart.setTheme(dojox.charting.themes.Claro);
// Add the only/default plot
pieChart.addPlot("default", {
type: "Pie",
radius: 200,
fontColor: "black",
labelOffset: 20,
labels: true
});
new dojox.charting.action2d.Tooltip(pieChart,"default");
new dojox.charting.action2d.MoveSlice(pieChart,"default");
var series = makeseries(data);
// Add the series of data
pieChart.addSeries("Area vs Employees", series);
// Render the chart!
pieChart.render();
}
function makeseries(data) {
var area_counts = {};
for (var i = 0, ii = data.items.length; i<ii; i++) {
var d = data.items[i],
area = d['Area'],
count = area_counts[area] || 0;
area_counts[area] = count + 1;
}
return Object.keys(area_counts).map(function(area) {
return {x: area, y: area_counts[area]};
});
}
var data = {
identifier: 'id',
label: 'id',
items: []
};
var data_list = [
{ "Name":"Africa", "Age": 10, "Gender":"Male", "Area" : "Java", "Experience": 1},
{ "Name":"Asia1", "Age": 45, "Gender":"Male", "Area" : "Pel", "Experience": 3},
{ "Name":"Asia2", "Age": 35, "Gender":"Male", "Area" : "Java", "Experience":2},
{ "Name":"Asia3", "Age": 23, "Gender":"Male", "Area" : "C", "Experience":1},
{ "Name":"Asia4", "Age": 78, "Gender":"Male", "Area" : "C++", "Experience":4}
];
var i, len;
for(i=0, len = data_list.length; i < len; ++i){
data.items.push(dojo.mixin({'id': i + 1 }, data_list[i % len]));
}
var layout = [
{ field: "id", datatype:"number"},
{ field: "Name", name: "Name", width: 10, editable: true, datatype:"string" },
{ field: "Age", name: "Age", width: 10, editable: true, datatype:"number" },
{ field: "Gender", name: "Gender", width: 10, editable: true, type: "dojox.grid.cells.Select", options: [ "Male", "Female"]},
{ field: "Area", name: "Area", width: 10, editable: true, datatype:"string" },
{ field: "Experience", name: "Experience", width: 10, editable: true, datatype:"number" }
];
// In case you've close the filter bar, here's a way to bring it up.
function showFilterBar(){
dijit.byId('grid').showFilterBar(true);
}