Dynamic multiline chart graph with scrollbar at x axis

[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.

[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

[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.

[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

[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.

[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