Help:Google Charts:Lines

From Twilight Wiki

Contents 1 Lines 1.1 Setting the Y-Axis 1.2 Showing multiple data-lines 1.3 Putting Labels on the Y-axis 1.4 Putting Labels on the X-axis 1.5 Adding a legend to the chart 1.6 Putting a grid under the chart

Lines

To draw line charts, put the data to show between <lines> and </lines>. Just put one value per row.

The following example code:

<lines title="Site Visitors">
5345
3452
7843
</lines>

Would generate:

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):

<lines title="Site Visitors" ymin=0 ymax=8000>
5345
3452
7843
</lines>

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:

<lines title="Site Visitors" ymin=0 ymax=8000>
4115,1230
2541,911
5410,2433
</lines>

To separate the data lines in a better way you can set the color of each line:

<lines title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00>
4115,1230
2541,911
5410,2433
</lines>

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:

<lines title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 ylabel=4>
4115,1230
2541,911
5410,2433
</lines>

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:

<lines title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 ylabel=4 xlabel>
Oct,4115,1230
Nov,2541,911
Dec,5410,2433
</lines>

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.

<lines title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 ylabel=4 xlabel legend>
   ,EU  ,US
Oct,4115,1230
Nov,2541, 911
Dec,5410,2433
</lines>

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!

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 both X- and Y-axis:

<lines title="Site Visitors" ymin=0 ymax=8000 colors=FF0000,00FF00 ylabel=4 xlabel legend grid=xy>
   ,EU  ,US
Oct,4115,1230
Nov,2541, 911
Dec,5410,2433
</lines>