Dataformat

by heennkkee

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['line', 'corechart']}]}"></script>
<div id="columnchart_material"></div>
<div id="columnchart_material2"></div>

JavaScript

google.load("visualization", "1.1", {
    packages: ["corechart"]
});
var response = {columns:[{type:'date',name:'The Display'},{type:'number', name:'Views'},{type:'number',name:'Completions'}], rows:[[new Date(2015, 11, 1),3,1], [new Date(2015, 11, 2),2,5], [new Date(2015, 11, 3), 2, 5], [new Date(2015, 11, 4), 6, 2]]};

var test = {
  cols: [{label: 'Grouping Date', type: 'date'},
         {label: 'Views', type: 'number'},
         {label: 'Completions', type: 'number'}
  ],
  rows: [{c:[{v: new Date(2015, 11, 1)},
             {v: 1, f: 'One'},
             {v: 2, f:'Two'}
        ]},
         {c:[{v: new Date(2015, 11, 2)},
             {v: 3, f: 'Three'},
             {v: 5, f:'Five'}
        ]}
  ]
};
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data1 = new google.visualization.DataTable();
	
    for(x=0; x < response.columns.length; x++) {
     	data1.addColumn(response.columns[x].type, response.columns[x].name);   
    }
    for (x=0; x < response.rows.length; x++) {
        data1.addRow();
        for (y=0; y < response.rows[x].length; y++) {
     		data1.setValue(x,y,response.rows[x][y]);
        }
    }
    
    var chart = new google.visualization.AreaChart(document.getElementById('columnchart_material'));
    chart.draw(data1);
    
    
    var data2 = new google.visualization.DataTable(test);
    
    var chart2 = new google.visualization.AreaChart(document.getElementById('columnchart_material2'));
    chart2.draw(data2);
    
    
    
}