Skip to content

Instantly share code, notes, and snippets.

@tcosentino
Created September 18, 2013 20:33
Show Gist options
  • Save tcosentino/6615236 to your computer and use it in GitHub Desktop.
Save tcosentino/6615236 to your computer and use it in GitHub Desktop.

####Charts Development


#####Session ID It was not clear to me where this is to come from. Grep'ing for it on the source revealed a lot of hard coded versions of it. For the moment, it is hard coded at the top of charts.render.

#####URL Roots (Chart-Server/Chart-Images) There are currently two hard coded url roots. My assumption is these will be handled by some type of configuration file. Has this been defined as yet?

#####CSS: Created charts.scss with two simple classes. I noticed percentages are used for width/height and a default for float (left) is defined. Is this sufficient for the charts, in which case we can delete the charts.css altogether.

The class 'charts-pane' provides nothing more than a definitons for float (left) and both width and heght (100% each). If the height/width is to be functionaly driven (which does not appear to be the case) a second class would be used for the height/width, as specified next, and

Originally I had included a pixel based width class, 'median-pane', but you are using percentages, so I removed it.

#####Titles and Labels Currently the web-service allows for one or more titles attached to each series of data in the dataset. In addition, support needs to be added for lables, one for each data point in a dataset.

A simple example would be a pie chart of the GNP for six countries. The title of the series would be GNP while the labels for each pie slice would be the names of the countries.

Currently the params includes a param array - '&labels=0:label1;1:label2' - whiich provides the titles for the individual series (which in most cases the title of the chart).

Proposal Add an additional parameter such that:

'titles=0:title0;1:title1'

and

'labels=0,0:label0;0.1:label1;1,0:label3;1,1:labl4'

This would allow for series/chart titles and point labels.

####Dashlets and Templates There are currently three dashlets, the render method of each converts the json collection into the necessary points, labels and titiles and makes the call to the charts.render method. Currently the pie dashlet is the only one used.

Each of the three dashlets refers to the same template, which does nothing more than defines the container for the chart object.

######Adding support for additional chart types As the dashlets are responsible for converting the json collection into the appropriate points, titles, labels and type, support for a new chart type would be using a dashlet.

Note The two additional dashlets are for vertical bar and horizontal bar charts. We can handle this by passing VBAR and HBAR as the type to the chart-server and let the server determine from the type how to proceed. Another option is to passin a series param with the others, and this can have options for that series.

####charts.js Placed in scripts/utitlity.

With the web service, this currently does very little work. Takes the given points, labels, titles and chart-type and builds the params, appends the params to the charts-server url root and executes the ajax call.

Upong a successful return, it replaces the specififed node with the contents from the url computed from combining the chart-images url root with the url fragment returned from the webs service.

Note If you look closely sereis and titles are passed in to the render function. Titles are actually passed to the chart-server as part of the request using the lables params. Once a decision is made above concerning titles/labels, this can be cleared uo.

Note One last thing - SVG is hardcoded at the moment, but it can be easily modifief if there is a mechanism to modify it. Such as an image for export.

####MORE TO COME 1 Image Maps/Interactivity 2 Enhance Chart Types Support

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment