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