Search code examples
javascriptmorris.js

Dealing with Morris Chart

so I'm trying to build a line chart using Morris Charts that will display tickets count according to ticket status among the year.

The problem is that I got a little confused about xKey and what goes there.

Image explaining what i'm trying to do enter image description here

Instead i'm getting two lines, one for status and the other for count

data

 {period: "2010-09", status: 1, count: 20}
,{period: "2010-10", status: 1, count: 50}
,{period: "2010-10", status: 2, count: 34}
,{period: "2010-11", status: 2, count: 70}

Code

Morris.Area({
            element: 'morris-area-chart'
            , data: data
            , xkey: 'period'
            , ykeys:  ['count','status']
            , labels: ['processing', 'done']
});

I know I'm messing something up but i can't find out what.

Solution

  • You should change your data like that:

     {period: "2010-09", status1Count: 20, status2Count: 12}
,{period: "2010-10", status1Count: 50, status2Count: 34}
,{period: "2010-11", status1Count: 70, status2Count: 25}

    and chart codes:

    Morris.Area({
            element: 'morris-area-chart'
            , data: data
            , xkey: 'period'
            , ykeys:  ['status1Count','status2Count']
            , labels: ['processing', 'done']
});