<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
var data1 = google.visualization.arrayToDataTable([
['Date', 'Assigned','Inprogress'],
['16-Jan-17', 80, 20 ],
['17-Jan-17', 70, 20 ],
['18-Jan-17', 60, 20 ],
['19-Jan-17', 40, 20 ],
['20-Jan-17', 50, 20 ],
['21-Jan-17', 55, 20 ],
['22-Jan-17', 80, 20 ],
['23-Jan-17', 80, 20 ],
['24-Jan-17', 20, 20 ],
['25-Jan-17', 80, 20 ],
['26-Jan-17', 80, 20 ],
['27-Jan-17', 50, 20 ],
['28-Jan-17', 80, 20 ],
['29-Jan-17', 10, 20 ],
['30-Jan-17', 90, 20 ],
['31-Jan-17', 80, 20 ],
['01-Feb-17', 80, 20 ],
['02-Feb-17', 20, 20 ],
['03-Feb-17', 80, 20 ],
['04-Feb-17', 40, 20 ],
['05-Feb-17', 80, 20 ],
['06-Feb-17', 80, 20 ],
['07-Feb-17', 30, 20 ],
['08-Feb-17', 80, 20 ],
['09-Feb-17', 40, 20 ],
['10-Feb-17', 60, 20 ],
['11-Feb-17', 80, 20 ],
['12-Feb-17', 50, 20 ],
['13-Feb-17', 70, 20 ],
['14-Feb-17', 60, 20 ],
['15-Feb-17', 40, 10 ],
['16-Feb-17', 80, 20 ]
]);
var data2 = google.visualization.arrayToDataTable([
['Date', 'Resolved', 'On Hold', 'Closed'],
['16-Jan-17', 80,20,10],
['17-Jan-17', 70, 20,60 ],
['18-Jan-17', 60, 20,60 ],
['19-Jan-17', 40, 20,60 ],
['20-Jan-17', 50, 20,60 ],
['21-Jan-17', 55, 20,60 ],
['22-Jan-17', 80, 20,60 ],
['23-Jan-17', 80, 20,60 ],
['24-Jan-17', 20, 20,60 ],
['25-Jan-17', 80, 20,60 ],
['26-Jan-17', 80, 20,60 ],
['27-Jan-17', 50, 20,60 ],
['28-Jan-17', 80, 20,60 ],
['29-Jan-17', 10, 20,60 ],
['30-Jan-17', 90, 20,60 ],
['31-Jan-17', 80, 20,60 ],
['01-Feb-17', 80, 20,60 ],
['02-Feb-17', 20, 20,60 ],
['03-Feb-17', 80, 20,60 ],
['04-Feb-17', 40, 20,20 ],
['05-Feb-17', 80,10 ,30],
['06-Feb-17', 80, 20 ,60],
['07-Feb-17', 30, 20,60 ],
['08-Feb-17', 80, 20,60 ],
['09-Feb-17', 40, 20,20 ],
['10-Feb-17', 60, 20,60 ],
['11-Feb-17', 80, 20,10 ],
['12-Feb-17', 50, 20,60 ],
['13-Feb-17', 70, 20,60 ],
['14-Feb-17', 60, 20,60 ],
['15-Feb-17', 40, 10,60 ],
['16-Feb-17', 80, 20, 30 ]
]);
var data3 = google.visualization.arrayToDataTable([
['Date', 'Escalation'],
['16-Jan-17', 80],
['17-Jan-17', 70],
['18-Jan-17', 60],
['19-Jan-17', 40],
['20-Jan-17', 50],
['21-Jan-17', 55],
['22-Jan-17', 80],
['23-Jan-17', 80],
['24-Jan-17', 20],
['25-Jan-17', 80],
['26-Jan-17', 80],
['27-Jan-17', 50],
['28-Jan-17', 80],
['29-Jan-17', 10],
['30-Jan-17', 90],
['31-Jan-17', 80],
['01-Feb-17', 80],
['02-Feb-17', 20],
['03-Feb-17', 80],
['04-Feb-17', 40],
['05-Feb-17', 80],
['06-Feb-17', 80],
['07-Feb-17', 30],
['08-Feb-17', 80],
['09-Feb-17', 40],
['10-Feb-17', 60],
['11-Feb-17', 80],
['12-Feb-17', 50],
['13-Feb-17', 70],
['14-Feb-17', 60],
['15-Feb-17', 40],
['16-Feb-17', 100]
]);
var options = {
//width: 100%,
height:350,
// chartArea:{t,width:'100%',height:'100%'},
bar: {groupWidth: "55%"},
colors: ['#f1ca3a', '#ff9900'],
isStacked: true,
// chartArea:{left:0,top:0},
legend: {position: 'top', textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular,Sans-Serif", fontSize: 14}},
};
var custoptions2 = { colors: ['#00c0ef', '#3186b9', '#19d8c6'], isStacked: true, height:350, legend: {position: 'top', textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular, Sans-Serif;", fontSize: 14}}, };
var custoptions3 = { colors: ['#f9699c'], isStacked: true, height:350, legend: {position: 'top', textStyle: {color: '#444444', fontName:"Source Sans Pro", fontSize: 14}}, };
var custoptions = { isStacked: false , height:350, legend: {position: 'top', textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular, Sans-Serif;", fontSize: 14}},};
var alldata = [];
alldata.push(data1);
alldata.push(data2);
alldata.push(data3);
var alloptions = [];
alloptions.push(options);
alloptions.push(custoptions2);
alloptions.push(custoptions3);
$( ".chart-responsive" ).each(function(index, element ) {
var charted = new google.visualization.ColumnChart(element.firstElementChild);
var minus = Math.floor(index/3);
index = index-(3*minus);
// console.log( index + ": " + $( this ).text() );\
charted.draw(alldata[index], alloptions[index]);
});
// var chart1 = new google.visualization.ColumnChart(document.getElementById("columnchart_values1"));
// var chart2 = new google.visualization.ColumnChart(document.getElementById("columnchart_values2"));
// var chart3 = new google.visualization.ColumnChart(document.getElementById("columnchart_values3"));
// var chart4 = new google.visualization.ColumnChart(document.getElementById("columnchart_values4"));
// var chart5 = new google.visualization.ColumnChart(document.getElementById("columnchart_values5"));
// var chart6 = new google.visualization.ColumnChart(document.getElementById("columnchart_values6"));
// chart1.draw(data1, options);
// chart2.draw(data2, custoptions2);
// chart3.draw(data3, custoptions3);
// chart4.draw(data1, options);
// chart5.draw(data2, custoptions2);
// chart6.draw(data3, custoptions3);
}
</script>
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
var data1 = google.visualization.arrayToDataTable([
['Date', 'Assigned','Inprogress'],
['16-Jan-17', 80, 20 ],
['17-Jan-17', 70, 20 ],
['18-Jan-17', 60, 20 ],
['19-Jan-17', 40, 20 ],
['20-Jan-17', 50, 20 ],
['21-Jan-17', 55, 20 ],
['22-Jan-17', 80, 20 ],
['23-Jan-17', 80, 20 ],
['24-Jan-17', 20, 20 ],
['25-Jan-17', 80, 20 ],
['26-Jan-17', 80, 20 ],
['27-Jan-17', 50, 20 ],
['28-Jan-17', 80, 20 ],
['29-Jan-17', 10, 20 ],
['30-Jan-17', 90, 20 ],
['31-Jan-17', 80, 20 ],
['01-Feb-17', 80, 20 ],
['02-Feb-17', 20, 20 ],
['03-Feb-17', 80, 20 ],
['04-Feb-17', 40, 20 ],
['05-Feb-17', 80, 20 ],
['06-Feb-17', 80, 20 ],
['07-Feb-17', 30, 20 ],
['08-Feb-17', 80, 20 ],
['09-Feb-17', 40, 20 ],
['10-Feb-17', 60, 20 ],
['11-Feb-17', 80, 20 ],
['12-Feb-17', 50, 20 ],
['13-Feb-17', 70, 20 ],
['14-Feb-17', 60, 20 ],
['15-Feb-17', 40, 10 ],
['16-Feb-17', 80, 20 ]
]);
var data2 = google.visualization.arrayToDataTable([
['Date', 'Resolved', 'On Hold', 'Closed'],
['16-Jan-17', 80,20,10],
['17-Jan-17', 70, 20,60 ],
['18-Jan-17', 60, 20,60 ],
['19-Jan-17', 40, 20,60 ],
['20-Jan-17', 50, 20,60 ],
['21-Jan-17', 55, 20,60 ],
['22-Jan-17', 80, 20,60 ],
['23-Jan-17', 80, 20,60 ],
['24-Jan-17', 20, 20,60 ],
['25-Jan-17', 80, 20,60 ],
['26-Jan-17', 80, 20,60 ],
['27-Jan-17', 50, 20,60 ],
['28-Jan-17', 80, 20,60 ],
['29-Jan-17', 10, 20,60 ],
['30-Jan-17', 90, 20,60 ],
['31-Jan-17', 80, 20,60 ],
['01-Feb-17', 80, 20,60 ],
['02-Feb-17', 20, 20,60 ],
['03-Feb-17', 80, 20,60 ],
['04-Feb-17', 40, 20,20 ],
['05-Feb-17', 80,10 ,30],
['06-Feb-17', 80, 20 ,60],
['07-Feb-17', 30, 20,60 ],
['08-Feb-17', 80, 20,60 ],
['09-Feb-17', 40, 20,20 ],
['10-Feb-17', 60, 20,60 ],
['11-Feb-17', 80, 20,10 ],
['12-Feb-17', 50, 20,60 ],
['13-Feb-17', 70, 20,60 ],
['14-Feb-17', 60, 20,60 ],
['15-Feb-17', 40, 10,60 ],
['16-Feb-17', 80, 20, 30 ]
]);
var data3 = google.visualization.arrayToDataTable([
['Date', 'Escalation'],
['16-Jan-17', 80],
['17-Jan-17', 70],
['18-Jan-17', 60],
['19-Jan-17', 40],
['20-Jan-17', 50],
['21-Jan-17', 55],
['22-Jan-17', 80],
['23-Jan-17', 80],
['24-Jan-17', 20],
['25-Jan-17', 80],
['26-Jan-17', 80],
['27-Jan-17', 50],
['28-Jan-17', 80],
['29-Jan-17', 10],
['30-Jan-17', 90],
['31-Jan-17', 80],
['01-Feb-17', 80],
['02-Feb-17', 20],
['03-Feb-17', 80],
['04-Feb-17', 40],
['05-Feb-17', 80],
['06-Feb-17', 80],
['07-Feb-17', 30],
['08-Feb-17', 80],
['09-Feb-17', 40],
['10-Feb-17', 60],
['11-Feb-17', 80],
['12-Feb-17', 50],
['13-Feb-17', 70],
['14-Feb-17', 60],
['15-Feb-17', 40],
['16-Feb-17', 100]
]);
var options = {
//width: 100%,
height:350,
// chartArea:{t,width:'100%',height:'100%'},
bar: {groupWidth: "55%"},
colors: ['#f1ca3a', '#ff9900'],
isStacked: true,
// chartArea:{left:0,top:0},
legend: {position: 'top', textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular,Sans-Serif", fontSize: 14}},
};
var custoptions2 = { colors: ['#00c0ef', '#3186b9', '#19d8c6'], isStacked: true, height:350, legend: {position: 'top', textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular, Sans-Serif;", fontSize: 14}}, };
var custoptions3 = { colors: ['#f9699c'], isStacked: true, height:350, legend: {position: 'top', textStyle: {color: '#444444', fontName:"Source Sans Pro", fontSize: 14}}, };
var custoptions = { isStacked: false , height:350, legend: {position: 'top', textStyle: {color: '#444444', fontName:"Conv_Sansus Webissimo-Regular, Sans-Serif;", fontSize: 14}},};
var alldata = [];
alldata.push(data1);
alldata.push(data2);
alldata.push(data3);
var alloptions = [];
alloptions.push(options);
alloptions.push(custoptions2);
alloptions.push(custoptions3);
$( ".chart-responsive" ).each(function(index, element ) {
var charted = new google.visualization.ColumnChart(element.firstElementChild);
var minus = Math.floor(index/3);
index = index-(3*minus);
// console.log( index + ": " + $( this ).text() );\
charted.draw(alldata[index], alloptions[index]);
});
// var chart1 = new google.visualization.ColumnChart(document.getElementById("columnchart_values1"));
// var chart2 = new google.visualization.ColumnChart(document.getElementById("columnchart_values2"));
// var chart3 = new google.visualization.ColumnChart(document.getElementById("columnchart_values3"));
// var chart4 = new google.visualization.ColumnChart(document.getElementById("columnchart_values4"));
// var chart5 = new google.visualization.ColumnChart(document.getElementById("columnchart_values5"));
// var chart6 = new google.visualization.ColumnChart(document.getElementById("columnchart_values6"));
// chart1.draw(data1, options);
// chart2.draw(data2, custoptions2);
// chart3.draw(data3, custoptions3);
// chart4.draw(data1, options);
// chart5.draw(data2, custoptions2);
// chart6.draw(data3, custoptions3);
}
</script>
No comments:
Post a Comment