I don't know what json_parse does for you (it's not in the standard js
library), but the JSON string by itself will work if you remove the
trailing semicolon at the end (see http://jsfiddle.net/asgallant/Ytwua/).
Note that the category picker doesn't work the way you want it to - it
filters based on values in a column, not adding and removing columns. A
while back, I wrote a hack that makes it do this, however:
http://jsfiddle.net/asgallant/WaUu2/
On Tuesday, June 26, 2012 2:59:54 PM UTC-4, Benjamin Press wrote:
>
> 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/-/jemvyVtXhMQJ.
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.
