CombinedChart Animations


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Jeff on 29th December 2015
I looked around the documentation for CombinedChart but I cant find any documentation on adding animations to these charts. I have two bar charts and one line graph. I would like the bars to grow and the line to trace2.

Thanks



var bar1 = new RGraph.Bar({
  id: 'cvs',
  data: barData1,
  options: {
   xaxispos: 'center',
   grouping: 'grouped',
   labels: labels,
   textAngle: 45,
   colors: ['Gradient(white:green)','Gradient(red:white)'],
   gutterLeft: 50,
   gutterBottom: 150,
   key: ['Opened','Closed'],
   keyColors: ['green','red'],
   keyPosition: 'gutter',
   keyPositionX: canvas.width - 300,
   keyPositionY: 18,
   keyPositionGutterBoxed: true,
   backgroundGrid: true,
   tooltipsEvent: 'onmousemove'
  }
});

var bar2 = new RGraph.Bar({
  id: 'cvs',
  data: barData2,
  options: {
   xaxispos: 'center',
   grouping: 'grouped',
   labels: labels,
   textAngle: 45,
   backgroundGrid: false,
   colors: ['Gradient(red:white)','Gradient(white:green)'],
   gutterLeft: 50,
   gutterBottom: 150,
   keyColors: ['green','red'],
   keyPosition: 'gutter',
   keyPositionX: canvas.width - 300,
   keyPositionY: 18,
   keyPositionGutterBoxed: true,
   tooltipsEvent: 'onmousemove'
  }
});

var maxBar = bar1.get('ymax');
var line = new RGraph.Line({
  id: 'cvs',
  data: lineData,
  options: {
   xaxispos: 'center',
   ymax: maxBar,
   backgroundGrid: false,
   backgroundGridVlines: false,
   backgroundGridBorder: false,
   colors: ['black'],
   gutterLeft: 50,
   gutterBottom: 150,
   ylabels: false,
   noaxes: true,
   tickmarks: 'circle',
   spline: false
  }
});
var combo = new RGraph.CombinedChart(bar1, bar2, line);
combo.draw();
Posted by Richard on 29th December 2015
Hi,

Using animations with the CombinedChart object is tricky since the effects are object member functions - but what you can do is modify the CombinedChart .draw() function to something like this:

/**
* The Draw method goes through all of the objects drawing them (sequentially)
*/
RGraph.CombinedChart.prototype.draw =
RGraph.CombinedChart.prototype.Draw = function ()
{
     for (var i=0; i<this.objects.length; ++i) {
         if (this.objects[i].type === 'bar') {
             this.objects[i].wave();
         } else if (this.objects[i].type === 'line') {
             this.objects[i].trace2();
         } else {
             this.objects[i].Draw();
         }
     }
};

It's located in the RGraph.bar.js file, close to (or at) the bottom. So replace the existing .draw() function with the above.

Note though that this will use those effects for *all*combined charts.




Richard
Posted by Richard on 30th December 2015
Hi there,

Not so ticky after all - from the next release you'll be able to set the combinedchartEffect option to the name of the effect you want and it will use that. For example:




var bar = new RGraph.Bar({
     id: 'cvs',
     data: [4,6,3,5,8,4,9],
     options: {
         combinedchartEffect: 'wave'
     }
})

var line = new RGraph.Line({
         id: 'cvs',
         data: [25,13,46,15,26,30,3],
         options: {
             combinedchartEffect: 'trace2'
         }
     }
})

var combo = new RGraph.CombinedChart(bar, line);
combo.draw();







Richard
If RGraph has helped you - please share the website and give your feedback - thanks:

www.rgraph.net/testimonials

Add a reply

 




« Back to message list
RGraph on social media