CODEWITHSUNDEEP
javascriptpythondatatablesgoogle-visualization
saun jean
saun jean

Reputation: 759

how to use multiple lists as a single data in the Google visualization chart api

I have two python lists

passlist1= [[1, "Saturday"], [6, "Sunday"], [12 ,"Wednesday"], [31, "Monday"], [14, "Monday"], [1, "Tuesday"], [1, "Sunday"]]
failedlist2= [[11, "Saturday"], [26, "Sunday"], [22 ,"Wednesday"], [41, "Monday"], [15, "Monday"], [16, "Tuesday"], [51, "Sunday"]]

I can plot the graph using single list by just passing list1 as a parameter but now i want to plot both lists in a single graph. This is my chart code

//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages': ['columnchart']});

//set callback
google.setOnLoadCallback (createChart);

//callback function
function createChart() {

    //create data table object
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string','Number Stats');
    dataTable.addColumn('number', passeD');
    dataTable.addColumn('string', Failed');

    dataTable.addRows(list1);

    //instantiate our chart object
    var chart = new google.visualization.ColumnChart (document.getElementById('chart'));


    //define options for visualization  
    var options = {width: 400, height: 240, is3D: true, title: 'Bar Chart'};

    //draw our chart
    chart.draw(dataTable, options);

}

I need something like a comparison chart of passlist and failedlist.

Is it possible?

Upvotes: 2

Views: 1828

Answers (1)

Mariusz Jamro
Mariusz Jamro

Reputation: 31633

Instead of adding all rows at once you can use addRow method to combine multiple arrays into one row.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

var  list1= [[1, "Saturday"], [6, "Sunday"], [12 ,"Wednesday"], [31, "Monday"], [14, "Monday"], [1, "Tuesday"], [1, "Sunday"]]
var list2= [[11, "Saturday"], [26, "Sunday"], [22 ,"Wednesday"], [41, "Monday"], [15, "Monday"], [16, "Tuesday"], [51, "Sunday"]]

//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages': ['columnchart']});

//set callback
google.setOnLoadCallback (createChart);

//callback function
function createChart() {

    //create data table object
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string','Number Stats');
    dataTable.addColumn('number', 'passed');
    dataTable.addColumn('number', 'failed');

    for(var i = 0; i < list1.length; i++){
        var row =  [ list1[i][1], list1[i][0], list2[i][0] ];
        dataTable.addRow( row );
    }

    //instantiate our chart object
    var chart = new google.visualization.ColumnChart (document.getElementById('chart'));


    //define options for visualization  
    var options = {width: 400, height: 240, is3D: true, title: 'Bar Chart'};

    //draw our chart
    chart.draw(dataTable, options);

}
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart"></div>
  </body>
</html>

Upvotes: 2

Related Questions