interval: Number

Comments 30

1. Hi there,

   I’ve been experimenting with CanvasJS using dynamic data from MySQL and love it so far.

   My question however, when I set interval to 1, I only get a label for every OTHER item. I have an X axis with 30+ items and I can’t get the chart to label each and every one. Is there something I’m missing? I even tried 0 as an interval, but that did not work either.

   Thanks!
   d_man

   • Because you have 30+ items, I think labels are too crowded. Cases where labels might overlap, CanvasJS automatically skips alternate labels. In order to get all labels you can reduce the font size or set an angle to the labels.

   • I am using canvas with dynamic data. and love it so far.

     But i have a problem that the labels shows on the x axis are not static for example see the above graph on the page the labels are from 0 to 100 with the interval of 20 but if set maximum value of y to 60 then it will show labels up to 80 only. is there any way to show static values on x axis i.e. 0 ,20,40,60,80,100 in my case.

     please reply urgently

     • You can do so by setting minimum and maximum property of axisY.

2. Unfortunately it doesn’t matter what size I make the font, nor how high I make the chartContainer. Any chart over 10 items will not label each item no matter what I set the interval to. 10 items will work… 11 items will not.

   • Can you please re-create the issue in jsfiddle so that I can find out what the issue is.

3. As requested: http://jsfiddle.net/hScUy/
   You can remove one of the items ant all labels appear.

   • labelFontSize is a numeric value and hence shouldn’t be enclosed in quotes. If removed its working fine…
     http://jsfiddle.net/hScUy/4/

4. Wow… Always has to be something like that with me. Thank you very much!

5. Am having the same issue as d_man; 11 labels appear fine, add any more and only every second label appears

   • Fast_Heinz,

     Charts automatically skips label when they are too close to avoid overlapping. You can override this behaviour by setting interval to 1.

     • Thank you. This solved my problem!

6. http://jsfiddle.net/canvasjs/QwZuf/
   last value in x axis does not show correctly
   here 100 does not show correctly in x axis

   • Anik,

     100 is not being displayed because you don’t have any dataPoint at x = 100. So this is the right behaviour and we don’t see any problem.

     • sorry for my comment :)

       var chart = new CanvasJS.Chart(“chartContainer”,
       {
       title:{
       text: “Multi-Series Line Chart”
       },
       axisX:{
       gridColor: “lightblue” ,
       minimum:0,
       maximum:100,
       interval:10,
       gridThickness: 2
       },
       axisY:{
       gridColor: “lightgreen”,
       valueFormatString: “####”
       },
       legend: {
       horizontalAlign: “right”, // left, center ,right
       verticalAlign: “top”, // top, center, bottom
       },
       data: [
       {
       color:”darkgreen”,
       showInLegend: true,
       Size:18,
       type: “line”,
       markerType: “circle”,
       markerSize: 18,
       markerColor: “#4682B4”,
       dataPoints: [
       { x: 10, y: 21 },
       { x: 20, y: 25},
       { x: 30, y: 20 },
       { x: 40, y: 25 },
       { x: 50, y: 27 },
       { x: 60, y: 28 },
       { x: 70, y: 28 },
       { x: 80, y: 24 },
       { x: 90, y: 26}

       ]
       }
       ]
       });

       chart.render();

       result: https://dl.dropboxusercontent.com/u/93134095/line.PNG
       in x axis 100 is not shown correctly

       • Anik,

         We will look into this issue in future version. For now you can use labelAngle property to overcome the same.

7. Is there any way to have automatically calculated intervals appropriate for a time axis? I.e. I want intervals of 60 seconds, not 100.

   • If you use Date Time values for x, axis range/interval gets calculated according to dateTime values given. You can also override the automatically calculated values via interval and intervalType properties.

8. how to dynamic the x axis interval ?

   • May I know what you mean by dynamic interval?

     • setting the interval with a variable ..
       this is my code:

       var ti = ;

       var chart = new CanvasJS.Chart(“chartContainer”,
       {
       zoomEnabled: false,
       animationEnabled: true,
       animationDuration: 65000,
       height: $(“.bgv”).height(),
       width: $(“.bgv”).width(),
       backgroundColor: “transparent”,
       title:{
       text: “”
       },
       axisY:{
       gridColor: “transparent”,
       labelFontSize: 16,
       minimum: -100,
       maximum: 100,
       interval: 50,
       },
       axisX:{
       gridColor: “transparent”,
       labelFontSize: 8,
       minimum: 0,
       maximum:60,
       interval: ti
       },

       • var ti = 5; // for example

       • Changing “ti” dynamically will not update the interval instead, you can update the interval as shown below.

         chart.options.axisX.interval = 5;
chart.render();

9. How do you specify major axis and minor axis.. i want vertical grid lines for minor axis and major axis
   for e.g, say major axis at interval of 10 and minor axis at interval of 1

   • Are you looking for gridThickness?

     • not really. what we need to plot a ecg graph.. for e.g, as shown below

       https://www.dreamstime.com/stock-photos-close-up-ecg-graph-image5922883

       as you can see there are thin lines and thick lines (usually called major axis and minor axis in terminology). how do i get those.. also, i want to show the yaxis major and minor axis as well.

       we are ready to buy the license software.. there are couple of things like this one.. we need hash out..

       • Rajendra,

         Minor-grids and major-grids are on our roadmap. As of now, you can use stripLines to achieve the same. Check these examples. Example 1 (With axis- labels and ticks), Example 2 (Without axis-labels and ticks)

         • Thanks for the quick response. i will look into Example 2 and see if it can be altered to our needs.

           our requirement is plotting real time ECG graph and i am able to do so referencing the example https://canvasjs.com/docs/charts/how-to/creating-dynamic-charts/

           Can we have a static background image on the chart and not have grid lines.. that will work too.. let us know

10. What is the value of interval when it is not set ? How it is calculated?

    • Tejas,

      When interval is not set by user, it is calculated automatically with the help of nice-number algorithm. You can refer to getNiceNumber in source-code.