I can't get json data in code javascript for google chart (project Python Hello Dashboard sample)

Question

Python Hello Dashboard sample I can't run this project. This project has some problems,in file index.html: I can't get variables data type JSON (dict)for DataTable.

geodata = {{ data }} // error
geodata="{{data}}" //it is String not type JSON     

accrue cause errors line google.visualization.DataTable(geodata) Please help me!

<script type='text/javascript'>
 google.load('visualization', '1', {'packages':
   ['geochart']});
 google.setOnLoadCallback(drawMarkersMap);

 geodata = {{ data }} // error

 function drawMarkersMap() {
   if (! geodata) return;
   var data = new google.visualization.DataTable(geodata);

   var options = {
     region: 'US',
     displayMode: 'region',
     resolution: 'provinces',
     width: '800'
   };

   var chart = new google.visualization.GeoChart(
     document.getElementById('chart_div'));
   chart.draw(data, options);
};
</script>

it in this link: https://developers.google.com/bigquery/articles/dashboard#downloadinstalllibraries

Answer 1

You need to read the tutorial more thoroughly.

{{ data }} is a template placeholder , it is not itself JSON (and nowhere close to valid). Further in the tutorial the placeholder is filled in when rendering the template:

@decorator.oauth_required
def get(self):
    data = { 'data': self._bq2geo(bq.Query(QUERY, BILLING_PROJECT_ID)),
             'query': QUERY }
    template = os.path.join(os.path.dirname(__file__), 'index.html')
    self.response.out.write(render(template, data))

The data key in the data dictionary provides the value to be filled in; the self._bq2geo() method generates the JSON value:

def _bq2geo(self, bqdata):
    """geodata output for region maps must be in the format region, value.
       Assume the BigQuery query output is in this format and get names from schema.
    """
    logging.info(bqdata)
    columnNameGeo = bqdata['schema']['fields'][0]['name']
    columnNameVal = bqdata['schema']['fields'][1]['name']
    logging.info("Column Names=%s, %s" % (columnNameGeo, columnNameVal))
    geodata = { 'cols': ({'id':columnNameGeo,'label':columnNameGeo,'type':'string'},
      {'id':columnNameVal, 'label':columnNameVal, 'type':'number'})}
    geodata['rows'] = [];
    logging.info(geodata)
    for row in bqdata['rows']:
        newrow = ({'c':[]})
        newrow['c'].append({'v': 'US-'+row['f'][0]['v']})
        newrow['c'].append({'v':row['f'][1]['v']})
        geodata['rows'].append(newrow)
    logging.info('FINAL GEODATA---')
    logging.info(geodata)
    return json.dumps(geodata)

The method returns a JSON value, which replaces the {{ data }} placeholder string.