We help IT Professionals succeed at work.

Problem in creating a google chart visualization of json data

Juan Velasquez
Last Modified: 2018-03-20
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']});
    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>

Open in new window

Watch Question

Unlock this solution and get a sample of our free trial.
(No credit card required)


I found the problem
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.