Hello,
I am showing here a graph between overs and runs scored by the Team in
First Innings and Second Innings:
I know the point is suppose to show the default data from x and y, but i
need to customize this and show the wickets fallen through the inning on
the line drawn in the chart.
Can this be done?
function drawChart() {
season = document.getElementById('ipl_Seasons');var jsonData = $.ajax({
url: "******************************=" + season.value,
dataType: "json",
crossDomain: true,
async: false}).responseText;
var parsed = JSON.parse(jsonData);
var arr = [];
var validation = {
isNumber: function (str) {
var pattern = new RegExp('^[0-9]+$');
return pattern.test(str); // returns a boolean
}};
for (var x in parsed) {
arr.push(parsed[x]);}
var elementById = document.getElementById('matches_Number');
if (elementById !== null && validation.isNumber(elementById.value)) {
var matchByIDandSeason = elementById.value;
var finalMatch = arr[parseInt(matchByIDandSeason) - 1];
var mapOfOversAndRunsForFirstInnings = {};
var mapOfOversAndRunsForSecondInnings = {};
var matchDetails = finalMatch.matchDetails;
var perOverRuns = 0;
for (var i = 0; i < matchDetails.length; i++) {
if (matchDetails[i].inning === 1) {
if(matchDetails[i].over in mapOfOversAndRunsForFirstInnings){
mapOfOversAndRunsForFirstInnings[matchDetails[i].over] =
parseInt(mapOfOversAndRunsForFirstInnings
[matchDetails[i].over])+matchDetails[i].total_runs;
}else {
perOverRuns = 0;
perOverRuns = matchDetails[i].total_runs + perOverRuns;
mapOfOversAndRunsForFirstInnings[matchDetails[i].over] =
perOverRuns;
}
} else {
if(matchDetails[i].over in mapOfOversAndRunsForSecondInnings){
mapOfOversAndRunsForSecondInnings[matchDetails[i].over] =
parseInt(mapOfOversAndRunsForSecondInnings
[matchDetails[i].over])+matchDetails[i].total_runs;
}else {
perOverRuns = 0;
perOverRuns = matchDetails[i].total_runs + perOverRuns;
mapOfOversAndRunsForSecondInnings[matchDetails[i].over] =
perOverRuns;
}
}
}
var dataArray = [['Overs', finalMatch.team1, finalMatch.team2]];
var firstInningRun = 0;
var secondInningRun = 0;
var chartDataForTeam1 = [];
var chartDataForTeam2 = [];
for (var overs = 1; overs <= 20; overs++) {
chartDataForTeam1.push(mapOfOversAndRunsForFirstInnings[overs]);
chartDataForTeam2.push(mapOfOversAndRunsForSecondInnings[overs]);
dataArray.push([overs, 0, 0]);
}
var materialOptions = {
chart: {
title: 'Cricket Performance'
},
width: 900,
height: 500,
hAxis: {
gridlines: {count: 10},
minValue : 1,
maxValue : 20,
title: 'Overs'
},
vAxis: {
minValue : 1,
title: 'Runs'
},
animation: { duration: 250 }
};
var data = new google.visualization.arrayToDataTable(dataArray);
var chart = new
google.visualization.ColumnChart(document.getElementById('columns_chart_div'));
var team1Index = 0;
var team2Index = 0;
var drawChart = function() {
if (team1Index < 20) {
data.setValue(team1Index, 1, chartDataForTeam1[team1Index++]);
chart.draw(data, materialOptions);
}
if(team2Index < 20){
data.setValue(team2Index, 2, chartDataForTeam2[team2Index++]);
chart.draw(data, materialOptions);
}
};
google.visualization.events.addListener(chart, 'animationfinish',
drawChart);
chart.draw(data, materialOptions);
drawChart();}
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/6b5dc55b-b31e-464b-8380-d40e17706ca6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
