In my pageMy page I have refered the below JS files in the header:
There is a div to load the graph inside:
<div id="event-rating-1" style="width: 750px; height: 350px;"></div>
The script :
$(document).ready(function () {
//variable declaration
var jsonEventFeedback = {};
var feedbacks = [];
$.getJSON("API/Feedbacks/GetEventFeedbacks/",
function (Data) {
var questionListing = [];
for(var i=0; i<Data.length; ++i){
questionListing[i] = Data[i];
}
//Draw the google chart
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Rating', 'Participants'],
['Bad', Number(questionListing[0].CountForOne)],
['Not Bad', Number(questionListing[0].CountForTwo)],
['Ok', Number(questionListing[0].CountForThree)],
['Good', Number(questionListing[0].CountForFour)],
['Excellent', Number(questionListing[0].CountForFive)]
]);
var options = {
title: questionListing[0].Question,
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('event-rating-1'));
chart.draw(data, options);
}
});
Sample Graphs:
- jquery-1.12.4.min.js
- https://www.gstatic.com/charts/loader.js [Google Script file for graphing]
- feedbacks.js [This is my custom JS file where all the code goes]
There is a div to load the graph inside:
<div id="event-rating-1" style="width: 750px; height: 350px;"></div>
The script :
$(document).ready(function () {
//variable declaration
var jsonEventFeedback = {};
var feedbacks = [];
$.getJSON("API/Feedbacks/GetEventFeedbacks/",
function (Data) {
var questionListing = [];
for(var i=0; i<Data.length; ++i){
questionListing[i] = Data[i];
}
//Draw the google chart
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Rating', 'Participants'],
['Bad', Number(questionListing[0].CountForOne)],
['Not Bad', Number(questionListing[0].CountForTwo)],
['Ok', Number(questionListing[0].CountForThree)],
['Good', Number(questionListing[0].CountForFour)],
['Excellent', Number(questionListing[0].CountForFive)]
]);
var options = {
title: questionListing[0].Question,
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('event-rating-1'));
chart.draw(data, options);
}
});
Sample Graphs:
No comments:
Post a Comment