Morris.js area graph customization

Question

i need a graph something like this can anyone help me by providing working example on fiddle ?

my current code is:

initCharts: function() {
        if (Morris.EventEmitter) {
            // Use Morris.Area instead of Morris.Line
            dashboardMainChart = Morris.Area({
                element: 'sales_statistics',
                padding: 15,
               // behaveLikeLine: false,
               gridEnabled: true,
               // gridLineColor: false,
                axes: true,
                fillOpacity: 0.3,
                data: [{
                    period: '2011 Q1',

                    profit: 0
                }, {
                    period: '2011 Q2',

                    profit: 20
                }, {
                    period: '2011 Q3',

                    profit: 50
                }, {
                    period: '2011 Q4',

                    profit: 40
                }, {
                    period: '2011 Q4',

                    profit: 60
                }],
                lineColors: ['#91C120'],
                xkey: 'period',
                ykeys: ['profit'],
                labels: ['Profit'],
                xLabels:['week'],
                pointSize: 5,
                pointFillColors: ['#FFF'],
                lineWidth: 3,
                hideHover: 'auto',
                resize: true
            });

        }
    }

the first problem is i want to use graph target element by class not id because i want to use it multiple times on a single page

second i cant find a way to place days like the image above on xLabels

third i want grids similar with the image

Answer 1

1. You can use a class instead of an id by passing morris a jQuery or DOM object. If you pass it a string, it must be an id. so you could use a class like this:

element:$('.yourClass'),

2. You can use days of the week by using the xLabelFormat option, like this:

xLabelFormat:function(x){day=x.getDay(); days=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]; return days[day];}

3. You can set the text color of the axis, and adjust the stroke width of the circles, using css

circle{ stroke-width:4 } tspan[dy]{ stroke:#91C120 }

A full demo can be viewed here: http://jsbin.com/nunusopaca/1/