How to make a contract/expand effect
Summary: A guide for making a Contract/Expand transition effect between different charts.
textAccessible
option -
though there is a CSS effect that does something very similar
.
This HOWTO document shows you how to create a transition effect between two charts using the Contract and Expand effects. The code for it is shown below.
The process is reasonably simple - each button triggers a function that
Hides the current chart (whatever it may be) using the
Contract effect. The Hide()
function is passed a function
that shows the other chart. This function is passed as a callback
to the Contract effect (the function to show the new chart is run
after a 250ms delay).
Throughout this, the buttons are enabled/disabled when appropriate so that they don't inadvertently trigger the effects again.
1. The necessary HTML
This is the HTML required to get the canvas tag and the buttons to switch between the two charts. Both charts are drawn on the same canvas - so it is necessary to reset the canvas when showing a new chart so that old charts don't show up.
<div> <div style="display:inline-block; overflow: hidden; width: 650px; height: 250px"> <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> <div><br /> <div style="text-align: center"> <button onclick="hide(showBarChart)" disabled="disabled">Bar</button> <button onclick="hide(showLineChart)" disabled="disabled">Line</button> </div> </div>
2. The JavaScript code
This is the JavaScript code that is used to display and switch between the two charts.
<script> // Disable both of the buttons function disableButtons () { var buttons = document.getElementsByTagName('button'); for (var i=0; i<buttons.length; ++i) { buttons[i].disabled = true; } } // Enable both of the buttons function enableButtons () { var buttons = document.getElementsByTagName('button'); for (var i=0; i<buttons.length; ++i) { buttons[i].disabled = false; } } // Hides the canvas using the Contract effect function hide (callback) { var canvas = document.getElementById("cvs"); var obj = canvas.__object__; // Disable the buttons so they can't be pressed again disableButtons(); // Hide the canvas: Draw the new chart (either the bar or line chart) and Expand it obj.contract(null, function () { var obj = callback(); setTimeout(function () {obj.expand({bounce: false}, enableButtons);}, 250) }); } // Show the Bar charts function showBarChart () { var canvas = document.getElementById("cvs"); // Reset the canvas RGraph.reset(canvas); // Draw the Bar chart var bar = new RGraph.Bar({ id: 'cvs', data: [84,85,86,-41,-52,-84,84], options: { xaxisPosition: 'center', xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], textAccessible: false } }).expand({bounce: false}, enableButtons) return bar; } // Show the line chart function showLineChart () { var canvas = document.getElementById("cvs"); // Reset the canvas RGraph.reset(canvas); // Draw the line chart var line = new RGraph.Line({ id: 'cvs', data: [4,8,6,5,3,2,1], options: { xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], textSize: 14, linewidth: 5, tickmarksStyle: null, marginInner: 15, shadow: false, textAccessible: false } }).expand({bounce: false}, enableButtons) return line; } // Initially the canvas is blank so there is no need to clear anything. So it is sufficient to // just call the relevant function to show the first chart. window.onload = (function () { var bar = showBarChart(); }); </script>