So, I'm trying to create a DataTable in a javascript file from the data I'm
pulling from a text file. I pull and parse the data in a php file, which
returns the json encoded version. This is then passed to the javascript
function, parsed with json_parse(), then passed to
google.visualization.DataTable(). I get the error "Table has no columns"
twice in the div were the table should be.
My php function build_overview_linegraph returns a properly formatted json
string. I'll include a copy of the json as an attachment.
I pass that string to the javascript function like so:
<script type="text/javascript">
alert('alarm');
var alpha = '<?php echo
build_overview_linegraph(array("Man_vs_Machine.txt","Simply_Craters.txt"));?>';
alert(alpha);
drawLineChart("overview_time-graph","time-controller", alpha);
</script>
The alert(alpha) is to show that the json is properly created.
drawLineChart looks like this:
function drawLineChart(elementID, controlID, dataIn){
google.load("visualization", "1", {packages:['controls','corechart']});
google.setOnLoadCallback(drawChart);
alert('cheese');
function drawChart() {
alert(dataIn);
// this is where I'm taking the json string and trying to make my
data table.
dataNew = json_parse(dataIn);
var data = new google.visualization.DataTable(dataNew);
var chartColors = ['red','blue','green'];
var options = {
title: 'Line Chart',
hAxis: {title: 'Date', titleTextStyle: {color: 'red'}},
height: 200,
width: 400,
colors: chartColors
};
var LinChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: elementID,
dataTable: data
});
LinChart.setOptions(options);
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': controlID,
'dataTable': data,
'options': {
'filterColumnIndex': 0,
'values': ['Man Vs Machine','Simp Craters'],
'ui': {
'label':'',
'caption':'Select to add data',
'allowTyping': false,
'allowMultiple': true,
'allowNone': false,
'selectedValuesLayout': 'belowStacked'
}
},
'state':{'selectedValues': ['Man Vs Machine','Simp
Craters']}
});
function onControlStateChange(){
var controlState = categoryPicker.getState();
var selectedCols = controlState.selectedValues;
var colorsPicked = [];
var columns = [];
columns.push(0);
for(var i = 1; i < data.getNumberOfColumns(); i++){
var current = data.getColumnLabel(i);
if(selectedCols.indexOf(current) >= 0){
columns.push(i);
colorsPicked.push(chartColors[i-1]);
}
}
LinChart.setView({'columns': columns});
LinChart.setOption('colors', colorsPicked);
LinChart.draw();
}
google.visualization.events.addListener(categoryPicker,'statechange',onControlStateChange);
LinChart.draw();
categoryPicker.draw();
}
}
Any help I could get would be absolutely amazing! At this time, I can't
figure out why the table isn't drawing.
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/v73VpZPdkpUJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
{
"cols":[
{"id":"date","label":"Date","type":"string"},
{"id":"Man_vs_Machine","label":"Man vs Machine","type":"number"},
{"id":"Simply_Craters","label":"Simply Craters","type":"number"}],
"rows":[
{"c":[{"v":"Mon, 04 Jun 2012"},{"v":54},{"v":125}]},
{"c":[{"v":"Sun, 03 Jun 2012"},{"v":7},{"v":384}]},
{"c":[{"v":"Sat, 02 Jun 2012"},{"v":70},{"v":247}]},
{"c":[{"v":"Fri, 01 Jun 2012"},{"v":77},{"v":353}]},
{"c":[{"v":"Thu, 31 May 2012"},{"v":32},{"v":387}]},
{"c":[{"v":"Wed, 30 May 2012"},{"v":249},{"v":130}]},
{"c":[{"v":"Tue, 29 May 2012"},{"v":95},{"v":393}]},
{"c":[{"v":"Mon, 28 May 2012"},{"v":61},{"v":413}]},
{"c":[{"v":"Sun, 27 May 2012"},{"v":67},{"v":659}]},
{"c":[{"v":"Sat, 26 May 2012"},{"v":31},{"v":194}]},
{"c":[{"v":"Fri, 25 May 2012"},{"v":123},{"v":141}]},
{"c":[{"v":"Thu, 24 May 2012"},{"v":53},{"v":271}]},
{"c":[{"v":"Wed, 23 May 2012"},{"v":20},{"v":253}]},
{"c":[{"v":"Tue, 22 May 2012"},{"v":81},{"v":319}]},
{"c":[{"v":"Mon, 21 May 2012"},{"v":118},{"v":432}]},
{"c":[{"v":"Sun, 20 May 2012"},{"v":78},{"v":710}]},
{"c":[{"v":"Sat, 19 May 2012"},{"v":146},{"v":610}]},
{"c":[{"v":"Fri, 18 May 2012"},{"v":144},{"v":673}]},
{"c":[{"v":"Thu, 17 May 2012"},{"v":343},{"v":686}]},
{"c":[{"v":"Wed, 16 May 2012"},{"v":102},{"v":811}]},
{"c":[{"v":"Tue, 15 May 2012"},{"v":127},{"v":1146}]},
{"c":[{"v":"Mon, 14 May 2012"},{"v":233},{"v":264}]},
{"c":[{"v":"Sun, 13 May 2012"},{"v":108},{"v":252}]},
{"c":[{"v":"Sat, 12 May 2012"},{"v":321},{"v":462}]},
{"c":[{"v":"Fri, 11 May 2012"},{"v":433},{"v":811}]},
{"c":[{"v":"Thu, 10 May 2012"},{"v":461},{"v":811}]},
{"c":[{"v":"Wed, 09 May 2012"},{"v":224},{"v":922}]},
{"c":[{"v":"Tue, 08 May 2012"},{"v":449},{"v":674}]},
{"c":[{"v":"Mon, 07 May 2012"},{"v":874},{"v":802}]},
{"c":[{"v":"Sun, 06 May 2012"},{"v":1159},{"v":2071}]},
{"c":[{"v":"Sat, 05 May 2012"},{"v":437},{"v":1576}]},
{"c":[{"v":"Fri, 04 May 2012"},{"v":1232},{"v":2533}]},
{"c":[{"v":"Thu, 03 May 2012"},{"v":671},{"v":1636}]},
{"c":[{"v":"Wed, 02 May 2012"},{"v":648},{"v":1656}]},
{"c":[{"v":"Tue, 01 May 2012"},{"v":1395},{"v":3182}]},
{"c":[{"v":"Mon, 30 Apr 2012"},{"v":1186},{"v":2392}]},
{"c":[{"v":"Sun, 29 Apr 2012"},{"v":98},{"v":965}]},
{"c":[{"v":"Sat, 28 Apr 2012"},{"v":133},{"v":255}]},
{"c":[{"v":"Fri, 27 Apr 2012"},{"v":105},{"v":932}]},
{"c":[{"v":"Thu, 26 Apr 2012"},{"v":64},{"v":593}]},
{"c":[{"v":"Wed, 25 Apr 2012"},{"v":91},{"v":690}]},
{"c":[{"v":"Tue, 24 Apr 2012"},{"v":71},{"v":1116}]},
{"c":[{"v":"Mon, 23 Apr 2012"},{"v":157},{"v":615}]},
{"c":[{"v":"Sun, 22 Apr 2012"},{"v":575},{"v":1239}]},
{"c":[{"v":"Sat, 21 Apr 2012"},{"v":46},{"v":177}]},
{"c":[{"v":"Fri, 20 Apr 2012"},{"v":5},{"v":538}]},
{"c":[{"v":"Thu, 19 Apr 2012"},{"v":1},{"v":98}]},
{"c":[{"v":"Tue, 17 Apr 2012"},{"v":7},{"v":25}]},
{"c":[{"v":"Mon, 16 Apr 2012"},{"v":58},{"v":115}]},
{"c":[{"v":"Sun, 15 Apr 2012"},{"v":121},{"v":12}]},
{"c":[{"v":"Sat, 14 Apr 2012"},{"v":31},{"v":1}]},
{"c":[{"v":"Fri, 13 Apr 2012"},{"v":1},{"v":31}]},
{"c":[{"v":"Thu, 12 Apr 2012"},{"v":34},{"v":13}]},
{"c":[{"v":"Tue, 10 Apr 2012"},{"v":1},{"v":30}]},
{"c":[{"v":"Mon, 09 Apr 2012"},{"v":25},{"v":25}]},
{"c":[{"v":"Sun, 08 Apr 2012"},{"v":14},{"v":54}]},
{"c":[{"v":"Sat, 07 Apr 2012"},{"v":30},{"v":19}]},
{"c":[{"v":"Fri, 06 Apr 2012"},{"v":1},{"v":15}]},
{"c":[{"v":"Thu, 05 Apr 2012"},{"v":1},{"v":35}]},
{"c":[{"v":"Tue, 03 Apr 2012"},{"v":5},{"v":37}]},
{"c":[{"v":"Mon, 02 Apr 2012"},{"v":4},{"v":76}]},
{"c":[{"v":"Sun, 01 Apr 2012"},{"v":3},{"v":36}]},
{"c":[{"v":"Sat, 31 Mar 2012"},{"v":30},{"v":139}]},
{"c":[{"v":"Fri, 30 Mar 2012"},{"v":1},{"v":45}]},
{"c":[{"v":"Thu, 29 Mar 2012"},{"v":9},{"v":218}]},
{"c":[{"v":"Wed, 28 Mar 2012"},{"v":186},{"v":108}]},
{"c":[{"v":"Tue, 27 Mar 2012"},{"v":17},{"v":59}]},
{"c":[{"v":"Mon, 26 Mar 2012"},{"v":24},{"v":45}]},
{"c":[{"v":"Sun, 25 Mar 2012"},{"v":17},{"v":31}]},
{"c":[{"v":"Sat, 24 Mar 2012"},{"v":118},{"v":90}]},
{"c":[{"v":"Fri, 23 Mar 2012"},{"v":13},{"v":163}]},
{"c":[{"v":"Thu, 22 Mar 2012"},{"v":51},{"v":189}]},
{"c":[{"v":"Wed, 21 Mar 2012"},{"v":108},{"v":163}]},
{"c":[{"v":"Tue, 20 Mar 2012"},{"v":73},{"v":263}]},
{"c":[{"v":"Wed, 18 Apr 2012"},{"v":0},{"v":64}]},
{"c":[{"v":"Wed, 11 Apr 2012"},{"v":0},{"v":11}]},
{"c":[{"v":"Wed, 04 Apr 2012"},{"v":0},{"v":72}]}
]
};
