使用多维PHP数组填充Google组合图表

Question

I have a php array with data on students. It looks like this:

array(5) {
    ["question1"]=>
        array(30) {
            ["2014, 03, 02"]=>
                array(10) {
                    ["student1"]=>
                    int(54)
                    ["student2"]=>
                    int(43)
                    ... etc. ...
                    ["median"]=>
                    string(2) "49"
}

Each day the students answers five questions with a value from 1 to 100. Each day a median value for all answers to a single question is calculated. The answers and the median value is stored like above.

Now I want to populate a Google Charts combo chart with this data but I just can't get it to work.

I would like to visualise the data with the date on the X-axis, the 1-100 value on the Y-axis and each answer as a point. The data for the median value should be displayed as a curve over the points. Points and curves for each question should have its own colour.

But I'm pretty much stuck. I can't figure out how to insert the data. I have tried this approach:

var jsonData = (<?= json_encode($data)?>);
var data = new google.visualization.arrayToDataTable(jsonData);

but I only get the following error message:

Uncaught Error: Not an array    format+da,default+da,ui+da,corechart+da.I.js:181
lda    format+da,default+da,ui+da,corechart+da.I.js:181
Gp    format+da,default+da,ui+da,corechart+da.I.js:183
drawChart    ?side=graf:4888

Answer 1

You need to change the format of your data. The Visualization API expects data in a tabular format, where your x-axis data is in the first column and each data series (a set of colored points) is its own column of data. You can either construct a json representation of a DataTable (for use with the DataTable constructor) or an array of arrays of data (for use with the arrayToDataTable function).

Since you are already using the arrayToDataTable function, this is the structure you need to have:

$data = array(
    array('Date', 'Question 1', array('type' => 'number', 'role' => 'interval', 'id' => 'Q1Median'), 'Question 2', array('type' => 'number', 'role' => 'interval', 'id' => 'Q2Median') /* repeat for other questions */),
    // format is array(date, q1 score, q1 median, q2 score, q2 median...)
    // set the median in the first row for the day, leave it null for all other rows
    array('2014, 03, 02', 54, 49, /* repeat for other questions */),
    array('2014, 03, 02', 43, null, /* repeat for other questions */),
    // repeat one row for each student for each day
);

The median values are set in an "interval" role column, which you can style to display as a curved line in the chart options:

interval: {
    // use the column ID of an interval to set the options for that interval
    Q1median: {
        style: 'line'
    },
    Q2median: {
        style: 'line'
    }
    // etc...
}

Options for styling intervals are documented here.