jquery flot draws points in 200% thought it says t

Question

I am using flot library to draw a chart. this is my code:

function LoadService2() {

    $.getJSON('http://localhost:4025/vmp_webservice.asmx/LoadService2',
      { fromDate: "2014-01-01", toDate: "2014-04-01" })
       .done(function (result) {

           var data = $.map(result, function (arr, key) {
               return { label: key, data: arr };
           });

           chartOptions = {
               xaxis: {
                   min: (new Date(2014, 01, 1)).getTime(),
                   max: (new Date(2014, 04, 2)).getTime(),
                   mode: "time",
                   tickSize: [1, "month"],
                   monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                   tickLength: 0
               },
               yaxis: {

               },
               series: {
                   stack: true,
                   lines: {
                       show: true,
                       fill: true,
                       lineWidth: 3
                   },
                   points: {
                       show: false,
                       radius: 4.5,
                       fill: true,
                       fillColor: "#ffffff",
                       lineWidth: 2.75
                   }
               },
               grid: {
                   hoverable: true,
                   clickable: false,
                   borderWidth: 0
               },
               legend: {
                   show: true
               },

               tooltip: true,
               tooltipOpts: {
                   content: '%s: %y'
               },
               colors: App.chartColors
           };



           var holder = $('#stacked-area-chart');

           if (holder.length) {
               $.plot(holder, data, chartOptions);
           }
       })
}

and this is the input data:

{
  "default": [
    [
      1390608000000.0,
      0.0
    ],
    [
      1390780800000.0,
      0.0
    ],
    [
      1391040000000.0,
      0.0
    ],
    [
      1391558400000.0,
      0.0
    ],
    [
      1392249600000.0,
      0.0
    ],
    [
      1392595200000.0,
      0.0
    ],
    [
      1392681600000.0,
      0.0
    ],
    [
      1392854400000.0,
      0.0
    ],
    [
      1393286400000.0,
      0.0
    ],
    [
      1393891200000.0,
      0.0
    ],
    [
      1394064000000.0,
      0.0
    ],
    [
      1394236800000.0,
      0.0
    ],
    [
      1394323200000.0,
      0.0
    ],
    [
      1394841600000.0,
      0.0
    ],
    [
      1394928000000.0,
      0.0
    ],
    [
      1395014400000.0,
      0.0
    ],
    [
      1395100800000.0,
      0.0
    ],
    [
      1395273600000.0,
      0.0
    ],
    [
      1395446400000.0,
      0.0
    ],
    [
      1395619200000.0,
      0.0
    ],
    [
      1395705600000.0,
      0.0
    ],
    [
      1395878400000.0,
      0.0
    ],
    [
      1396137600000.0,
      0.0
    ]
  ],
  "direct": [
    [
      1390608000000.0,
      0.0
    ],
    [
      1390780800000.0,
      0.0
    ],
    [
      1391040000000.0,
      0.0
    ],
    [
      1391558400000.0,
      0.0
    ],
    [
      1392249600000.0,
      0.0
    ],
    [
      1392595200000.0,
      0.0
    ],
    [
      1392681600000.0,
      0.0
    ],
    [
      1392854400000.0,
      0.0
    ],
    [
      1393286400000.0,
      100.0
    ],
    [
      1393891200000.0,
      0.0
    ],
    [
      1394064000000.0,
      0.0
    ],
    [
      1394236800000.0,
      0.0
    ],
    [
      1394323200000.0,
      0.0
    ],
    [
      1394841600000.0,
      0.0
    ],
    [
      1394928000000.0,
      0.0
    ],
    [
      1395014400000.0,
      0.0
    ],
    [
      1395100800000.0,
      0.0
    ],
    [
      1395273600000.0,
      0.0
    ],
    [
      1395446400000.0,
      0.0
    ],
    [
      1395619200000.0,
      0.0
    ],
    [
      1395705600000.0,
      0.0
    ],
    [
      1395878400000.0,
      0.0
    ],
    [
      1396137600000.0,
      0.0
    ]
  ],
  "Sales": [
    [
      1390608000000.0,
      100.0
    ],
    [
      1390780800000.0,
      100.0
    ],
    [
      1391040000000.0,
      100.0
    ],
    [
      1391558400000.0,
      100.0
    ],
    [
      1392249600000.0,
      100.0
    ],
    [
      1392595200000.0,
      0.0
    ],
    [
      1392681600000.0,
      75.0
    ],
    [
      1392854400000.0,
      100.0
    ],
    [
      1393286400000.0,
      100.0
    ],
    [
      1393891200000.0,
      100.0
    ],
    [
      1394064000000.0,
      0.0
    ],
    [
      1394236800000.0,
      100.0
    ],
    [
      1394323200000.0,
      0.0
    ],
    [
      1394841600000.0,
      100.0
    ],
    [
      1394928000000.0,
      66.666666
    ],
    [
      1395014400000.0,
      0.0
    ],
    [
      1395100800000.0,
      100.0
    ],
    [
      1395273600000.0,
      0.0
    ],
    [
      1395446400000.0,
      0.0
    ],
    [
      1395619200000.0,
      0.0
    ],
    [
      1395705600000.0,
      0.0
    ],
    [
      1395878400000.0,
      100.0
    ],
    [
      1396137600000.0,
      100.0
    ]
  ]
}

I got this result:

there are 200% values although the input doesn't have this value

more strange

when I hover over the charts on that point, the chart told me that the value is 100% though it draws it as 200%.

help please

when I remove the dates of the yellow bar, the charts becomes correct

how to solve that please?

Answer 1

You are stacking your graphs

...
series: {
    stack: true,
...

Try setting stack to false:

...
series: {
    stack: false,
...

It's a bit difficult to say as the documentation from flot about their options isn't perfect but this might help.