Dynamic multiline chart graph with scrollbar at x axis

• January 8, 2019 at 11:22 am #23947
  
  rajshree

  I have created a dynamic multi line chart, and added two buttons which will start and stop the graph. I want to add scrollbar on x axis which will be always update the size as charts getting update and chart should show updated values. On stop graph I want to scroll the scrollbar and should be able to see the points from start to end by scrolling scrollbar over x axis.

  January 9, 2019 at 2:25 am #23965
  
  Indranil

  @rajshree,

  You can use jQuery ScrollBar to add scrolling functionality to the chart. To sync the ScrollBar with the axis you need to update the axis viewport with the ScrollBar value as shown in the code snippet below –

  chart.options.axisX.viewportMinimum = $(".scroll-bar").slider("option", "value");
  chart.options.axisX.viewportMaximum = chart.options.axisX.viewportMinimum + viewportSize;

  Please take a look at this JSFiddle to add ScrollBar on X Axis with dynamic data.

  

  ___________
  Indranil Deo
  Team CanvasJS

  June 29, 2020 at 12:41 pm #29717
  
  sajith

  Even i am having similar requirement,I cant able to see x scroll in the jsfiddle example(i am using 14 inch screen)
  :-http://jsfiddle.net/canvasjs/082at1u5/

  Can you please share any other example or document.

  • This reply was modified 4 years, 4 months ago by sajith.
  June 30, 2020 at 7:36 pm #29737
  
  Indranil

  @sajith,

  It seems to be working fine, please refer the screenshot below.

  

  Kindly brief us further about the issue you are facing along with screenshot so that we can understand your scenario better and help you out.

  ____________
  Indranil Deo
  Team CanvasJS

  July 30, 2020 at 1:15 pm #30410
  
  sajith

  @Indranil Deo
  Thanks for the support We achieved it in our Angular project as similar to jsfiddle example.

  But our requirement is that always user want to see live graph getting plotted with out scrolling it to the right and always scroll bar should come in the right hand side(basically should follow live data getting plotted).If user want to see initial plotted data they need to scroll it to the left hand side.Can you please tel how to achieve that?

  • This reply was modified 4 years, 3 months ago by sajith.
  July 31, 2020 at 5:50 pm #30465
  
  Indranil

  @sajith,

  The above example uses jQuery ScrollBar which can be customized to position the slider handle at a specific point using its inbuilt options. Please refer jQuery docs for more information on the same.

  We have released StockChart that comes with inbuilt slider(Navigator). Please take a look at this gallery example for a dynamic chart with slider.

  

  ___________
  Indranil Deo
  Team CanvasJS