Line graph containing two sets of date

Question

I am using Morris plugin to draw a line graph, but find difficulty combining two sets of data in the same graph. Here is my fiddle. It shows my first graph.

function formatDate(myDate){
    var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

    var d = new Date(myDate);

    var curr_month = d.getMonth();
    //var curr_year = d.getFullYear();
    //return (m_names[curr_month] + "-" + curr_year);
    return (m_names[curr_month]);
}

new Morris.Line({
    element: 'financial-year-sales-graph',
    data: [
        { month: '2013-07', sales: 52325 },
        { month: '2013-08', sales: 65432 },
        { month: '2013-09', sales: 52125 },
        { month: '2013-10', sales: 23265 },
        { month: '2013-11', sales: 25125 },
        { month: '2013-12', sales: 63256 },
        { month: '2014-01', sales: 52365 },
        { month: '2014-02', sales: 65954 },
        { month: '2014-03', sales: 55255 },
        { month: '2014-04', sales: 66236 },
        { month: '2014-05', sales: 52369 },
        { month: '2014-06', sales: 85214 }
    ],
    // The name of the data record attribute that contains x-values.
    xkey: 'month',
    // A list of names of data record attributes that contain y-values.
    ykeys: ['sales'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ['Sales'],
    xLabelFormat: function(str){
        return formatDate(str);
    },
    preUnits: '$'
});

http://jsfiddle.net/pz6L12wb/

I am trying to add another line to this graph. I am NOT wanting to have this kind of two lines, http://weblessons.info/2014/06/15/creating-line-chart-using-morris-js-tutorial/, which has two sets of data in the same periods of time. Instead, I want to have two sets of date, namely first set July 2013 - June 2014, second set July 2014 - June 2013, this shows the comparison of this two years.

Is it possible to achieve? Thanks

Answer 1

You need to add the other data into the data series, and then tweak the hoverLabel returned so it shows values from both series correctly for that month.

An example like so:

function formatDate(myDate){
    var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");

    var d = new Date(myDate);

    var curr_month = d.getMonth();
    //var curr_year = d.getFullYear();
    //return (m_names[curr_month] + "-" + curr_year);
    return (m_names[curr_month]);
}

function formatHoverLabel(row, preUnit) {
    var m_long_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    var d = new Date(row.month);
    var curr_month = d.getMonth();

    var salesText = "Sales for "+m_long_names[curr_month];
    a=1;
    for (i in yearsInGraph) {
        salesText = salesText + "<br/>"+yearsInGraph[i]+": "+preUnit+row['sales'+(a++)];
    }
    return salesText;
}

yearsInGraph = [2012, 2013, 2014];

new Morris.Line({
    element: 'financial-year-sales-graph',
    data: [
        { month: '2013-07', sales1: 44333, sales2: 52325, sales3: 42325 },
        { month: '2013-08', sales1: 64333, sales2: 65432, sales3: 62325 },
        { month: '2013-09', sales1: 34333, sales2: 52125, sales3: 53025 },
        { month: '2013-10', sales1: 14333, sales2: 23265, sales3: 25325 },
        { month: '2013-11', sales1: 24333, sales2: 25125, sales3: 30324 },
        { month: '2013-12', sales1: 74333, sales2: 63256, sales3: 60325 },
        { month: '2013-01', sales1: 38333, sales2: 52365, sales3: 55325 },
        { month: '2013-02', sales1: 64333, sales2: 65954, sales3: 66325 },
        { month: '2013-03', sales1: 60333, sales2: 55255, sales3: 50325 },
        { month: '2013-04', sales1: 59333, sales2: 66236, sales3: 66025 },
        { month: '2013-05', sales1: 47333, sales2: 52369, sales3: 48335 },
        { month: '2013-06', sales1: 83333, sales2: 85214, sales3: 90666 }
    ],
    // The name of the data record attribute that contains x-values.
    xkey: 'month',
    // A list of names of data record attributes that contain y-values.
    ykeys: ['sales1', 'sales2', 'sales3'],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: yearsInGraph,
    hoverCallback: function (index, options, content, row) {
         return formatHoverLabel(row, options.preUnits);
    },
    xLabelFormat: function(str){
        return formatDate(str);
    },
    preUnits: '$'
});

Produces a line chart like so:

JS Fiddle here