Highcharts different x-axis values

Question

I am creating a student progress chart which takes test result of different subjects from database and outputs as a line chart. I have set x-axis as date of the test and y-axis for the test percentage. Problem is I can only display dates from one subject. For example I have a chart with test results from computer and English. These tests occur on different dates and I don't know how to display them properly. Here is my PHP code where I query database and convert results into JSON format.

$query = "SELECT date, (achieved / total) * 100 AS Marks FROM res_com
ORDER BY date";

$result = mysqli_query($db_connection, $query);

$date_com['name'] = 'Date';
$marks_com['name'] = 'Computer';
while ($r1 = mysqli_fetch_array($result)) {
$date_com['data'][] = $r1['date'];
$marks_com['data'][] = $r1['Marks'];
}

$query = "SELECT date, (achieved / total) * 100 AS Marks FROM res_isl
ORDER BY date";

$result = mysqli_query($db_connection, $query);

$date_eng['name'] = 'Date';
$marks_eng['name'] = 'English';
while ($r2 = mysqli_fetch_array($result)) {
$date_eng['data'][] = $r2['date'];
$marks_eng['data'][] = $r2['Marks'];
}

$rslt = array();
array_push($rslt, $date_com);
array_push($rslt, $marks_com);
array_push($rslt, $date_eng);
array_push($rslt, $marks_eng);
print json_encode($rslt, JSON_NUMERIC_CHECK);

Here is JavaScript snippet for taking JSON data to render charts.

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        title: {
            text: 'That High School',
            x: -20 //center
        },
        subtitle: {
            text: 'Test Results',
            x: -20
        },
        xAxis: {
            categories: [],
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Marks'
            },
            plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
        },
        tooltip: {
            valueSuffix: '%'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: []
    };
    $.getJSON("data/data-basic-colm.php", function(json) {
        options.xAxis.categories = json[0]['data'];
        //xAxis: {categories: []}
        options.series[0] = json[1];
        options.series[1] = json[3];
        chart = new Highcharts.Chart(options);
    });
});

Here is the output:

https://i.stack.imgur.com/GCfE9.jpg

The problem is I can't represent dates from both subjects I can only show dates from computer tests with this:

options.xAxis.categories = json[0]['data'];

Or from English tests with this:

options.xAxis.categories = json[2]['data'];

How can I show dates from both?

Answer 1

you can apply opposite: Boolean for categories in xAxis and have your back end data as

Fiddle demo

options.xAxis = [{
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}, {
  opposite: true,
  categories: ['Jan1', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}];
options.series[0] = {
  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
};
options.series[1] = {
  xAxis: 1,
  data: [39.9, 61.5, 56.4, 5.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
};
chart = new Highcharts.Chart(options);

So finally it will be

$.getJSON("data/data-basic-colm.php", function(json) {
            options.xAxis = //json['processed_categories_as_above']  through back end; 

            options.series[0] = //json['processed_series_data_as_above'] through back end; 
            options.series[1] = //json['processed_series_data_as_above'] through back end; 
            chart = new Highcharts.Chart(options);
        });