score:1
Accepted answer
after you change your data you should update your chart with chartvariable.update()
.
i made a jsbin which explains you how to use it.
the important function for you is the last in the code, adddatabutton()
which gets triggered by a button click. in this function i add new data and update my chart after that.
instead of chartvariable
and chart
you should use linechart2
in your case.
complete code:
let numberofdatacounter = 0 // current data counter
const numberofdataatbeginning = 4 // data number to start with
const weekdays = ["su", "mo", "du", "we", "th", "fr", "sa"]
function randomnumber(){
let randomnumber = math.floor(math.random()*100)
return randomnumber
}
let chartdata = {
label: [],
data: []
}
function adddata (){
chartdata.label.push(weekdays[numberofdatacounter % 7])
chartdata.data.push(randomnumber())
numberofdatacounter++
}
// fill chart with data at beginning
while (numberofdataatbeginning>numberofdatacounter) {
adddata()
}
let data = {
labels: chartdata.label,
datasets: [{
label: "label",
data: chartdata.data
}]
}
let chart = new chart(document.getelementbyid("chart"), {
type: 'line',
data: data,
options: {
scales: {
yaxes: [{
ticks: {
min: 0,
max: 100
}
}]
}
}
});
function adddatabutton(){
adddata()
chart.update()
}
Source: stackoverflow.com
Related Query
- Chart.js showing old chart on hover
- charts.js chart showing old data on hover
- Chartjs Bar Chart showing old data when hovering
- Chart Js Show the old data on mouse hover
- Chart js shows old data on mouse hover
- Chart JS not showing On hover with small data
- Chart js shows old chart data when hover
- Chartjs Bar Chart showing old data when hovering when use of ajax
- Chart.js doughnut chart isn't showing tooltip when you hover over the left/right of the doughnut
- chart js when hover shows old values
- how to remove old data from Chart js on mouse hover using mvc c#?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- chartjs show dot point on hover over line chart
- Detecting hover events over parts of a chart using Chart.js
- Chart.js ng2-charts colors in pie chart not showing
- Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled?
- Chart.JS Mixed Chart - Bars Not Showing
- Chart.js tooltip hover customization for mixed chart
- Draw a horizontal and vertical line on mouse hover in chart js
- Chartjs - show elements in all datasets on hover using bar chart
- Line chart is showing under bar in combochart in chartjs
- Showing Percentage and Total In stacked Bar Chart of chart.js
- ChartJs line chart - display permanent icon above some data points with text on hover
- Series Details Not Showing in Angular Chart with Charts.js
- ChartJs Bubble chart - on hover bubble becomes too big
- Chart.js pie chart not showing in Google Chrome canvas
- How can I trigger the hover mode from outside the chart with charts.js 2?
- Chart JS custom tooltip not showing
- ChartJS Doughnout Chart Pie Offset on Hover
- Chart js logarithmic line chart showing NaN values instead of null
More Query from same tag
- How to plot Firebase data with Chartjs in angular
- d3.csv parseFloat will not parse correctly
- How to push datasets dynamically for chart.js (bar chart)?
- How can I change color of only one column in Barchart using Chart.js
- Bug in canvas class in chart js
- How can I style ChartJS to always be at the bottom of a div?
- Update Chart in Javascript using Chart.js
- How to change line color based on data - chartist or chart.js
- Overlay Line on chart.js Graph
- My ChartJS Line needs to click the color legend first before it plots the data
- How to point a Chart.js plugin to different doughnut charts?
- Jinja throughs "SyntaxError: expected property name, got '%' " error
- grouped bar dataset in djanog template loop
- Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js
- chart.js increase value on click
- Why is pan (and zoom) not working on my Chart.js graph?
- ChartJS with ChartJS DataLabels: Change Color per Dataset for Value Labels
- ChartJS 2 - Adding data to chart breaks after X number of items added
- How to correctly passed php mysql data to ChartJs
- Chartjs Graph is not showing in colorbox
- How to add conditional logic on Chart.js config?
- Chart.js inside popup on leaflet?
- ChartJS: Changing Font-Size of X-Axis Labels on Line Chart
- Chartjs annotations-plugin: Can I add multiple vertical lines to identically named x-axis labels?
- ng2charts using borderColor with array value
- Options: plugins not functioning
- Adding additional data to chart
- Show values in Chart.js Pie chart parts
- Trying to export chart with Chartjs and React but getting erorr
- Gradient line chart with ChartJS