morrisjs / morris.js

Pretty time-series line graphs
http://morrisjs.github.com/morris.js/
6.91k stars 1.23k forks source link

[Issue] Problem with Morris.Area chart with double data array #735

Open alextn opened 7 years ago

alextn commented 7 years ago

I use Morris.Area with a data array with two values (to draw two graphics on same chart) and I have a problem: the first chart is draw perfectly, but sometimes (most of the time) the second chart does not have the right values !

I took some screenshots:

screenshot 1: second chart with value = 4 but should be 1 chart_1

screenshot 2: second chart with value = 4 but should be 1 chart_2

screenshot 3: second chart with value = 3 but should be 1 chart_3

screenshot 4: second chart with value 4 but should be 3 chart_4

screenshot 5: console of data array console

And here is the code:

console.log(array_data);

var morris_line = Morris.Area({
   element: name, // ID of the element in which to draw the chart.
   data: array_data, // Chart data records -- each entry in this array corresponds to a point on the chart.
   xkey: 'time', // The name of the data record attribute that contains x-visitss.
   ykeys: ykeys, // A list of names of data record attributes that contain y-visitss.
   labels: labels, // Labels for the ykeys -- will be displayed when you hover over the chart.
});

For information I have same problem if I switch (in array_data) value1 and value2 (value1 is ok but value2 displayed is not the right one) ; but I haven't the problem with (same array_data and) Morris.Line chart.

Thanks for any advice/help !

alextn commented 7 years ago

Ok I just figured out what's going on: value2 = value1+value2

I don't know if this is supposed to be the normal behavior but personally I just wanted to use Morris.Area to have the area of the colored graphic.

Here is the exemple (from http://morrisjs.github.io/morris.js/lines.html): http://jsbin.com/otaxef/115/embed?html,js,output

theamazingd commented 6 years ago

Hi,

you should add the following option to your code: behaveLikeLine: true

I think this will solve your problem!