JSFiddle - React, Tailwind, and code Playground

by Rob Sedgwick

HTML

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.5.1.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>
<div id="financial-year-sales-graph"></div>

JavaScript

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...