php array -> json string -> javascript -> DataTable how?

[Benjamin Press]

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.

[asgallant]

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/ 

[Benjamin Press]

Nevermind. I got it sorted. Don't worry about it.

--
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 google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
     ∆
   ∆  ∆
Triforce!!!