score:-7
Perhaps think of using Google Charts, instead of Chart.js. Google Charts includes Trendlines - including Linear, Exponential, and Polynomial.
Documentation here: Google Charts Trendlines
score:2
Update your chart definition by adding an empty dataset:
{
label: "Trend 1",
borderColor: 'rgba(200,0,0)',
backgroundColor: 'rgba(200,0,0)',
data: [],
fill: false,
}
Right after your chart definition (in the jsfiddle) add these lines:
arrayForRegression= []; // Declare the array which will contains calculated point of trend line
for (i=0; i < ChartVisits.data.datasets[0].data.length; i++) {
arrayForRegression.push([i, ChartVisits.data.datasets[0].data[i]]); // Fill the array with the "y" values to be approximated by regression
}
regr = regression("polynomial", arrayForRegression, 2); // Calculare polynomial regression
convertedRegressionArray = []; // Declare an array to hold the regression line in charts.js format
for (i=0; i < ChartVisits.data.datasets[0].data.length; i++) { // Fill the array with calculated values
convertedRegressionArray.push(regr.points[i][1]);
}
ChartVisits.config.data.datasets[2].data = convertedRegressionArray; // Put the regression array, converted to charts format, into chart
ChartVisits.update();
In your HTML, add this line IN BODY SECTION to include the library:
<script type="text/javascript" src="js/regression.min.js"></script>
Library from:
https://bl.ocks.org/daluu/5bb59ef3f3fed3de227535da367649ba
https://gist.github.com/daluu/5bb59ef3f3fed3de227535da367649ba
The code of the function is obfuscated/minified, anyway the call syntax is:
var linReg = regression('linear', data);
var polyReg = regression('polynomial', data, 2);
var expoReg = regression('exponential', data);
var powReg = regression('power', data);
var logReg = regression('logarithmic', data);
Data format:
var data = [[500,2.5], [1000,3], [1500,3], [2000,3.3], [3000,3.6], [4000,4], [5500,4.8], [6000,5], [7000,5], [8000,5.5], [9000,6], [12000,7], [14000,8], [15000,8], [18000,9], [20000,10], [21000,10], [24000,11], [28000,12], [30000,13], [50000,18]];
But I don't know exactly how to implement it in charts.js or any other library.
This discovery led me to look for "javascript regression.min.js" , finding many resources.
NOTE: there is an error in index.html:
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
should be:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
NOTE2:
I think there is a major bug in linear regression part: the returned equation object (an array of coefficients) is in reversed order w.r.t polynomial format.
Examples:
3x^2+2x+1 is returned as array [1, 2, 3] , so each coefficient must be multiplied by Math.pow(x, array position):
y = equation[0] * Math.pow(x,0) + equation[1] * Math.pow(x,1) + equation[1] * Math.pow(x,1) ** correct **
2x + 1 should be returned as array [1,2] but it is returned as [2,1] --> bug?
y = equation[0] * Math.pow(x,1) + equation[1] * Math.pow(x,0)
score:5
Currently, chart.js does not have a trendline capability at all (not even logarithmic). Perhaps you were getting confused with the custom tick format example at the end of the Common Scale Configuration section?
You could however use the chartjs-plugin-annotation plugin to draw a trendline on your chart, but keep in mind that you would have to implement your own logic to calculate the correct location of the line (and then just use the annotation plugin to actually draw it).
Here is an example demonstrating how to use the plugin (the plugin provides a set of annotation
properties that you can add to your charts options
. You would then just need to create a function that calculates the trendline and use the result to set the annotation value
and endValue
properties.
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
datasets: [{
label: 'Dataset 1',
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Drsw Line on Chart'
},
tooltips: {
mode: 'index',
intersect: true
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 2225,
endValue: 0,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 4,
label: {
enabled: true,
content: 'Trendline',
yAdjust: -16,
}
}]
}
}
});
You can see it in action at this codepen.
score:12
The chartjs-plugin-trendline
provides a straight-line trendline that plugs into Chart.js.
NPM: https://www.npmjs.com/package/chartjs-plugin-trendline/v/0.1.1
Download: https://www.jsdelivr.com/package/npm/chartjs-plugin-trendline
Usage is pretty straightforward - just add the following to your dataset:
datasets: [{
// Other configurations
// ...
trendlineLinear: {
style: "rgb(43 ,66 ,255, 0.3)",
lineStyle: "dotted|solid",
width: 2
}
}]
Source: stackoverflow.com
Related Query
- Adding trendlines to existing chart Chart.js
- Chart.js, adding footer to chart
- Adding Chart.js line chart to Jinja2/Flask html page from JS file
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- Extending Existing Chart Types angular chart js using chart js 2.0
- Adding custom text to Bar Chart label values using Chart.js
- chartjs Adding percentages to Pie Chart Legend
- Adding line over stacked line chart with ChartJS
- Charts.js: Load new data set to an existing chart
- Adding object data to data structure of chart.js chart does not show any data
- ChartJS chart not scaling after adding values
- Adding data to line chart using addData() method in Chart.js
- ChartJS 2 - Adding data to chart breaks after X number of items added
- Adding additional properties to a Chart JS dataset
- Append second dataset to existing chartjs chart
- Need help adding Chart.js chart to a Modal window (I'm Using AngularJS)
- what is wrong with my code ? java script chart position
- How to print a chart rendered by code
- ChartJS chart is bugged after adding new data
- Adding image on chart js
- Adding label inside multiseries doughnut chart through chart.js
- VueJS + Chartjs - Chart only renders after code change
- Adding responsive text inside chart in Charts Js
- How do I destroy/update Chart Data in this chart.js code example?
- Trigger axispointer function on existing chart js via console
- Chart js adding number
- Adding new data to empty Chart.js chart does not render new data correctly
- getting additional value fields from data source for dx.chartjs doughnut chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How can I add new data points to an existing chart with chart.js?
More Query from same tag
- Passing data from a controller to ChartJS - Laravel
- Can I make a horizontal bar chart with two category axes?
- Where is the appropriate place to instantiate a javascript widget/chart/utility when using angular.js?
- Gradient color for each bar in a bar graph using ChartJS
- VueJS TypeScript using ChartJS - Parsing error: '}' expected
- ChartJS - Show values in the center of each bar
- Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined
- Change Chartjs label color on click without losing hover
- Chartjs with JSP
- How to import Chart.js with Webpack
- How to change colours for Angular-Chart.js
- Should I remove the leading "0" when sending PHP array to JSON?
- add info for points in line chart (js)
- Chartjs line graph goes over panel
- How to load data values from cookie into Chart.js
- Cannot create Chart using Chart.JS @ 2.9.4
- Leaflet polygon display charts after click
- how to display chart data as html table chartjs
- Change background color of all charts beside the one hovered
- TypeError Not reading property correctly
- Chart js 2 bars with one customize label on top
- Invalid Date moment.js using Iso yyyy-MM-dd HH:mm:ss
- Chart JS Fill Between two lines
- remove undefined label in the upper part of a chart
- Chart.js - mixing bar and line graphs - can I get the lines to fill the full column?
- Chart.js 2 - label overlapping
- Reactjs- Bar Graph-chartjs- Data not coming in individual blocks
- What library should I use to create costume chart in react native?
- chart.js 2.0 add new property to dataset
- How to add new x axis in chart JS?