score:2
You can use addData
and removeData
, see https://www.chartjs.org/docs/latest/developers/updates.html. addData
adds only one dataset per call, but removeData
removes all datasets from chart. There is also way to push label and dataset see codepen sample: https://codepen.io/jordanwillis/pen/bqaGRR.
First what you need is to save your chart in variable, so you can easy add and remove data. when you have chart saved in var, let's say myChart
, you can call removeData()
like: myChart.removeData()
. For adding data you have to send label and data like: myChart.addData('news', [2, 32, 3])
.
The idea is next, to update chart when your ajax call is success. The important thing is to have chart instance in same file where you have ajax call, you should move onclick call to js file, or call function from from àpp.js
.
Now depends on your data structure, you will need to go through each and get value and label. You have to get same result from data like you have when you're creating chart.
CODE SAMPLE:
What you will have in app.js
$(document).ready(function(){
$.ajax({
url: "http://localhost/chartjs/data.php",
method: "GET",
success: function(data) {
console.log(data);
var op1 = [];
var op2 = [];
let data_keys = Object.keys(data[0])
console.log(data_keys)
first = data_keys[0] //1st element
second = data_keys[1] //2nd element
for(var i in data) {
op1.push(data[i][first])
op2.push(data[i][second])
}
var chartdata = {
labels: op1,
datasets : [
{
label: 'SystemID and Apparent Power (VA)',
backgroundColor: 'rgba(250, 50, 50, 0.4)',
borderColor: 'rgba(500, 50, 50, 0.5)',
hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
data: op2
}
]
};
var ctx = document.getElementById('mycanvas').getContext('2d');
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
options: {
scales: {
xAxes: [{
ticks: {
fontSize: 10
}
}],
yAxes: [{
ticks: {
fontSize: 10
}
}]
}
}
});
},
error: function(data) {
console.log(data);
}
});
function updateChartAjaxCall(data1, data2)
{
//ajax call here
$.ajax({
type: 'POST',
url: 'data.php',
dataType: 'html',
data: {data1:data1,data2:data2},
success:function(data){
// here also manipulate data what you get to update chart propertly
myChart.removeData();
myChart.addData('newLabel', [23, 33, 4]);
},
error:function (xhr, ajaxOptions, thrownError){
console.log(thrownError);
},
complete: function(){
}
});
e.preventDefault();
}
});
Then you bargraph.html
will be also changed:
<script type="text/javascript">
$('#submitButton').click(function(e){
var data1=$("#data1").val();
var data2=$("#data2").val();
updateChartAjaxCall(data1, data2);
});
</script>
Source: stackoverflow.com
Related Query
- Chart to update from a drop down selection
- ChartJS changing graphs based upon Drop Down selection
- Update the chart data from an array stored in a variable on button click
- Update Chart js chart dynamically in angular 2 from data getting from nodejs service
- Update ChartJS line chart from DynamoDB query
- getting additional value fields from data source for dx.chartjs doughnut chart
- Need to update tool tip value based on drop down filter after ajax call
- Dynamically update values of a chartjs chart
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Chartjs random colors for each part of pie chart with data dynamically from database
- How to prevent first/last bars from being cut off in a chart with time scale
- Chart.js Bar Chart - how to chart bars from 0
- Chart from chart.js to pdf
- Dynamically update the options of a chart in chartjs using Javascript
- Get Chart js object from selector
- How to add datas to chart js from javascript array itself?
- Adding Chart.js line chart to Jinja2/Flask html page from JS file
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
- Chart js: Update line chart having two data sets
- impossible to remove scale from radar chart (chart.js)
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How to update data Chart in async way in Angular Chart.js?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- Can't size doughnut chart from chart.js
- Chart.js update function (chart,labels,data) will not update the chart
- Using data from API with Chart JS
- Update Chart JS with date range selector
More Query from same tag
- Chart.js with handlebar.js shows empty canvas
- ChartJS line chart drag and zoom
- ChartJS tooltip label for pie cart being cut
- Chart.js (v3) Doughnut with rounded edges, but not everywhere
- implementing horizontal bar chart
- copy object in Chart.js
- Papaparse with chart.js not displaying csv value on the x axis
- ChartJs: x-axes min and max value not working
- Implement Chart.js Plugin Meteor Project
- Chart.js options and documentation
- How to change the label color in chart.js?
- How to add the value for each label to pie legend
- Chartjs line graph dataset with offset
- Tooltip flickering when hovered on chart
- ChartJS: Limit label's length on an axis and show a tooltip on hover?
- To remove error message when user clicked on legend label
- What is the correct way to send 2 parameters in socket.io using lambdas? (I get undefined when printing in client and server)
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Chart.js: Legend doesn't update on first call to chart.update()
- Canvas doens't display in SAPUI5
- Canvas won't appear in html
- How to retrieve the instance of a chart that is not global
- Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined
- Reactjs- Bar Graph-chartjs- Data not coming in individual blocks
- How to get the length (height) of the vertical bar in Chart.js
- Chart.js cartesian axes - Modifying tool-tip based on which y-axis the data corresponds to
- chart cannot read multiple datasets from the back-end (single data is fine)
- Chartjs Line Color Between Two Points
- Can JS lib can be use in Native Tizen App?
- Chartjs.org Bar chart not scale properly