Sunday, September 2, 2018

Google Graphs - 3D Pie chart

In my pageMy page I have refered the below JS files in the header:


  • 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