= Developer Guidelines for SVG Charts =

We have a basic SVG codec for exporting Admin Boundaries as files suitable for use on Location Profile pages:
* modules/s3/codecs/svg.py

We also include the !SaVaGe library for creating [http://en.wikipedia.org/wiki/SVG SVG] charts.

This is stored in {{{modules/savage}}}

There is a custom RESTful method in {{{models/00_utils.py}}}: {{{s3_barchart()}}}

So, you can call URLs like:
 * http://127.0.0.1:8000/eden/cr/shelter/barchart.svg?value=capacity

You can view these svg graphs in in a webpage using an <object> tag. So:
 * <object data="http://127.0.0.1:8000/eden/cr/shelter/barchart.svg?value=capacity" width="600" height="400" />

== Parameters for the S3XRC method ==

The URL requires a single parameter:
 * '''value'''  Specifies which field of the resource contains the value to graph

The URL takes a number of optional parameters to make graphs more presentable:
 * '''name'''  Specifies which field of the resource is used to label bars on the x axis of the graph
 * '''start'''  The first record in the set to graph (start=2 will not graph first record in the set)
 * '''limit'''  The number of records in the set to graph
 * '''settings'''  A JSON object of settings to change the appearance of the graph (ie settings={"barColor": "0A0AE0"})

You '''start''' and '''limit''' to keep the number of bars manageable. If resource set contains too many records, you may need to limit your results to get a meaningful graph.

== Settings ==

There are  number of settings that you can use to change the appearance of bar graph. The format is settings={"settingName1": "settingValue1", "settingName2": "settingValue2", ...}
Some available settings and the type of parameter they take :
 * '''barColor'''  ''hex color (ie 00AAEE)'' - The color of the bars
 * '''barWidth'''  ''float'' - The relative width of each bar
 * '''barSpacing'''  ''float'' - The relative spacing between bars
 * '''xAxisSpace'''  ''float'' - The spacing between the canvas and the x axis
 * '''yAxisSpace'''  ''float'' - The spacing between the canvas and the y axis
 * '''xAxisTextHeight'''  ''float'' - The height of the x-axis text
 * '''yAxisTextHeight'''  ''float'' - The height of the y-axis text
 * '''canvasBorder'''  ''boolean'' - If a border is drawn around the canvas
 * '''canvasBorderWidth'''  ''float'' - The width of the canvas border
 * '''canvasBorderColor'''  ''hex color'' - The color of the canvas border
 * '''More coming soon...'''

----
[wiki:BluePrint/Reporting Data Analysis, Visualisation and Reporting]

DeveloperGuidelines