Graphs are a good way to visualize patterns in your data. ToolZ has two different methods for generating graphs. This section contains several examples of graphs that can be created with ToolZ, using either method.
Graphing Service
ToolZ makes use of our graphing service to provide many graphing options. It uses Fusion Charts to display animated graphs online and Google to display similar graphs in Print and PDF modes.
Generating graphs this way is quite simple but your graphing options are limited to what our API supports.
For more extensive documentation on the graphing service’s API, see the graphing docs.
#graphs must be surrounded by {|GRAPH|} {/|GRAPH|}{|GRAPH|}
#indicates what type of graph to create
graph/t/[graph type]
#indicates the desired width of the graph
/w/[width in pixels]
#indicates the desired height of the graph
/h/[height in pixels]
#title of the graph - should be urlencoded
/n/[graph title]
#graph data, comma-delimited
/d/[graph data]
#y axis labels, comma-delimited
/l/[graph labels]
#required for the graphing service to authenticate
?apikey={CONFIG.PDF_API_KEY}
{/|GRAPH|}
HighCharts
HighCharts is a JavaScript graphing library. It provides very fine-grained control over your graphs but can be more complex to setup. The full HighCharts documentation can be found here.
HighCharts renders in both onscreen and Print/PDF mode, meaning there will be no difference in the look of your graphs in the different modes.
#highcharts must be within a container<div id="my-graph">
#highcharts must be surrounded by {|HIGHCHARTS|} {/|HIGHCHARTS|}
{|HIGHCHARTS|}
#we supply highcharts options in json, so we need to start our json with a {
{
#all text settings should be enclosed in quotes
"chart": {
"type": "bar"
},
"title": {
"text": "Graph Title"
},
#categories are our x axis labels
"xAxis": {
"categories": ["Category 1", "Category 2", "Category 3"]
},
"yAxis": {
"title": {
"text": "Y Axis Title"
}
},
#supply your data with series. multiple series will create multiple sets of bars.
#series names will display in a legend
#to make sure labels with quotes don't cause issues, use HC_SAFE_STRING
#to make sure data with null values doesn't cause issues, use HC_SAFE_NUMBER
"series": [{
"name": "Series 1",
"data": [1, 2, 3]
}, {
"name": "Series 2",
"data": [3, 2, 1]
}],
#series names will display in a legend
"credits": {
"enabled": false
}
#end our json with a }
}
{/|HIGHCHARTS|}
</div>