score:2
edit http://www.chartjs.org/docs/
the chartjs library is now the most updated and useful. use the link above.
i think what you need to do is download the updated chart.js library, chartnew.js at: https://github.com/fvancop/chartnew.js/ . this updated library has an update function among many other improvements that make things much easier. you can download the zip file using the link above and find tons great example files that will help you figure out most issues. there is also some pretty good documentation at: https://github.com/fvancop/chartnew.js/wiki/100.available_options .
i will add a full example from the above library that you can copy and paste into an html file in order to see exactly how you can create a dynamic chart. just take a look and play around with the examples until you start to see how things work.
<!doctype html>
<!--[if lte ie 8]><script src='source/excanvas.js'></script><![endif]--><script src='../chartnew.js'></script>
<script src='../add-ins/format.js'></script>
<script>
function setcolor(area,data,config,i,j,animpct,value)
{
if(value > 35)return("rgba(220,0,0,"+animpct);
else return("rgba(0,220,0,"+animpct);
}
var charjspersonnaldefaultoptions = { decimalseparator : "," , thousandseparator : ".", roundnumber : "none", graphtitlefontsize: 2 };
defcanvaswidth=600;
defcanvasheight=300;
var mydata = {
labels : [],
datasets : [
{
fillcolor : "rgba(220,220,220,0.5)",
strokecolor : "rgba(220,220,220,1)",
pointcolor : "rgba(220,220,220,1)",
pointstrokecolor : "yellow",
xpos : [],
data : [],
title : "2014"
}
]
}
var startwithdataset =1;
var startwithdata =1;
var opt = {
animationstartwithdataset : startwithdataset,
animationstartwithdata : startwithdata,
animation : true,
animationlefttoright : true,
animationsteps : 20,
animationeasing: "linear",
canvasborders : true,
canvasborderswidth : 3,
canvasborderscolor : "black",
graphtitle : "animation with update",
legend : true,
// ingraphdatashow : true,
annotatedisplay : true,
onanimationcomplete : startupdate,
graphtitlefontsize: 18,
responsive : true,
scaleoverride: true,
scalesteps: 10,
scalestepwidth: 10,
scalestartvalue: 0,
fmtxlabel : "fmttime hh:mm:ss",
animationcount: 1,
animationpausetime : 0,
animationbackward: true
};
function startupdate(ctx, config, data, tp, count) {
settimeout(function (){updt(ctx,data,config);}, 1000+math.random()*500);
// settimeout(function (){updt(ctx,data,config);}, 1000);
};
function updt(ctx,data,config) {
updtdata(data);
config.animationsteps = 50*data.datasets[0].xpos.length;
config.animationstartvalue=1-(2/data.datasets[0].xpos.length);
deletehighlight(ctx,data);
updatechart(ctx,data,config,true,true);
}
function updtdata(data) {
var i;
var t=new date();
var coeff = 1000 ;
var rounded = new date(math.round(t.gettime() / coeff) * coeff + coeff);
for(i=0;i<10;i++)
{
var t2 = new date(rounded - (18-2*i) * 1000);
data.labels[i]=t2;
}
data.xbegin=data.labels[0];
data.xend=data.labels[9];
data.datasets[0].xpos[data.datasets[0].xpos.length]=t;
vl=math.random()*100;
data.datasets[0].data[data.datasets[0].data.length]=vl;
// remove data outside first time;
while(data.datasets[0].xpos[0]<data.labels[0]) {
data.datasets[0].xpos.splice(0,1);
data.datasets[0].data.splice(0,1);
}
}
updtdata(mydata);
updtdata(mydata);
updtdata(mydata);
mydata.datasets[0].xpos[0]=new date(mydata.datasets[0].xpos[0]-2000);
mydata.datasets[0].xpos[1]=new date(mydata.datasets[0].xpos[1]-1000);
</script>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<title>demo chartnew.js</title>
</head>
<body>
<center>
<font size=6><b>demo of chartnew.js !</b></font> <br>
<script>
document.write("<canvas id=\"canvas_line\" height=\""+defcanvasheight+"\" width=\""+defcanvaswidth+"\"></canvas>");
window.onload = function() {
var myline = new chart(document.getelementbyid("canvas_line").getcontext("2d")).line(mydata,opt);
}
</script>
</body>
</html>
the provided code example is taken directly from the github download folder. they provide a great deal of examples to help make sense of the the documentation.
score:0
check out this simple example i wrote in jsfiddle. i first created a bar chart and then used chart.update()
method to update it in every second.
//value for x-axis
var emotions = ["calm", "happy", "angry", "disgust"];
//colours for each bar
var colouarray = ['red', 'green', 'yellow', 'blue'];
//let's initialdata[] be the initial data set
var initialdata = [0.1, 0.4, 0.3, 0.6];
//let's updateddataset[] be the array to hold the upadted data set with every update call
var updateddataset;
/*creating the bar chart*/
var ctx = document.getelementbyid("barchart");
var barchart = new chart(ctx, {
type: 'bar',
data: {
labels: emotions,
datasets: [{
backgroundcolor: colouarray,
label: 'prediction',
data: initialdata
}]
},
options: {
scales: {
yaxes: [{
ticks: {
beginatzero: true,
min: 0,
max: 1,
stepsize: 0.5,
}
}]
}
}
});
/*function to update the bar chart*/
function updatebargraph(chart, label, color, data) {
chart.data.datasets.pop();
chart.data.datasets.push({
label: label,
backgroundcolor: color,
data: data
});
chart.update();
}
/*updating the bar chart with updated data in every second. */
setinterval(function() {
updateddataset = [math.random(), math.random(), math.random(), math.random()];
updatebargraph(barchart, 'prediction', colouarray, updateddataset);
}, 1000);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.3.0/chart.min.js"></script>
<body>
<div>
<h1>update bar chart</h1>
<canvas id="barchart" width="800" height="450"></canvas>
</div>
<script src="barchart.js"></script>
</body>
</head>
</html>
hope this helps.
Source: stackoverflow.com
Related Query
- Dynamically update values of a chartjs chart
- Dynamically update the options of a chart in chartjs using Javascript
- Dynamically update chart in chartJs
- Chartjs random colors for each part of pie chart with data dynamically from database
- Show data dynamically in line chart - ChartJS
- How to dynamically set ChartJs line chart width based on dataset size?
- dynamically update the scale type of chartjs graph
- Meteor and ChartJS dynamically create a chart
- ChartJS update chart with multiple datasets
- ChartJS v2.6 update breaks custom line-with-area-range (stripe) chart
- Dynamically update values of a chartjs2.0 chart
- ChartJs chart won't update new values
- How to update a chart using VueJS and ChartJS
- Update Chart js chart dynamically in angular 2 from data getting from nodejs service
- React Chartjs - Update Chart on interval
- Chartjs Radar chart - How to dynamically highlight one of the gridlines at a specific point
- chartjs how to update dynamically data from database(Chartjs cant get the data)
- How to update the chart dynamically with vue-chartjs?
- dynamically update Chart.js draw line chart dataset data
- Dynamically loaded chart data not showing Chartjs React
- How to dynamically update data of line chart used with chart Js?
- VueJS + Chartjs - Chart only renders after code change
- Update Chart JS data dynamically and add new data, remove old data to create timeline "like" chart
- Update ChartJS line chart from DynamoDB query
- How to update Chartjs chart (react-chartjs-2) with dynamic data?
- My Chartjs is not updating after setstate full code attached Reactjs Update
- How to get ChartJs object from dynamically created chart
- How to dynamically update Chartjs legend label colors?
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- Update chartjs chart within random data once per second
More Query from same tag
- How to create single value Doughnut or Pie chart using Chart.js?
- Google charts: Error: Row 0 has 1 columns, but must have 2
- Put tooltip on the middle of two bars
- Is it possible to change chartjs line value in one column ? No transition
- ChartJS 2.0 - Huddle labels on pie chart
- Javascript and chart.js, how to add euro currency to y label
- chart.js hide gridline inside chartarea but keep y-axis border
- Unable to resolve path to module 'chartjs-plugin-stacked100'
- Change point color on click using ChartJS
- How can I move a label left, paint it black, or remove it (Chart.JS)?
- How do I refresh data from json-file with charts.js?
- Access a chart in a different function
- Inserting an array in Chart.JS
- colors are not updated when updating chart
- Charts.js - Need to remove the data value from the Tooltip
- Highlight external element on ChartJS hover
- chartjs output data in month week and day
- Angular js pie chart styling
- Y-Axis with different colors
- Redraw Chart.js Chart with Json_encoded array from ajax request
- Array data not rendering in data table using this.props - ReactJS
- Send data from a form to another component of the same level -angular
- ChartJS date reformatting for use?
- Chartjs change grid line color
- Chart.js V2 line chart missing point
- Chartjs: make square legends
- Chart.js - Adding Legend in a JSP Page
- Is this graph possible using chart.js?
- Flask with Chart JS Scatter Plot struggle
- Drawing a doughnut chart with columns inside to represent hourly stats in chart.js