Fiddle for google api donought charts[
^]
A easy and best way to implement google dounought charts.
If you want to add dynamic data to the chart just make a simple ajax call inside the function drawchart like below snippet:
function drawChart() {
$.get($Url.resolve("/Work/GetDevelopersWork"), function (data1) {
if (data1.WorkIndotNet!= 0 || data1.WorkInJava!= 0 || data1.WorkInPhp!= 0) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Work');
data.addColumn('number', 'Hours');
data.addRows([
[data1.WorkIndotNet+ '/' + (data1.WorkInJava+ data1.WorkInPhp), data1.TotalWork],
[data1.WorkIndotNet+ '/' + (data1.WorkInJava+ data1.WorkInPhp)
, data1.TotalWorkForDay]
]);
var options = {
pieHole: 0.7,
colors: ['#ED462F','#F49F31', '#40ADE7'],
backgroundColor: 'transparent',
width: 200,
height: 300,
legend: { position: 'bottom-vert' },
pieSliceText: "none"
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
} else {
var data =
new google.visualization.DataTable();
data.addColumn('string', 'Work');
data.addColumn('number', 'Hours');
data.addRows([
['No Work Information', 1],
[" ", 0],
[" ", 0],
[" ", 0]
]);
var options = {
pieHole: 0.7,
colors: ['#b3b3b3', '#b3b3b3'],
backgroundColor: 'transparent',
width: 200,
height: 300,
tooltip: { trigger: 'selection' },
states: {
hover: {
enabled: false,
halo: {
enabled: false
}
}
},
legend: { position: 'bottom-vert' },
pieSliceText: "none"
};
var chart =
new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
});