CODEWITHSUNDEEP
javascriptmorris.js
Hardik Gondalia
Hardik Gondalia

Reputation: 3717

Morris.js, line graph showing wrong data

I am creating line graph using morris.js and javascript. Here is my code:

Morris.Area({
   element: 'hero-area',
   data: [
       { day: "Thu", Reward: 0, Redeem: 0 },
       { day: "Fri", Reward: 2, Redeem: 0 },
       { day: "Sat", Reward: 1, Redeem: 0 },
       { day: "Sun", Reward: 0, Redeem: 0 },
       { day: "Mon", Reward: 0, Redeem: 0 },
       { day: "Tue", Reward: 1, Redeem: 2 },
       { day: "Wed", Reward: 0, Redeem: 0 }
   ],
   xkey: 'day',
   ykeys: ['Reward', 'Redeem'],
   labels: ['Reward', 'Redeem'],
   // later on
   parseTime: false,
   hideHover: 'auto',
   lineWidth: 1,
   pointSize: 5,
   lineColors: ['#4a8bc2', '#ff6c60'],
   fillOpacity: 0.5,
   smooth: false
});

I am passing this array to js, and I am getting this graph:

Please check tuesday graph. The value of redeem is 2 in array but in graph it is showing 3, which is wrong. Did I make any mistake?

Upvotes: 1

Views: 1115

Answers (1)

Andrey
Andrey

Reputation: 4050

There is no mistakes in your code, it is default behaviour. The areas is stacking above each other, so value is 3, because Reward + Redeem = 3. If you want them to overlay, you can use behaveLikeLine option. Set it to true and you will get what you want.

Morris.Area({
  element: 'hero-area',
  data: [{
    day: "Thu",
    Reward: 0,
    Redeem: 0
  }, {
    day: "Fri",
    Reward: 2,
    Redeem: 0
  }, {
    day: "Sat",
    Reward: 1,
    Redeem: 0
  }, {
    day: "Sun",
    Reward: 0,
    Redeem: 0
  }, {
    day: "Mon",
    Reward: 0,
    Redeem: 0
  }, {
    day: "Tue",
    Reward: 1,
    Redeem: 2
  }, {
    day: "Wed",
    Reward: 0,
    Redeem: 0
  }],
  xkey: 'day',
  ykeys: ['Reward', 'Redeem'],
  labels: ['Reward', 'Redeem'],
  // later on
  parseTime: false,
  hideHover: 'auto',
  lineWidth: 1,
  pointSize: 5,
  lineColors: ['#4a8bc2', '#ff6c60'],
  fillOpacity: 0.5,
  smooth: false,
  behaveLikeLine: true
});

Upvotes: 4

Related Questions