score:2
Accepted answer
i use chart.js, and i think i'm doing exactly what you want to do, which is to have ajax fetch the chart data, and then display it. you do have to update the chart a special way, and hopefully my code below will show you what you need to do. i think the key here is right up at the top, in the funcs namespace, the updatemychart function. check it out:
(function($){
// local namespaced variables and functions
var namespace = {
mychart: null,
updatemychart: function(data){
funcs.mychart.data.datasets[0].data = data;
funcs.mychart.update();
}
};
// end local namespaced variables and functions
window.funcs = ( window.funcs )
? $.extend( window.funcs, namespace )
: namespace;
})(this.jquery);
/* document ready function */
$(document).ready(function(){
// initial config
var mychartconfig = {
type: 'bar',
data: {
labels: ['yes', 'no', 'maybe'],
datasets: [{
label: 'current count',
backgroundcolor: [
'rgba(75, 192, 192, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
bordercolor: [
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)'
],
borderwidth: 1,
data: [0,0,0]
}]
},
options: {}
};
var mychartcanvas = $("#mychart");
funcs.mychart = new chart(mychartcanvas, mychartconfig);
/* unit selector for interest */
$('#btnchart').on('click', function(){
$.ajax({
type: 'post',
cache: false,
url: '/someplace/special',
data: {},
datatype: 'json',
success: function(response){
if(response.data){
// in php i just json_encode(['data' => [some data]]);
funcs.updatemychart(response.data);
}
},
error: function(){
alert('an error prevented chart awesomeness.');
}
});
});
});
i know i'm using jquery and you might not be, but the updating doesn't really have anything to do with jquery anyways.
Source: stackoverflow.com
Related Query
- How to get the database data into ChartJS using codeigniter
- How to get the data attribute of the canvas chart created using chartjs
- Get data from sql database in chartjs using codeigniter
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to get Data from API to display chart using chartjs in Vuejs
- chartjs how to update dynamically data from database(Chartjs cant get the data)
- How can I pass the data into the chartjs label?
- How to pass sql query data onto the datasets field of chartjs using nodejs (ejs)
- How to get the image from graph created using chartjs
- How to implement doughnut ChartJS with CodeIgniter 3 and display data from database
- How to display data from database into line graph using php and mysql?
- How to feed hour and minute data into chartJS
- React ChartJS 2 : Get data on clicking the chart
- how to reset the graph/chart after zoomin, pan using chartjs
- How to create chartjs chart with data from database C#
- How can I load multiple Chartjs charts with different data on the same page?
- how can i send a list of numbers from views.py to a chartjs file im using for the front?
- How to display chart using Chartjs with JSON data in Laravel
- How to set the chartjs bar graph scale to the highest value in the result data
- How to set the gap between data items in a chartjs chart
- How to take a set of Date objects and display the frequency based on time of day using ChartJS
- How to show the chartjs bar chart data values labels as text?
- How to displays item names from the database using a monthly or yearly chart PHP MySQL
- How can make my chart.js dynamic using data from database
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- To display data from mock server into chartjs using ember
- How to sum the array value in javascript like chartjs data array and input value sum
- How to add additional label in the middle of each bar using ChartJS
- How can I display `Null` value data on Y Axis using the Primitive dataset format in Chart.js V3.7.0?
- Many Flots using ChartJS and Ajax get data values
More Query from same tag
- error : "Uncaught TypeError: Cannot read property 'length' of null" Chart.js
- Error when implementing charts.js in angular
- Django Multiple chartJs chats in a page
- How do I implement Laravel Analytics with Chart.js
- How to access Controller properties in Chart.js
- Can I use a variable as index in for loop in python?
- canvas does not display proper width and height chart.js
- Chartjs won't render chart with Requirejs
- Bold text inside doughnut chart (chart.js)
- Chart.js render two charts on one page.
- Charts.js destroy previous data and update
- Getting dynamic data for chart.js from Django model
- Set Radar(spider) chart version 2.x (2.4.0) steps(interval) in Chart.js
- Chart.js - graph responsivity / sizing
- How to trigger hover programmatically in chartjs
- Chartjs - pointColor to follow current color of gradient stroke
- ChartJS Datalabels plugin and negative numbers
- Displaying line chart for multiple months using chart.js
- how to show bar chart for every product
- Charts.js polar area scales
- NuxtJS ChartJS Gradient Color doesnt apply
- how to load mysql query to chartjs with php?
- Angular2 ng2-chart customizations?
- Chart.js dynamically upating data using variable
- How to Create a Custom Logarithmic Axis in Chart.js
- ChartJs Angular directive - chart[chartType] is not a function
- Chart.js - How to create a different global configuration between the x axis and the y axis
- Chartjs Line chart options display increase and decrease percentage between each datapoint
- Click event of stacked line chart not working
- Convert a JSON file to an array in javascript to visualize the data in ChartsJS