Avatar of Juan Velasquez
Juan Velasquez
Flag for United States of America

asked on 

Problem in creating a google chart visualization of json data

Hello,
I've just started learning python on my own and I am having trouble with creating a visualization of json data.  Basically, I am pulling data from the Kepler mission which consists of confirmed planetary systems.  For example, When I run the program, I generate a file called gcolumn.js which contains the following data. The first column contains the kepler designation of the host star while the second column contains the number of confirmed planets that are orbiting it.
['Kepler-102 ',5]
['Kepler-11 ',6]
['Kepler-122 ',5]
['Kepler-292 ',5]
['Kepler-296 ',5]
['Kepler-33 ',5]
['Kepler-444 ',5]
['Kepler-62 ',5]
['Kepler-80 ',5]
['Kepler-90 ',6]

What I want to do is create a google column chart with the kepler designations on the x axis and the number of planets orbiting a star on the Y axis.  I chose this in order to start with something simple. I've gone ahead and modified the code from google charts so that it would pull the data for gcolumn.js (that is the data from above.  Below I have pasted a copy of htm file that contains the visualization code. When I run gcolumn.py, it generate gcolumn.js which is then accessed by gcolumn.htm which is shown below. However when I run everything, the column chart does not appear.  Thanks
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="gcolumn.js">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'KeplerName');
      data.addColumn('number', 'count');
      for(i = 0; i < data.length; i++)
      data.addRow([KeplerName[i], count[i]]);

      var options = {
        title: "Confirmed Kepler Planets by Star System",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Open in new window

PythonJSON

Avatar of undefined
Last Comment
Juan Velasquez

8/22/2022 - Mon