Recent site activity

Motion Chart - JSON from URL


URL http://www.perfvision.com/json.html contains this data

google.visualization.Query.setResponse({version:'0.6',reqId:'0',status:'ok',sig:'395517504',table:
{"cols":
          [{"type":"string","label":"Fruit","pattern":null,"id":"Fruit"},
           {"type":"datetime","label":"Date","pattern":null,"id":"Date"},
           {"type":"number","label":"Sales","pattern":null,"id":"Sales"},
           {"type":"number","label":"Expenses","pattern":null,"id":"Expenses"},
           {"type":"string","label":"Region","pattern":null,"id":"Region"},
           {"type":"number","label":"population","pattern":null,"id":"population"},
          ],
     "rows":
          [{"c": [{"v":"Apples"},{"v":new Date(568015200000)},{"v":1000},{"v":1000},{"v":"good"},{"v":1000}]},
           {"c":[{"v":"Oranges"},{"v":new Date (568015200000)},{"v":950},{"v":1000},{"v":"good"},{"v":2000}]},
           {"c": [{"v":"Bananas"},{"v":new Date(568015200000)},{"v":300},{"v":1000},{"v":"bad"},{"v":3000}]},
           {"c":[{"v":"Apples"},{"v":new Date(570693600000)},{"v":1200},{"v":2000},{"v":"good"},{"v":1000}]},
           {"c":[{"v":"Bananas"},{"v":new Date(570693600000)},{"v":1400},{"v":3000},{"v":"good"},{"v":2000}]},
           {"c":[{"v":"Oranges"},{"v":new Date(570693600000)},{"v":1600},{"v":5000},{"v":"bad"},{"v":3000}]}
          ]
      }
});

and is read by this code in http://www.perfvision.com/mc6.html


<html>
  <head>
    <title>
      Cinematics
    </title>
    <style type="text/css">
      .header {
        color: purple;
        background-color: #abc;
        font-size: 40px;
        text-align: center;
      }
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {'packages':['motionchart']});
      google.setOnLoadCallback(initialize);

      function initialize() {
        var query = new google.visualization.Query(
            'http://www.perfvision.com/json.html');
        query.send(draw);
      }

      function draw(response) {
        if (response.isError()) {
          alert('Error in query')
        }
        var ticketsData = response.getDataTable();
        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
        chart.draw(ticketsData, {width: 450, height:450});
      }
    </script>
  </head>

  <body>
    <div class="header">Cinematics</div>
    <table align="center">
      <tr valign="top">
        <td style="width: 50%;">
          <div id="map_div" style="width: 400px; height: 300;"></div>
        </td>
        <td style="width: 50%;">
          <div id="table_div"></div>
        </td>
      </tr>
      <tr>
        <td colSpan=2>
          <div id="chart_div" style="align: center; width: 700px; height: 300px;"></div>
        </td>
      </tr>
    </table>
  </body>
</html>

Comments