troubleshooting Question

Problem in creating a google chart visualization of json data

Avatar of Juan Velasquez
Juan VelasquezFlag for United States of America asked on
2 Comments1 Solution263 ViewsLast Modified:
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, 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=""></script>
  <script type="text/javascript" src="gcolumn.js">
    google.charts.load("current", {packages:['corechart']});
    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);
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros