HTML5 & JS Spline Charts

Comments 22

1. Spline is nice but leads to unwanted bumps in some case. For instance on the second graph above, there is a bump after june when july is actuall bellow june. One would expect to have the graph maxed at june and get down smoothly to july. I guess this is due to spline standard algoritm but is there a way to parametrize this so it lookks more like september everywhere…

2. My boss made me the same comment. I guess i’ll have to work with the line chart instead to avoid questions. It’s not so visually attractive though. A parameter, if possible, would be great.

3. Sometimes line create loops or horizontal ‘S’. This make chart not understandable.
   Usually this happens when chart has many points at the beginning, nothing a center and many points at the end.
   Try following data for chart on this page:
   data: [
   {
   type: “spline”,
   indexLabelFontColor: “orangered”,
   dataPoints: [
   { x: new Date(2012, 00, 1, 12, 01), y: 1352 },
   { x: new Date(2012, 01, 1, 12, 02), y: 1514, indexLabel: “Exams” },
   { x: new Date(2012, 01, 1, 12, 03), y: 1321 },
   { x: new Date(2012, 01, 1, 12, 04), y: 1163 },
   { x: new Date(2012, 01, 1, 12, 05), y: 950 , indexLabel: “Holiday Season”},
   { x: new Date(2012, 01, 1, 12, 06), y: 1201 },
   { x: new Date(2012, 06, 1), y: 1186 },
   { x: new Date(2012, 07, 1), y: 1281, indexLabel: “New Session” },
   { x: new Date(2012, 08, 1), y: 1438 },
   { x: new Date(2012, 09, 1), y: 1305 },
   { x: new Date(2012, 10, 1), y: 1480, indexLabel: “Terms” },
   { x: new Date(2012, 11, 1), y: 1391 }
   ]
   }

   • vadim,

     Thanks for reporting the issue. We will look into the issue and get back.

   • Hi Vadim,

     The issue has been fixed and here is an internal-build. Kindly check if its working and let us know.

4. Is this possible that if i don’t have any data for a month i can skip that month name from x axis.Like if i don’t have data for Feb and Mar i don’t want to show feb and Mar on x axis.

5. Hi,
   is that possible to have the type of line : dash line ?
   i really need to have it.
   thanks.

6. Hi,
   Everything works fine except curve of chart at some points. For example below points

   window.onload = function () {
   var chart = new CanvasJS.Chart(“chartContainer”,
   {
   title: {
   text: “Sample iMu Chart Canvas JS”
   },
   creditHref : “”,
   theme :’theme1′,
   axisX:{
   title: “iMu Match %”,
   titleFontSize : 14,
   labelFontFamily :”Open Sans”,
   gridThickness:0,
   interval: 25,
   maximum: 100,
   minimum: 0,
   includeZero: true,
   suffix:”%”,
   labelFontSize : 15,
   labelAngle: -30
   },
   axisY:
   {
   lineThickness:0,
   tickThickness:0,
   valueFormatString: “”,
   labelFontSize : 0,
   labelFontColor :”white”,
   title: “”,
   titleFontSize : 0,
   gridThickness:0,
   labelFontFamily :”Open Sans”,
   maximum: 12,
   minimum: 0,
   includeZero: true,
   suffix:”%”
   },

   data: [
   {
   type: “splineArea”,
   color :’#ccffff’,
   markerSize : 0,
   mouseout: function(e){
   onMouseOut(e);
   },
   dataPoints: [{“x”:0,”y”:9,”tooltipContent”:”Matching 0% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:1,”y”:1,”tooltipContent”:”Matching 1% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:37,”y”:1,”tooltipContent”:”Matching 37% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:38,”y”:1,”tooltipContent”:”Matching 38% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:39,”y”:3,”tooltipContent”:”Matching 39% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:40,”y”:2,”tooltipContent”:”Matching 40% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:42,”y”:3,”tooltipContent”:”Matching 42% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:43,”y”:1,”tooltipContent”:”Matching 43% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:45,”y”:1,”tooltipContent”:”Matching 45% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:46,”y”:2,”tooltipContent”:”Matching 46% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:47,”y”:1,”tooltipContent”:”Matching 47% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:48,”y”:2,”tooltipContent”:”Matching 48% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:49,”y”:1,”tooltipContent”:”Matching 49% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:50,”y”:2,”tooltipContent”:”Matching 50% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:51,”y”:1,”tooltipContent”:”Matching 51% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:52,”y”:1,”tooltipContent”:”Matching 52% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:57,”y”:3,”tooltipContent”:”Matching 57% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:60,”y”:1,”tooltipContent”:”Matching 60% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:61,”y”:1,”tooltipContent”:”Matching 61% : Member 2.63157894737%”,”cursor”:”pointer”}],
   click: function(e){
   },
   }
   ]
   });

   chart.render();
   }

   for above it shows start point out of the x-axis and moved to left side.

   any idea how to solve this?

   Thanks

   • First datapoint is not out of the x-axis, it is at (0,9) but the interpolated datapoints is on negative x-axis, so the curve connecting first two points is on negative x-axis. If you change chart type to line you can see the difference. Since you are setting interval as 25, you can set minimum in AxisX to negative say -2 or -1. Which make 0% to shift to right and also negative label is not shown.

7. Hello! Tell me please) Is there function that splin is disappeare by clicking on it? Thanx!
   P.S.Sorry for my English)

   • You can use itemclick option of legend for such feature as shown here…

8. I want to make graph or curve like this. can anybody tell how can i do this.

   Image link http://imgur.com/lcF7iAC

   • Spline chart should work fine in this case. Here is a similar example. You can modify it to fit your requirement.

9. Hi,

   I have a question, sometimes the spline line goes out of the graph, this occurs when the datapoints are inside the chart, but the spline connecting line loops radically.

   An example is here:

   data: [
   {
   type: “spline”,

   dataPoints: [
   { x: new Date(2012, 00, 1), y: 0 },
   { x: new Date(2012, 01, 1), y: 1999 },
   { x: new Date(2012, 02, 1), y: 1999 },
   { x: new Date(2012, 03, 1), y: 1163 },
   { x: new Date(2012, 04, 1), y: 950 },
   { x: new Date(2012, 05, 1), y: 1201 },
   { x: new Date(2012, 06, 1), y: 1186 },
   { x: new Date(2012, 07, 1), y: 1281 },
   { x: new Date(2012, 08, 1), y: 1438 },
   { x: new Date(2012, 09, 1), y: 1305 },
   { x: new Date(2012, 10, 1), y: 1480 },
   { x: new Date(2012, 11, 1), y: 1291 }
   ]
   }

   ]

   So with that you can see it loops out the bottom.

   This problem happens with us a lot on this example also:

   data: [
   {
   type: “spline”,

   dataPoints: [
   { x: new Date(2012, 00, 1), y: 10 },
   { x: new Date(2012, 01, 1), y: 10 },
   { x: new Date(2012, 02, 1), y: 10 },
   { x: new Date(2012, 03, 1), y: 10 },
   { x: new Date(2012, 04, 1), y: 500 },
   { x: new Date(2012, 05, 1), y: 98 }
   ]
   }

   ]

   Anyone have any idea on this?

   • It has been 4 months, still no reply on this? This should be a chart basic

     • Sam,
       Thanks for reporting the bug. We actually had replied to your January’s comment in which we provided a workaround.

10. Hello,

    How can we add the Ideal line in canvas chart. is there possible to add ?

    Thanks

    • Yes, you can just use an additional series for ideal line.

11. Hi, I asked a question about the spline bar going out of the graph in some instances, no-one has responded so far, I asked on the 18th of December.

    Just wondering if anyone could have a look?

    Also, can I add padding to the graph, so if I have a spline, add some padding so the graph draws smaller, so I can insure it won’t loop out as a quick fix?

    • Sam,

      Thanks for reporting the bug. We are aware of this and our team is working on it. For now you can work-around this problem by setting maximum as shown in example

12. A simple thing.. was working and doesnt work now…

    Here is the data format I encode and send.. the chart container draws up.. but the spline doesnt come.. the values also get plotted on y axis

    [interactions] => Array
    (
    [0] => Array
    (
    [label] => Jun 19
    [y] => 132
    )

    [1] => Array
    (
    [label] => Jun 20
    [y] => 193
    )

    [2] => Array
    (
    [label] => Jun 21
    [y] => 176
    )

    [3] => Array
    (
    [label] => Jun 22
    [y] => 161
    )

    [4] => Array
    (
    [label] => Jun 23
    [y] => 153
    )

    [5] => Array
    (
    [label] => Jun 24
    [y] => 148
    )

    [6] => Array
    (
    [label] => Jun 25
    [y] => 111
    )

    • Deepankar,

      Can you please create a jsfiddle so that we can look into it and help you out?