score:1
Accepted answer
i found a way using an .each function after piecing together various answers to similar questions. this js is called for each chart whenever there is a canvas with a "line" class on the page. hopefully this will be of help to others.
$('.line').each(function (index, element) {
var kpidata = element.getattribute('id');
$.ajax({
type: "post",
url: "/home/getlinechartdata",
traditional: true,
contenttype: "application/json; charset=utf-8",
datatype: "json",
data: kpidata,
success: function (idata) {
var adata = idata;
var alabels = adata[0];
var adatasets1 = adata[1];
var datat = {
labels: alabels,
datasets: [{
data: adatasets1,
label: 'value',
backgroundcolor: getstyle('--primary'),
bordercolor: 'rgba(255,255,255,.55)'
}]
};
var ctx = element.getcontext('2d');
var mynewchart = new chart(ctx, {
type: 'line',
data: datat,
options: {
responsive: true,
tooltipcaretsize: 0,
maintainaspectratio: false,
legend: {
display: false
},
scales: {
xaxes: [{
gridlines: {
color: 'transparent',
zerolinecolor: 'transparent'
},
ticks: {
fontsize: 2,
fontcolor: 'transparent'
}
}],
yaxes: [{
display: false,
ticks: {
display: false
}
}]
},
elements: {
line: {
borderwidth: 1
},
point: {
radius: 4,
hitradius: 10,
hoverradius: 4
}
}
}
}
);
}
});
});
Source: stackoverflow.com
Related Query
- How to render multiple Chart.JS charts on the same page with AJAX data and variables
- How can I load multiple Chartjs charts with different data on the same page?
- How do I create multiple charts at the same page with angular?
- How to achieve the best possible performance with mutable data and real-time charts in React?
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- Want to multiple charts on same page with different data
- How I can add the predict data and the actual data in the same graph with ChartJS?
- How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page
- multiple chartjs charts with the same configuration but different data
- How do I make many ChartJS charts on the same page to have the same height and also even column width?
- Chart JS show multiple data points for the same label
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular chart how to show the legend data value by default along with legend name
- How to get chart from data points (arrays) with inconsistent time intervals and chart.js?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Angular 2: How to pass my API data to graph and Display the Graph with data
- Charts js and laravel: Render chart after passing in json data
- how to display multiple sum with chart js and laravel?
- Chart.js -> line chart -> multiple points with the same X
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to show tooltip value of all data falling on the same axis in chart js?
- show multiple responsive chart in the same page using chart.js
- multiple charts js in page but with same tooltips (about last chart)
- How to add left padding for my charts done in ChartJs and my Google Map so it is not glued to the limit of the page on the left
- Trying to get multiple chart.js charts to load on the same page
- NODEJS API: How to render .pug and send a AJAX response at same time?
- how to write labels along with data on top and bottom of each stack in bar chart
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
More Query from same tag
- Cannot find module /chartjs.helpers while using chartjs-plugins-datalabels (ReactJS)
- chartjs V3 align legend text
- How to show stacked and unstacked bar graphs together in Chart.js
- Display labels on bar chart using Chart.js
- Passing Json using JsonResult not working properly
- How to externally trigger datalabels-plugin (active) - ChartJS
- Two tone colours in chart.js pie chart
- Chart.js: width and height of a pie chart not respected
- Chart.js legendcallback
- Chart.js - changing tick / label positions for x axis time series
- Loop datasets into chart.js?
- How to apply image on each bubble in chartjs?
- Round pie chart in rectangular canvas
- how to show bar value on the top of each bar in chartjs
- Performance issue, what causes it?
- Function for Label in ChartJS?
- Load ChartJS via VueJS - ChartJS empty and 0px dimension
- Chartjs Custom Legend for Doughnut Chart Having Labelled Lines Sticking Out of Each Section
- How to remove transparency from bar charts?
- How to implement dynamic data on chartjs?
- Rotate chart "pie" to need value or angle
- How to edit my custom tooltips in my line chart using chart.js?
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- attempting to destroy previous graph on canvas
- Chart.js Bar graph with percentage values
- Create a pie chart with chartjs package in R
- is there a way to do automatic scrolling?
- OnClick event on Custom legends Chart.js / Angular 5
- How to put images/ charts into table?
- How to update chart.js on websocket event?