Here is the original example code :
http://canvasjs.com/html5-javascript-dynamic-chart/
I need to update the value without setInterval(), I mean whenever the yAxis got a value somewhere, then it will plot automatically without time delay. One more thing, I dont’t want to shift the graph while the value reach datalength, when it reach the maximum datalength, clear all the old plotted data, go back to 0 point and plot again.
Thank you for your support !
canvasjs
Gia Huy,
You can remove dps.shift from the example to avoid shifting. Check this example.
And you can remove setInterval to avoid update of charge based on time-basis and you can manually push y-value to dataPoints and render chart whenever you get y-value.
setInterval(function(){updateChart()}, updateInterval);
Remove setInterval and push y-Value to dataPoints when you encounter it.
dps.push({y: yValue});
chart.render();
and render the chart.
Related
I'd like to have dc.js chart which slides along a selection, e.g. in the Nasdaq example https://dc-js.github.io/dc.js/ you would select a sub-selection of time then click "animate" button and the selection filter would slide along the x-axis at a pre-determined step size.
I'm a bit lost as to where one would start...does anyone have any ideas?
Most of what you need to do is set the current filter on the relevant chart based on a timer, instead of based on user interaction.
I've copied the relevant parts of the Nasdaq example into a fiddle to illustrate this: https://jsfiddle.net/0zkbyyqu/9/
Once the charts are in place, the animation is just a matter of changing the filter based on a setInterval. For obscure reasons, we want to use the focus method of the moveChart, not the filter method, but it's essentially doing the same thing, with a little more code to reflect the changes in the range chart:
var beginYear = 1985;
window.setInterval(function() {
moveChart.focus([
new Date(beginYear, 0,0,0,0,0,0),
new Date(beginYear+3, 0,0,0,0,0,0)]);
if(++beginYear > 2009)
beginYear = 1985;
}, 1000);
(If you were using the filter method, you'd have to construct a dc.filters.RangedFilter, as detailed here: Initial Range selection in DC.js chart)
I have left off your idea about the initial selection of the range coming from the user, and just gone with a range of 3 years. This example just starts animating as soon as it is loaded. You can fetch the current filter using chart.filter(); the result will be a RangedFilter, which is an array of two dates. Hopefully it is clear how to add start/stop buttons to the animation.
A couple of things are tricky about this approach:
It's tricky using a chart with transitions when you also have a timer or streaming data. In this case, I had to reduce the transitionDuration to 500ms for it to make any sense, but the cause-and-effect is still a little confusing. Not sure what to do about this.
The area chart transitions are incorrect so you get some weird artifacts.
D3.js axes typically have "handlebars" on the end of each axis, like this:
Those look nice. But.
How can these be removed to make an axis look flat, like this:
The square ends of the path are sized using either the .tickSize method, in which case the second argument gives the outer tick size and the first the main tick size, or else using the .outerTickSize method. In either case, supply a value of 0 to suppress the ticks.
ticks.tickSize(innerTickHeight, 0);
or
ticks.outerTickSize(0);
Source: page on d3 axes.
When using d3 or nvd3, I'm able to change data to the chart using something like the following:
d3.select('#test1 svg')
.datum(someDataArr)
.call(chart);
Pushing an item onto the end of the someDataArr works as expected - a new item appears in the graph. However, if I shift the first item off and push a new item to the end, d3 (understandably) transitions each data point according to its index.
In the case of a scatterplot, for example, this is undesirable. I would prefer to remove the first item of the array but keep the plot points associated with their prior array index position.
Does anyone know how to keep the association between array[index] and chart points while also removing items from the beginning of the array?
Thanks in advance for your time.
When you use a DataVisualization Chart object and you add points to it, the graph is automatically updated but when you change the points the chart is not updated. For example:
System.Windows.Forms.DataVisualization.Charting.Chart myChart;
// When you add points, the chart is automatically redrawn.
myChart.Series[0].Points.AddXY(0,0);
myChart.Series[0].Points.AddXY(1,1);
myChart.Series[0].Points.AddXY(2,0);
// When I change the value of points, the chart is not automatically redrawn.
myChart.Series[0].Points[0].SetValueXY(0,1);
How can I force a redraw of the chart? Something like myChart.Update() or something. As a workaround I'm deleting the last point and re-adding it at each update to force a redraw, but I would like something a little bit more elegant.:
// Re-add last point to force redraw.
myChart.Series[0].Points.RemoveAt(2);
myChart.Series[0].Points.AddXY(2,0);
Is it possible to control the timing of the animations for each piece of data in HighCharts?
What I mean is that on SLIDE 7 of the following demo: http://blackwavedesign.com/tmp/drlathian/animation_demo/index.html I was hoping to have the first column animate, then 5 seconds later, have the second column animate, and so forth. I'm thinking that there is probably not a way to do this, but maybe someone knows of a workaround. The script that creates this chart is in the buildHighCharts.js function of this script: http://blackwavedesign.com/tmp/drlathian/animation_demo/assets/js/drutil.js
You can do it by having an initial point on your chart and then pumping in your additional points on an interval.
See this jsFiddle as an example.