You must be logged in to post your query.
Home › Forums › Chart Support › Dynamic multiline chart graph with scrollbar at x axis
Tagged: canvasjs, Dynamic multiline chart, flask, Scrollbar
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.
@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
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.
@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
@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?
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.
You must be logged in to reply to this topic. Login/Register