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:

• ​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...

---

Data Analysis, Visualisation and Reporting

DeveloperGuidelines