jQuery Graphing Libraries : Two Y axis points corresponding to a single X axis

Question

I would like to make a graph like:

If we look at the purple line, it has two Y axis points for a sinle x axis in the same Dataseries (purple line).

How to achieve this using a jQuery charting library. I have got all the webservices ready and waiting for this. :(

Answer 1

There's nothing overly special or difficult about reproducing that graph. Here it is in highcharts:

$(function () {
    $('#container').highcharts({
        xAxis: {
            title: {
                text: 'Quantity'
            },
            min: -0.1,
            max: 16,
            tickInterval: 2,
            gridLineColor: 'transparent',
            minorGridLineColor: '#E0E0E0',
            minorTickInterval: 0.2
        },
        yAxis: {
            title: {
                text: 'Price'
            },
            min: 0,
            max: 6,
            tickInterval: 1,
            gridLineColor: 'transparent',
            minorGridLineColor: '#E0E0E0',
            minorTickInterval: 0.2
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            }
        },
        series: [{
            name: 'AD',
            data: [[0,6],[0,5],[8,4],[15,4],[15,0]],
            color: 'rgb(120,96,160)'
        }, {
            name: 'AS',
            data: [[0,0],[0,3],[10,3],[10,3.5],[15,3.5],[15,6]],
            color: 'rgb(152,184,80)'
        }]
    });
});

Fiddle here.