Home › forums › Using CanvasJS › Line chart with bar chart
Tagged: Line and Bar chart of same data
This topic contains 14 replies, has 3 voices, and was last updated by Vishwas R 2 months, 2 weeks ago.
Need help in Line chart and bar chart.
It would be helpful if you could brief us further about your requirements and share a JSFiddle or a pictorial representation depicting your requirements/issue you are facing so that we can understand it better to help you out.
Priyanka M S
I need bar and line on same chart, multiple point
A bar chart cannot be combined with line chart. If you are looking out to combine column and line charts, please take a look at our gallery example on combination of charts.
I have column chart with moving average? Is it possible to add another line with column without affecting moving average.
You can combine multiple dataSeries of column chart with line chart. Please take a look at documentation on multiseries chart for more info.
It would help us understand your exact scenario better if we could look at your code at our end, so I request you to create JSFiddle with your use-case and share it with us if you are facing any issue.
Dear Vishwas R,
Thank you for response, I am new to CanvasJS and I need Trendline Chart in my existing chart.
Chart should look like the link given below Trendline only.
Please advise how to do this.
You can add another dataSeries of line type with just 2 dataPoints to show trend. Please take a look at this JSFiddle.
This is what I want in my chart what you are showing in jsfiddle, I am taking data from Database and my ques are,
How should I take start and end value?
How should I calculate Y=mx + b for Trendline Calculation. I only have x Value. How do I calculate m and b value.Or is there any way to calculate trend line from database value.each time data will vary, sometimes I get 5 rows, Sometimes I get 10 row for chart. in that case how do I calculate Trendline.
I have have some code but I can’t paste here as it is long. How do I show you my code. In jsfiddle it will not work because databae is not there. Please help.
One More Question: yValue += Math.round(Math.random() * 10 – 5); What is 10 and 5 here? What we are doing in this formula. Sorry I am new to this.
You can calculate the dataPoints to the trend-line dynamically by calculating slope as explained in this stackexchange thread. Here is the updated JSFiddle.
In the JSFiddle provided in previous reply, calculateTrendLine method calculates trend-line dynamically based on dataPoints passed to chart, irrespective of source of dataPoints. Please refer this stackexchange thread for more info on calculating trend-line / Y=mx+b.
If adding calculateTrendLine method doesn’t work in your case, kindly share sample project with sample database over Google-Drive or Onedrive, so that we can look into your code, understand it better and help you out.
IS it possible to setup Skype call or Team Viewer to understand the logic and steps for Trendline chart.
You can schedule a meeting with our Sales Engineers from this page.
You must be logged in to reply to this topic.