CODEWITHSUNDEEP
javascriptjqueryflot
webnoob
webnoob

Reputation: 15934

Flot chart showing negative values but it doesn't have any

I'm using this data:

{
    label: 'Payments',
    // data: this.getFlotPaymentData(),
    data: [
      [Moment().subtract(6, 'days').valueOf(), 0],
      [Moment().subtract(5, 'days').valueOf(), 0],
      [Moment().subtract(4, 'days').valueOf(), 0],
      [Moment().subtract(3, 'days').valueOf(), 0],
      [Moment().subtract(2, 'days').valueOf(), 168.50],
      [Moment().subtract(1, 'days').valueOf(), 200.00],
      [Moment().valueOf(), 200.00]
    ],
    last: false
}

and for some reason, my graph goes into negative values. I'm expecting it to be zero until 2 days ago then suddenly jump to 168.50.

I don't want to set the min value of the graph to 0 because I have another data set being introduced which goes into negative values (expenses).

It's producing this:

enter image description here

I'm initialising flot like so:

// Chart options
var chart = $('#flot-visitors')
var labelColor = chart.css('color')
var options = {
  colors: chart.data('color').split(','),
  series: {
    shadowSize: 0,
    lines: {
      show: true,
      lineWidth: false,
      fill: true
    },
    curvedLines: {
      apply: true,
      active: true,
      monotonicFit: false
    }
  },
  legend: {
    container: $('#flot-visitors-legend')
  },
  xaxis: {
    mode: 'time',
    timeformat: '%d %b',
    font: {color: labelColor}
  },
  yaxis: {
    font: {color: labelColor}
  },
  grid: {
    borderWidth: 0,
    color: labelColor,
    hoverable: true
  }
}
chart.width('100%')

// Create chart
$.plot(chart, data, options)

Upvotes: 2

Views: 668

Answers (1)

Nina Scholz
Nina Scholz

Reputation: 386560

According to Documentation, you could set

monotonicFit: true

parameter    type effect
------------ ---- -----------------------------------------------------------------
monotonicFit bool true => uses monotone cubic interpolation (preserve monotonicity)

Upvotes: 2

Related Questions