Help:Google Charts:Bars
From Twilight Wiki
Contents |
Bar Charts
To draw bar-charts, put the data to show between <bars> and </bars>. Just put one value per row:
If you put this code in a page:
<bars title="Site Visitors"> 5345 3452 7843 </bars>
Note: There is an autofit scaling of the Y-Axis by default. This is why you see only 2 bars - the middle value is drawn as as bar with height zero. Especially for bar-charts it is handy to set the Y-Axis manually!
Setting the Y-Axis
By default the Y-Axis gets autoscaled by finding the greatest and the smallest value of all given data. If you would like to set the Y-Axis manually you can do so by using ymin and ymax (You don´t have to use both values):
<bars title="Site Visitors" ymin=0 ymax=8000> 5345 3452 7843 </bars>
Showing multiple data-lines
You can show multiple data lines in a chart if you put multiple values separated by a colon in each row. To separate the data lines in a better way you can set the color of each line using the colors-parameter:
<bars title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00> 4115,1230 2541,911 5410,2433 </bars>
If you would like to show the data-lines stacked rather than side by side add the stacked-parameter:
<bars title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked> 4115,1230 2541,911 5410,2433 </bars>
Putting Labels on the Y-axis
To get an idea about the value of each data-point, put labels on the Y-axis. This puts 4 labels on the Y-axis:
<bars title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4> 4115,1230 2541,911 5410,2433 </bars>
Putting Labels on the X-axis
If you add the xlabel-parameter to the chart, the first column of the given data is handled as labels for the X-axis:
<bars title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel> Oct,4115,1230 Nov,2541,911 Dec,5410,2433 </bars>
Adding a legend to the chart
Especially for charts with multiple data lines you should add a legend to it. This can be done with the legend-parameter and putting the labels for the legend in the first row of the content.
<bars title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend> ,EU ,US Oct,4115,1230 Nov,2541, 911 Dec,5410,2433 </bars>
Note: As you see in the example, if you also have labels on the X-axis, the first column of the first row is empty!
Drawing horizontal bars
You can add the horizontal-parameter to change the bar-orientation:
<bars title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal> ,EU ,US Oct,4115,1230 Nov,2541, 911 Dec,5410,2433 </bars>
Note: By using horizontal the whole chart is flipped by 90 degrees, so the ylabel puts labels on the X-axis in fact!
Putting a grid under the chart
It is easier to compare values if you put a grid under the chart. You can put lines for one axis only or for X- and Y-axis. Bars look nice with lines only on the Y-axis:
<bars title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 stacked ylabel=4 xlabel legend horizontal grid=y> ,EU ,US Oct,4115,1230 Nov,2541, 911 Dec,5410,2433 </bars>