google_chart

Make charts with Google.

This tag interfaces to the Google chart API to dynamically generate charts.

For example:

{% google_chart type="line" axis={axis position="bottom" labels=["jan","feb","mar"]}
   axis={axis position="left" labels=[0,25,50,75,100]} data=[{data values=[20,80,33]}] %}

Will generate the following image tag:

<img class='google_chart' alt='google chart'
   src='http://chart.apis.google.com/chart?&amp;cht=lc&amp;chts=909090,10&amp;chs=300x150&amp;chg=0,0,1,5&amp;chf=bg,s,ffffff|c,s,ffffff&amp;chdlp=b&amp;chbh=-3,3,7&amp;chxt=x,y&amp;chxl=0:|jan|feb|mar|1:|0|25|50|75|100&amp;chxs=0,909090,10|1,909090,10&amp;chco=&amp;chds=0,100&amp;chd=t:20,80,33&amp;chls=1,1,0'
   width='300' height='150'/>

View the chart.

Google chart accepts the following arguments:

ArgumentDescriptionExample
typeKind of chart is generated. One of “line”, “sparkline”, “stacked_horizontal_bar”, “stacked_vertical_bar”, “grouped_horizontal_bar”, “grouped_vertical_bar”, “pie” or “pie3d”. Defaults to “line”.type=”sparkline”
idThe id of the generated image tag.id=”mychart”
classCSS class of the generated image tag. The class “google_chart” is always added.class=”chart”
styleCSS style attribute for the generated image tag.style=”border: 1px solid #fcc”
titleTitle shown on the chart.title=”Browser shares”
colorColor for the title. Must be in hexadecimal, defaults to “909090”.color=”ffcc00”
font_sizeFont size in pixels for the title. Defaults to 10.font_size=12
widthWidth of the generated chart. Defaults to 300.width=450
heightHeight of the generated chart.height=200
grid_xX axis grid step size.grid_x=10
grid_yY axis grid step size.grid_y=10
grid_line_lengthLength of line segment for the grid lines, defaults to 1.grid_line_length=1
grid_blank_lengthLength of gaps in the grid lines, defaults to 5.grid_blank_length=5
background_colorBackground color for the complete chart. in hexadecimal, defaults to “ffffff”.background_color=”331133”
chart_colorBackground color for the chart area. In hexadecimal, defaults to “ffffff”.chart_color=”113311”
legend_locationWhere the legend is placed. One of “top”, “left”, “bottom” or “right”. Defaults to “bottom”.legend_location=”right”
axisDescription of an axis. You can given more than one axis argument. See the section Axis styles and labels below.
dataThe data to be shown. You can give more than one data argument. See Data definition below.
bar_spaceSpace in pixels between the bar of a bar chart. Defaults to 3.bar_space=5
bar_group_spaceSpace in pixels between the groups of bars of a bar chart. Defaults to 7.bar_group_space=10

Axis styles and labels

Axis styles and labels are available for line charts and bar charts.

An example for an axis argument is:

axis={axis font_size=10 color="909090" position="top" labels=["jan", "feb", "mar"]}

This defines an axis that will be displayed above the chart. It has three labels and will be displayed in a 10 pixel font with color “909090”. You can give a multiple axis arguments and also a list of axes for each argument.

Valid arguments for an axis are:

ArgumentDescriptionExample
font_sizeSize of the labels in pixels. Defaults to 10.font_size=12
colorColor for the label texts, in hexadecimal RGB. Defaults to “909090”.color=”cc0000”
positionWhich axis is defined. One of “top”, “right”, “bottom” and “left”. Defaults to “top”. You can have multiple definitions for a position.position=”bottom”
labelsA list with labels displayed. The labels will be evenly distributed over the axis.labels=[2006,2007,2008\]

Data

All data definitions to be displayed. Each data definition is a record with arguments. You can supply all data sets at once or with multiple data arguments.

Example with one data set:

data=[{data line_width=1 min_value=1 max_value=100 values=[10,20,42,34,68,73,80]}]

Valid arguments for a data record are:

ArgumentDescriptionExample
line_widthThe width of the line in pixels. Defaults to 1.line_width=2
line_lengthLength of line segment in pixels. Defaults to 1.line_length=1
blank_lengthLength of blank segment in pixels. Defaults to 0.blank_length=1
min_valueThe minimum value for the data set, used for the axis. Defaults to 0.min_value=-100
max_valueThe maximum value for the data set, used for the axis. Defaults to 100.max_value=100
colorThe color used for this data set. Hexadecimal RGB value.color=”ffcc00”
legendLabel for the dataset as shown in the legend.legend=”monthly sales”
valuesThe values for drawing the chart. Must be a list.values=[0,10,5,8\]

See also

tags chart_pie and chart_pie3d.

Edit on GitHub

droppable Tags inplace_textbox

Referred by

chart_pie

Show a pie chart.