Formatting jSON response for Highcharts

Question

I am using High Charts; specifically this example here

I am trying to set up my series and x axis data from a jSON response.

The data I am pulling is for the current year for the months. However, there are some months that don't have data. So, if i have the X-Axis hard coded and then there is a month of data missing in the jSON, all the columns will be off.

Here is an example of my jSON data :

[
    {
        "month": "6",
        "year": "2014",
        "grandTotal": "1774",
        "booksTotal": "1288",
        "tuitionTotal": "486"
    },
    {
        "month": "7",
        "year": "2014",
        "grandTotal": "1488",
        "booksTotal": "842",
        "tuitionTotal": "986"
    },
    {
        "month": "8",
        "year": "2014",
        "grandTotal": "253",
        "booksTotal": "143",
        "tuitionTotal": "110"
    }
]

As you can see, there is only 3 months of data starting with month 6(May) - The chart would be May through August.

So I need to figure out how to also get the x axis to use JSON as well and then format it in a way that it knows what months to display based on the series data.

This is my code generating the jSON response seen above.

$objDB = new DB;
$xml   = $objDB->setStoredProc('tuitionFetchStats')
            ->setParam("action", $type)
            ->execStoredProc()
            ->parseXML();

//Loop over the XML response
foreach ($xml->dataSet as $data) {

//Define the output
$grandTotal     = (string) $data->grandTotal;
$booksTotal     = (string) $data->totalBooks;
$tuitionTotal   = (string) $data->tuitionTotal;
$month          = (string) $data->reimbursementMonth;
$year           = (string) $data->reimbursementYear;

switch($type){
    case 'y2d':
        //Add the results to an array
        $stats[] = array(
            'month' => $month,
            'year' => $year,
            'grandTotal' => $grandTotal,
            'booksTotal' => $booksTotal,
            'tuitionTotal' => $tuitionTotal
        );
    break;
    default:
        //
    break;  
}

}

//Set the content type to JSON  for jquery to understand
header('Content-Type: text/javascript');

//Print the response to the page
print json_encode($stats);

I need to format my jSON in a way where i can use it to create the X Axis values as well as the series data. For example, I could loop over the "parents" in the jSON to create the categories and then I could loop over all of the values in those parents to create the data for the series.

Here is the Desired outcome from the data supplied:

 $('#yearToDate').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Projected Tuition'
        },
        subtitle: {
            text: 'Current Year'
        },
        xAxis: {
            categories: [
                'Jun',
                'Jul',
                'Aug'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Dollar Amount'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>${point.y:.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Courses',
            data: [{'486','986', '110'}]

        }, {
            name: 'Books',
            data: [{'1228', '842', '143'}]

        }, {
            name: 'Total Cost',
            data: [{'1774', '986', '110'}]

        }]
    });

I just need all of that data to by dynamic as if I there was information for September, I also need to show September on the X axis.

Answer 1

$series = array();

foreach ($xml->dataSet as $data) {   
  //Define the output
  $grandTotal     = (string) $data->grandTotal;
  $booksTotal     = (string) $data->totalBooks;
  $tuitionTotal   = (string) $data->tuitionTotal;
  $month          = (string) $data->reimbursementMonth;
  $year           = (string) $data->reimbursementYear;

  $courses['name'] = 'courses';
  $courses['data'][] = $grandTotal;

  $books['name'] = 'books';
  $books['data'][] = $booksTotal;

  $total_cost['name'] = 'Total cost';
  $total_cost['data'][] = $tuitionTotal;
  $monthAxis[] = $month;
}

print json_encode(array('series'=>$series, 'categories' =>$monthAxis));

Answer 2

Just put in null values where you want it to skip...

{
    "month": "5",
    "year": "2014",
    "grandTotal": null,
    "booksTotal": null,
    "tuitionTotal": null
},