JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="hq_report_div"></div>

JavaScript

var data = [{ 
   "franchisee_name":"John Smith",
   "dish_menu":"Breakfast",
   "dish_title":"Bagels",
   "hq_price":"9.00",
   "store_price":"18.00",
   "valid_from_date":"2014-04-13",
   "valid_to_date":"9999-12-31"
 },
 {
   "franchisee_name":"Sam Jones",
   "dish_menu":"Breakfast",
   "dish_title":"Muesli",
   "hq_price":"8.00",
   "store_price":"13.00",
   "valid_from_date":"2014-04-13",
   "valid_to_date":"9999-12-31"
}];


google.load('visualization', '1.0', {'packages':['corechart','table']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    console.log(data);
   var header = ['Franchisee', 'Menu Type','Dish', 'HQ Price', 'Store Price', 'Valid From', 'Valid To'];            
   var row = "";            
   var rows = new Array();

   jQuery.each( data, function( i, d ) {
    row = [ d.franchisee_name, d.dish_menu, d.dish_title, d.hq_price, d.store_price, d.valid_from_date.toString(), d.valid_to_date.toString() ];
    rows.push(row);
   });  

   var jsonData = [header].concat(rows);
   var gdata = google.visualization.arrayToDataTable(jsonData);

   var options = {
    showRowNumber: 'false'
   };
   var chart = new google.visualization.Table(document.getElementById('hq_report_div'));
   chart.draw(gdata, options);  
}