score:24
Accepted answer
I'll add a plugin which could be useful for your problem, but first let me explain how it works.
Follows the result of a fully working example which you can find on this jsFiddle :
Using Chart.js plugins can help you doing it quite easily. A plugin lets you handle some events triggered through the chart creation such as the initialization, the resize, etc.
Chart.pluginService.register({
beforeInit: function(chart) {
// All the code added here will be executed before the chart initialization
}
});
I'll add a plugin which could be useful for your problem, but first let me explain how it works.
First, you'd need to add a new attribute to your datasets, named function
. Its value must be a function with one argument and a returned value :
var data = {
labels: [1, 2, 3, 4, 5],
datasets: [{
label: "f(x) = x", // Name it as you want
function: function(x) { return x },
data: [], // Don't forget to add an empty data array, or else it will break
borderColor: "rgba(75, 192, 192, 1)",
fill: false
},
{
label: "f(x) = x²",
function: function(x) { return x*x },
data: [],
borderColor: "rgba(153, 102, 255, 1)",
fill: false
}]
}
Now you have to add the following plugin before you call new Chart()
(to create your chart) or else it won't be added into the chart's plugin service :
Chart.pluginService.register({
beforeInit: function(chart) {
// We get the chart data
var data = chart.config.data;
// For every dataset ...
for (var i = 0; i < data.datasets.length; i++) {
// For every label ...
for (var j = 0; j < data.labels.length; j++) {
// We get the dataset's function and calculate the value
var fct = data.datasets[i].function,
x = data.labels[j],
y = fct(x);
// Then we add the value to the dataset data
data.datasets[i].data.push(y);
}
}
}
});
You can now freely create your chart with the options you need.
Follows the result of a fully working example which you can find on this jsFiddle :
Source: stackoverflow.com
Related Query
- Chart.js draw mathematical function
- Draw a mathematical function in chartjs
- Chart.js : Controller for Scatter chart doesn't work for draw function
- How to send data from struts2 to a javascript function to draw a 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
- Draw horizontal line on chart in chart.js on v2
- ChartJS - Draw chart with label by month, data by day
- How to Draw Gantt chart using chart js or other libraries
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Chart.js v2 is there a way to draw bar chart horizontally?
- Chart.js - Draw bar chart with multiple labels
- Draw a horizontal and vertical line on mouse hover in chart js
- angular-chartjs line chart TypeError: t.merge is not a function
- Blank PNG image using Chart JS . toBase64Image() function
- ChartJS: Draw vertical line at data point on chart on mouseover
- How to draw Horizontal line on Bar Chart Chartjs
- Can we draw a Line Chart with both solid and dotted line in it?
- Chart js - Draw center of each bubbles of a bubble chart
- Chart.js update function (chart,labels,data) will not update the chart
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- Hovering over chart.js values in Meteor onRendered function causes chart axis shift
- Draw a horizontal bar chart from right to left
- How to draw a chart with Chart.JS?
- Chart.js v2 overwrite draw function
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Chart JS : Getting issue with draw bar chart
- code works fine on jsfiddle but one function is not working on website
- How to draw baseline for bar chart in chart.js
- Do not draw line on condition in ChartJS line chart
More Query from same tag
- Laravel 5.6 using laracharts. Chart wont render
- Change chart.js options based on window width
- How to zoom charts in chart.js using angular 7
- Parsing json in jQuery error
- chartJSRadar downloadhandler creating empty png
- ChartJS yAxis showing not coherent data
- How to hide a portion of chart or a div in Angular?
- pass array to chart.js option
- Loading data into chart on html page
- How can I force my ChartJS canvas legend to stay in a single column?
- Chart.js repeating colors?
- Creating a heart rate monitor
- Chart.js How to align x-ticks?
- In Chart.js I want to show dotted gridLines like in below image
- chartJS generateLegend()
- How to make bar chart cover multiple labels?
- How to use legendCallback or similar when using Chart.js with TypeScript
- Chart.js canvas is empty / white in node.js
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How can I change the background colors of a bar chart after it has been created?
- Can't figure out how to skip first datapoint on the x-axis and labels on X-axis skip second-to-last datapoint with Chart.js
- Line Chart: background of RangeSlider
- Chart.js – Line Chart Tooltip Labels
- X and Y axis labels not displaying on line chart (Chart.js)
- How to custom legend with react-chartjs-2
- Change line point to triangle in Chart.js
- react-chartjs integration error. Cannot read property 'xLabels' of undefined
- Chart.js legend customisation
- Chart.js: Get point index from chart.getPointsAtEvent(e)
- What's the most effective way to implement a radar plot with 50 points at arbitrary locations using chart.js