I am using Highcharts to create a bar chart, and trying to figure out how to animate the changes that I am making to the chart. I have set animated to true, but its not showing any changes, just redrawing the bar to the new height.
How can I have it animate changes? Right now I am setting the data with series.setData(), not sure if there is a way to set a specific bar, maybe this is why it does not animate?
http://jsfiddle.net/nycynik/FACtf/
var series = this.series[0];
chartData1[Math.floor(Math.random()*10)] = Math.random()*125;
series.setData(chartData1, true);
Series.setData() doesn't animate because all the points are thrown away and replaced with new ones.
What you are looking for is Point.update(). When you run point update you are only updating the value, so the point is able to animate from the old value to the new one.
chart.series[0].data[0].update(Math.random());
See demo.
Related
I am working on adding transition to the line chart, copied a example from herehttp://bl.ocks.org/d3noob/7030f35b72de721622b8, i want the line chart to do transition when the interval happens, like in the example when you click the button the chart will move to left but in my plunkerhttps://plnkr.co/edit/sCJYfXDSjXN1IiFokK1V?p=preview doesn't work, I put the d3 code in angular's custom directive because i have a requirement where graph will be repeated more than 5 times any help is much appreciated
In your update data function, selection of the chart was var svg = d3.select("lineChart").transition();. It should be var svg = d3.select(".lineChart").transition();
I have dygrpah live data update which updated data every seconds.
Once i will do the vertical zoom and data will gets refreshed after a second so vertical zoom gets reset again; and chart start updating data as usual.
can any one have idea how to maintain vertical zoom and update the data?
Thanks
Use "valueRange" property.
In "zoomCallback" callback function, you will getting the yRanges. Assign the range to the "valueRange" property. You could something similar to this,
grpah.updateOptions({
valueRange: [zoomMinY, zoomMaxY]
});
I am using chart.js to try to create a timeline of events relative to current date.
The horizontal bar chart is close but would like to show only the tips of the bars eg as points which would pretty much be a horizontal line chart.
I have shown my horizontal bar chart along with a mock-up of what it would look like as horizontal line chart.
Is this possible with chart.js ?
You first need to know that every information that you can edit about the chart is stored in the variable containing your chart (called myChart usually, but my2Bar in your fiddle).
If you want to globally change the graph, you will need to edit attributes in myChart.config.options.
If you want to change a specific chart, you will need to edit attributes in myChart.config.data.
In this case, you need to change a specific chart (which is the horizontal bar).
If you happen to check the logs of your graph, and go very deep in the config, you will finally see that bars in your chart are drawn using attributes stored in myChart.config.data.datasets[0]._meta[0].data[n]._model (n being the nth rectangle drawn, top to bottom).
Some attributes you can find there :
base : The X position where the rectangle is starting to be drawn (0 in your xAxe for instance).
x : The rectangle is being drawn until this X position.
height : The height of the drawn rectangle.
and so on ...
To edit these values, you just need to loop in your different rectangles (the n in the above path).
But you just can't do it manually on the config of your variable. If you do this, it won't work since your chart is responsive (on resize, it will redraw the chart using the former options).
What you must use are Chart.js plugins.
Plugins let you handle all the events that are triggered while creating, updating, rendering your graph.
Then, in your beforeRender event (triggered after the initialisation, but before the drawing), you need to loop in your different rectangles to edit the values to affect how they will be drawn :
beforeRender: function(chart) {
for (var i = 0; i < chart.config.data.datasets[0]._meta[0].data.length; i++) {
// Change both `3` values to change the height & width of the point
chart.config.data.datasets[0]._meta[0].data[i]._model["base"] = chart.config.data.datasets[0]._meta[0].data[i]._model["x"] + 3;
chart.config.data.datasets[0]._meta[0].data[i]._model["height"] = 3;
}
}
Here is a jsFiddle with the final result.
Unfortunately, I wasn't able to make round dots, instead of squared ones.
Update :
I have also made another jsFiddle where all the dots are linked together which makes it look like it is a horizontal line chart (can be improved of course, but it is a good start).
This is in response to the following question, How to remove padding in c3.js?, where the answer that was provided solves this issue, but also raises another issue -- the buttons on the graph are cut off at the end --
How would I get there to be no padding and the buttons not to be cut off, for example, it should look like:
The dots are getting clipped off because of the clip-path set on the chart layer. You just have to remove it. You can use D3 for this, like so
d3.select(chart.element).select("." + c3.chart.internal.fn.CLASS.chart).attr("clip-path", null);
where chart is your C3 chart object
Fiddle - http://jsfiddle.net/zds67nh1/
However you most probably want the dots to appear above the axis layer. For that you need to detach and attach the chart layer (in SVG, the z-index is determined by the order - the last of the siblings come on top. So you have to basically move it to the end of the siblings list), like so
var chartLayer = d3.select(chart.element).select("." + c3.chart.internal.fn.CLASS.chart);
var chartLayerParentNode = chartLayer.node().parentNode;
var chartLayerNode = chartLayer.remove();
chartLayerParentNode.appendChild(chartLayerNode.node());
chartLayer.attr("clip-path", null);
Fidle - http://jsfiddle.net/7e1eL22f/
I'm using jqPlot to render a graph with zooming enabled.
See example:
http://jsfiddle.net/gcollect/yGLmT/
In the example above, I have a chart with a markerSize of 5 and I have a working zoom-event detection.
I need the plot to change its markerSize, when zoomed in. and reset it to its default, when zoomed out.
I was thinkingt of a solution, without replotting the graph. Since replotting looses the actual zoom level.
For example:
plot1.replot(options)
would change the markerSize, but looses the zoom level again.
Try updating options value using,
options.seriesDefaults['size'] = 25;
Then reploat/redraw the graph. But re plotting will surely resize the graph.