wiki:DeveloperGuidelines/SVG

Version 5 (modified by Fran Boon, 8 years ago) ( diff )

--

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:

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

Note: See TracWiki for help on using the wiki.