Search code examples
javascriptgraphtrendline

JavaScript graph trend lines(zone back color) and upside down y axis

I need a cross browser / platform two series line graph/chart. We used to have fusionchart but due to some known limitation we want to use something like jqplot.

The target is close to the attached image, except for 1 thing: the y series values should be upside down (not from 110 to -10, but from -10 to 110). I could not figure out how to do it in jqplot.

To sum up, we need:

  • two series line chart
  • y series from smallest value to largest value (no idea)
  • trend line with (zone background color), with labels like the "Severe Loss", "Moderate Loss" and "Mild Loss" on the right. (no idea)

It doesn't matter which JavaScript graph to use, as long as it can meet the above 3 requirements

sample graph

Solution

  • Sorry guys I finally figure out how by using flot.

    • two series line chart
    • y series from smallest value to largest value (with transform and inverseTransform function of yaxis)
    • trend line with (zone background color), with labels like the "Severe Loss", "Moderate Loss" and "Mild Loss" on the right. (with markings, altough there is no label for marking, but I could try to hack it)