Animate transition between values on amcharts svg bar graph - javascript

I have a bar chart I built using the 'amcharts' plugin.
The graph updates its values when the a dropdown menu item is selected,
I am trying to get the graph to animate the transition between the values when it changes, currently it either resets the whole animation and animates from '0', or if animateAgain() is commented out (line 142 in js) it jumps to the new value. This code is called after the values have been updated:
// Animate between values instead of resetting animation?
chart.animateAgain(); // Resets animation
chart.validateData(); // redraws the chart with new data
I've searched the docs and google but can't find anything to help with this, anyone have any ideas or pointers in the right direction? Is it possible? Here's the codepen :
http://codepen.io/bananafarma/pen/yewbJQ
Cheers!!

You can use amCharts' own Animate plugin.
It adds a new method to chart objects animateData().
function updateGraph() {
var newData = chart.dataProvider.slice();
if( document.getElementById('data-set').value == 1 ) {
newData[0].gain= 3.8;
newData[1].gain= 8.5;
newData[2].gain= 3;
newData[3].gain= 1.9;
}
else if ( document.getElementById('data-set').value == 2 ) {
console.log("yo");
newData[0].gain= 2.6;
newData[1].gain= 8.6;
newData[2].gain= 13.8;
newData[3].gain= 4;
}
else if ( document.getElementById('data-set').value == 3 ) {
newData[0].gain= 4.8;
newData[1].gain= 10.6;
newData[2].gain= 15.9;
newData[3].gain= 16;
}
// use Animate plugin
chart.animateData( newData, { duration: 1000 } );
}
Here's your updated working demo.

Related

Javascript - AmCharts hide and show graph using legends

I am using Amcharts plugins in making a graph. But I am having issues in hiding and showing the graph using legends.
This is my function code:
function handleLegendClick( graph ) {
var chart = graph.chart;
for( var i = 0; i < chart.graphs.length; i++ ) {
if ( graph.id == chart.graphs[i].id )
chart.hideGraph(chart.graphs[i]);
else
chart.showGraph(chart.graphs[i]);
}
if (graph.id == chart.graphs['3'].id)
chart.hideGraph(chart.graphs['4']);
if (graph.id ==chart.graphs['4'].id)
chart.hideGraph(chart.graphs['3']);
chart.validateNow();
// return false so that default action is canceled
return true;
}
This code is working but my problem is, it hides only one graph and show the graph again when the user click another legend. What I need to do is to hide multiple graphs by clicking it's assigned label text and marker, and when the graph is hidden I should click the same legend to show the hidden graph.
Please help me. Thank you.
From your description, the default legend behavior does exactly what you're asking for without needing to add your handleClick code. I'm not sure what's the point of it.
var chart = AmCharts.makeChart("chartdiv", {
// ...
"legend": { }, //default setup
});
Here's an example with multiple graphs.

Kendo Chart inside bootstrap carousel

I have a question about kendo chart inside carousel.
In this example:
http://dojo.telerik.com/ExoqI
you can see that Kendo chart doesn't redriwe itself when carousel changes slide.
Does anyone has idea how to solve it?
I also try this logic where I check current carousel index and if it is index before chart element then do the logic:
let currentCarouselIndex = $('#myCarousel div.active').index();
console.log(currentCarouselIndex)
if (currentCarouselIndex == 1){ //next slide will be chartanalysis chart
setTimeout(function(){
let chart = $("#chart").data("kendoChart");
chart.redraw();
},50);
$("#myCarousel").off();
}
}
);
but then the problem is when you go first left with left carousel-control, the chart is not redrawn properly.
Any idea how to fix this problem is appriciated :)Thanks!
The Bootstrap carousel slide.bs event returns a relatedTarget telling you which item is loading next. You could use that to check for a particular chart DIV and then redraw that DIV's chart:
$("#myCarousel").on('slide.bs.carousel', function (e) {
var IsChart = $(e.relatedTarget).find("#chart").length > 0;
var IsChart2 = $(e.relatedTarget).find("#chart1").length > 0;
if (IsChart){
setTimeout(function () {
let chart = $("#chart").data("kendoChart");
chart.redraw();
}, 50);
}
if (IsChart2){
setTimeout(function () {
let chart1 = $("#chart1").data("kendoChart");
chart1.redraw();
}, 50);
}
});
DEMO

chart.js onAnimationProgress progress percentage

I want to change the fillColor as the animation occurs. In a way that makes it go from one color to the other, like blue->green.
I've been testing methods and so far I've been able to make the color change, but it's transition is not smooth.
The method currently involves 2 functions:
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
but while using the onAnimationProgress, I can't see a way to see the progress of the animation, like how far along the progress is.
Any ideas?
The onAnimationProgress has 2 parameters easeDecimal and stepDecimal that you can use
var myLineChart = new Chart(ctx).Line(data, {
onAnimationProgress: function (easeDecimal, stepDecimal) {
// stepDecimal proceeds uniformly from 0 to 1
// easeDecimal proceeds depending on the easing function from 0 to 1
console.log(stepDecimal)
}
});
For instance, to change the fillColor - here I just adjust the transparency
var myLineChart = new Chart(ctx).Line(data, {
animationSteps: 200,
onAnimationProgress: function (easeDecimal, stepDecimal) {
this.datasets[0].fillColor = "rgba(120,120,120," + stepDecimal + ")";
}
});

EaselJS SpriteSheet isn't responding to gotoAndPlay

I'm developing a Fez-based HTML5 Canvas game using EaselJS and I've found a problem, that I can't solve myself, while trying to implement SpriteSheets to the hero.
The problem is that I've defined three animations to my hero ("stand", "jump" and "run") and when I try to change from one animation to another using hero.gotoAndPlay("run") or hero.gotoAndStop("stand") the animations don't change, change but show the first frame only or change to the wrong animation.
Can someone help me? What I'm doing wrong and how can I fix it? Thanks.
Here's the relevant JavaScript code I'm using to create the hero Sprite:
var data = {
images: ["http://i.imgur.com/M0GmFnz.png"],
frames: {width:34, height:46},
animations: {
stand:0,
run:[0,12,true,0.25],
jump:13
}
};
var spriteSheet = new createjs.SpriteSheet(data);
var hero = new createjs.Sprite(spriteSheet, "stand");
hero.offset = 4 + 1; // "+1" is important, change the first number only.
hero.regX = hero.offset + 2;
hero.regY = hero.offset;
hero.width = 34 - (hero.offset*2) - 12;
hero.height = 46 - (hero.offset*2);
hero.x = 0;
hero.y = 0;
hero.jumping = true;
stage.addChild(hero);
And the code I'm using to change the animation:
if(!left && !right){ // User isn't pressing left arrow or right arrow
hero.gotoAndStop("stand");
}else{
hero.gotoAndPlay("run");
}
JSFiddle
Official Site
If you are calling gotoAndStop or gotoAndPlay in a tick (or similar) then it will constantly reset to the first frame. You have to ensure you only call these functions one time when the animation changes.
A good way to set this up is to store the current animation, store it, and only change it up if the animation changes. Something like:
var animation;
if(!left && !right){ // User isn't pressing left arrow or right arrow
animation = "stand";
}else{
animation = "run";
}
if (currentAnimation != animation) {
hero.gotoAndStop(animation);
}
This is just an example, but should give you an idea. You should only call these methods one time to kick off an animation.

ExtJS Highcharts Re-Charting Load Mask Hangs

In my code snippet, a Deferred/Promise returns a configured Highchart Chart object named myChart . First time through, my chart is added to a container and everything renders perfectly. However, on subsequent calls where my logic performs a removeAll to refresh the container, my chart renders gray-out with loadMask ("Loading ...") spinning perpetually.
I've investigated the myChart object data for variance and it seems to be stable. I've even attempted to render far more simplified chart objects and in every case the subsequent renderings hang with the loadMask spinning.
Any thoughts on why it might be hanging on all the subsequent calls??
I've read in somewhat-related threads that buffering can be an issue, but I don't think that applies since I am using arrays and using store objects to load the data into the chart.
Thanks in advance for any hints or pointers!
// Set chart data
that._setChartData().then({
success: function( myChart ) {
// Render chart
if (gridContainer.items.length > 0) {
// Remove/Clear container objects ... if exists
Ext.Array.each( gridContainer.items, function( aItm ) {
switch( aItm.itemId ) {
case 'topbox':
break;
case 'buttonBox':
if ( aItm.items.length > 0 ) {
aItm.removeAll( true );
}
break;
case 'sliderBox':
if ( aItm.items.length > 0 ) {
aItm.removeAll( true );
}
break;
case 'chartbox':
if ( aItm.items.length > 0 ) {
aItm.removeAll();
}
break;
}
});
}
that.down('#chartbox').add(myChart);
}
});
I suspect there's a rendering bug, because when i add this to my code (before defining the app), replacing the chart works:
Ext.override(Rally.ui.chart.Chart,{
onRender: function () {
this.callParent(arguments);
this._unmask();
}
});

Categories