An animated Bar chart
This is a grouped Bar Bar chart
with two bars per group which uses red and blue
graduated fills. The background grid has been customised and the background
itself is a dark color (so the text has been changed to white). Also, the
chart is using the Bar chart
wave
effect. This grows sequentially from
the left-hand-side with a small delay between each group of bars.
The two gradients that are used here (Gradient(white:#ccf:#ccf:#ccf:#ccf)
and Gradient(white:#faa:#faa:#faa:#faa)
)
are created by using the RGraph specific gradient syntax. This is an easy way
to produce gradients (it's certainly easier than the canvas
api
method!) and
can be utilised to produce gradients for your own charts.
If you wanted to add further information to the chart to identify
the meaning of the two bars you could add a key in either the graph
or margin
modes or you could perhaps use the labelsAbove
option.
For smaller screens, the responsive
function reduces the size of the chart,
reduces the size of the text on the chart and reduces the size of the margins.
This demo shows the new highlighting style - invert
. This reverses the
highlighting from adding a rectangle over the focused bar to adding rectangles to every
rectangle except the focused bar.
The tooltips have no fade effect and are positioned at the top right of the canvas
tag by using
the tooltip
event. This runs a snippet of code that gets the canvas
tag x/y
coordinates and sets the position of the tooltip accordingly.
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="500" height="250" style="background-color: #333; border-radius: 5px; box-shadow: 2px 2px 2px #999; float: right">[No canvas support]</canvas> <!-- Center align the tooltip key --> <style> /* * .RGraph_tooltip table { * margin-left: auto; * margin-right: auto; * } */ </style>This is the code that generates the chart - it should be placed AFTER the
canvas
tag(s):
<script> // This is the data that gets displayed on the Bar chart. It's a // 2D array so that a grouped Bar chart can be shown. A 2D array // is also how you show a stacked chart but you have to also specify // the grouping configuration property. data = [[45,56],[75,32],[39,47],[34,48],[46,47],[48,52]]; // Create the Bar chart and pass it the data bar = new RGraph.Bar({ id: 'cvs', data: data, options: { shadow: false, colorsStroke: 'rgba(0,0,0,0)', grouping: 'grouped', // Use the RGraph specific syntax for gradients colors: [ 'Gradient(white:#ccf:#ccf:#ccf:#ccf)', 'Gradient(white:#faa:#faa:#faa:#faa)' ], // No vertical background grid lines or border backgroundGridVlines: false, backgroundGridBorder: false, textColor: 'white', xaxisLabels: ['2007','2008','2009','2011','2012','2013'], marginTop: 15, marginRight: 5, xaxis: false, yaxis: false, // These configuration properties make up the tooltips using the // new formatted tooltips feature and the tooltipsCss property. myNames: ['Peter','Charles'], tooltips: 'Sales results in <span style="font-size: 14pt;font-style:italic">%{property:xaxisLabels[%{dataset}]}:%{key}', tooltipsFormattedKeyColors: ['#aaf', 'pink'], tooltipsFormattedUnitsPre: '$', tooltipsFormattedUnitsPost:',000,000', tooltipsPointer: false, tooltipsPositionStatic: false, tooltipsCss: { fontSize: '16pt', border: '5px solid #666', textAlign: 'left', pointerEvents: 'none', }, tooltipsEffect: 'none', tooltipsEvent: 'mousemove', // Use the newer highlight inverting so that the bars that aren't highlighted // are faded out. highlightStyle: 'invert', highlightFill: 'rgba(0,0,0,0.5)' } // The wave() effect is used to show the chart }).wave().responsive([ {maxWidth: null, width: 500, height: 250, options: {textSize: 16, marginLeft: 35, marginBottom: 35}}, {maxWidth: 900, width: 300, height: 150, options: {textSize: 10, marginLeft: 25, marginBottom: 20}} // This tooltip event code runs when a tooltip is shown and positions the tooltip at the top of, // and on the left of, the canvas. ]).on('tooltip', function (obj) { // Get a reference to ths canvas var canvas = obj.canvas; // Use the RGraph API to get the canvas coordinates var canvasXY = RGraph.getCanvasXY(obj.canvas); // Get the tooltip DIV tag object from the RGraph Registry var tooltip = RGraph.Registry.get('tooltip'); // Set the x/y coordinates of the tooltip DIV tag tooltip.style.top = canvasXY[1] - (tooltip.offsetHeight / 2) - 5 + 'px'; tooltip.style.left = canvasXY[0] + canvas.width - tooltip.offsetWidth - 5 + 'px'; }); </script>