times / axisjs

Open source framework for creating simple interactive graphs

AxisJS

2014 Ændrew Rininsland for The Times and Sunday Times

AxisJS is a light Angular-based app for generating charts. It combines with the AxisWP WordPress plugin to add rich charting capabilities to WordPress.

Live demo of AxisJS here

AxisJS is built atop the Yeoman Gulp-Angular generator and currently makes use of C3 to build charts.

AxisJS owes a huge debt of gratitude to Quartz's ChartBuilder, from where much of the PNG/SVG output code is taken (in addition to some of the interface design). However, Axis is more extensible and intended to be used for online interactive graphics.

Bower

bower install axisjs

Project goals

1. Enable easy integration of various D3-based frameworks into a simple interface
2. Enable a wide array of data input methods
3. Be modular enough to allow charting frameworks to easily be replaced
4. Allow for straight-forward customisation and styling
5. Allow for easy integration into existing content management systems
6. Allow journalists to easily create charts that are embeddable across a wide array of devices and media

To build

1. npm install
2. bower install
3. gulp build

Modifying

The source is in the src/ folder, which gets built to dist/ when you do gulp build. When working on it, run gulp serve to invoke a light HTTP server that auto-reloads the page when you save a file. Styles are in Sass at src/app/index.scss.

Contributing

Please do a new feature branch when forking and squash your commits before making a pull request. Pull requests welcomed and encouraged. I especially welcome any documentation or unit testing PRs!

API Docs

Inline documentation is in ngDoc format and gets built to docs during gulp build. View API docs online here.

Roadmap/ToDos

• Abstract chart configuration into a provider so that app/scripts/directives/buildchart.js and app/scripts/directives/exportchart.js aren't so tightly bound to C3
• ALL the unit tests
• Documentation and cleanup of buildchart.js and exportchart.js
• Abstract each output format into factories so more can be modularly added
• Abstract out vendor functionality — i.e., make the colour picker replaceable
• Create an external config file with settings like colour scheme
• Improve inline documentation
• Make adding categorical axes more straight-forward
• Create adapters for nvd3 and other SVG-based charting libraries.
• Componentise so it can be easily dropped into any CMS or app

Contributors

Lead developer: Ændrew Rininsland (@aendrew)

Design contributions

• Ben Rixon (@WiseOgre)
• Samantha Boelhouwer (@mataulvr)

axisjs's Issues

Charts are not scrollable if interaction is enabled in C3

See c3js/c3#798. I may supply a custom build of C3 to axisJS to get around this issue.

Add unit tests for WordPressService, inputService, outputService

Add the ability to produce Stacked Bar Charts

http://c3js.org/samples/chart_bar_stacked.html

Add toggle controls

One thing DataWrapper does is it allows one to break data into two views that the user can tab between. axisJS currently assumes the user wants ALL the data in a single chart.

Considerations:

• What impact would this have on the print output? I.e., how do you represent two charts if one is hidden?
• What additional code would this add to things like the CMS and WordPress outputs?

Bower.json doesn't point to dist (Credit: @rexmondo)

If installing axisJS via bower as a dependency, wiredep tries to include the non-existent app/scripts/main.js when it should be dist/scripts/scripts.js. Credit to @rexmondo for noticing it!

configProvider broke all the tests

Boo.

Long titles extend off the edges

Regression: gauge charts

Gauge charts are no longer working.

Abstract styling configuration into a provider

The x/y/y2 axis controls are borked

Part of a regressive change I made yesterday, I've broken all the axis controls. :(

Ability to export PNG with white background

It'd be great to have an optional toggle for a white background on the charts. When we tweet the charts the Twitter mobile app uses a black background, meaning we're having to manually add white backgrounds to the chart image.

Abstract output formats into a provider

Default to tab for delimiter

Excel and Google Sheets both copy data to clipboard as TSV. If the header row (or elsewhere) has a comma in it (I.e., some sort of long poll question like "The PM should try to reduce the bill, but if unsuccessful, should still pay"), PapaParse will fail miserably.

Given neither Excel nor Sheets has an option to auto-string delimit text, one solution might be to force PapaParse to assume tab-delimited by default.

Create wiki pages for documentation

There currently is zero documentation. This is a serious blocker for 1.0.0.

Add a tick count option

"Know what's cooler than a hundred thousand data points? A MILLION DATA POINTS."

Add the ability to produce Bar Charts

http://c3js.org/samples/chart_bar.html

Legend is off-centre

I may just be trippin', but it seems the legend is just slightly off-centre from the chart. Might be more of a C3.js issue.

Datasets with only one line fail

Abstract charting library functionalities into a provider

Add positioning and design options for the titles

I initially opted for just having them centered and properly scaled, but thinking about it now, they could use some config options (colour, position, font, size, etc.).

configProvider needs some tests

Yep yep yep.

Create configuration for colour selectors; use ng-options to populate select lists

Unnecessary white space below chart on PNG output

Not sure on specific cause but certainly happens when there's no title, source or caption (as is often the case).

Outputting SVG for print

The ability to output charts to SVG for print use

• number of columns needs to be specified
• height needs to be specified
• more details to be collected from Jenny Holly (ST) and Matt Swift (TT)

Add C3 default colours to sorter

There aren't enough colours. NEED MOAR COLOURZ

Add accuracy settings for circular charts

The circular charts need to be able to set percentage accuracy. The changes made for #3 are throwing Uncaught TypeError: Cannot read property 'toFixed' of undefined.

Add ability to insert watermark/logo

The charts are getting copied and shared on Twitter, would be great to have an optional watermark of The Times or Red Box on them.

Add traditional colour picker for power users

Even though one the design considerations was to prevent users from picking colours willy-nilly (and thus stay within the publication stylesheet), this is less of a consideration for power users and people outside NewsUK using it in an open source capacity.

Thus, some sort of "power user mode" (activated by Konami code, perhaps?) enabling full colour pickers might be helpful. Probably needs a bit more thought before implementing...

Maximum doesn't seem to work

While the minimum control's fine, the maximum just tends to push everything left, oddly.

Right axis isn't reflecting data

I think it just needs to be attached to columns. Or it's a C3.js bug. Reported by ProdOps as issue 1267081.

Add error handling to input parsing

PapaParse is adding error data columns; some error handling is needed.

Hide inactive axes config options

The config for the various axes takes up quite a lot of space. Disabled fieldsets should be hidden.

Add vertical axis charts

Some comparison charts work better if the bars are flowing vertically instead of horizontally. C3 can probs do this. Probs.

Deal with empty fields in spreadsheets

Empty fields default to "0", which may be undesirable.

We need a logo

Seriously, the whole "orange thatched background" thing is getting ridiculous.

PNG output not working in Safari

Worth reviewing the blob API code from CB.

Regression: SVG output seems to be broken

Illustrator complains "Clipping will be lost on roundtrip to Tiny", and then nothing displays except the legend and titles. Chrome displays fine, http://validator.w3.org/check fails with two issues.

Update: W3C validator checks out if I remove the bits it spots. However, it still does not load in Illustrator.

Abstract input formats into a provider

Fixing regressive bug with categorical axes

E.g. adding 'Boris' and 'Farage' along the bottom instead of '0' and '1'

Embed code output loses formatting callbacks

Should probably be stored as a string and eval'd once exported.

Add 'Get the Data' link to output à la Datawrapper

Legend is too close to chart when bottom axis hidden

Seems like a C3.js bug, need to confirm that.

Pre-set style settings

A user should be able to choose a Title and a Section and the fonts / colours available should change to reflect pre-set styles

Add PivotTable.js functionality

It would be totally ballin' to have built-in pivot tables. See:

https://github.com/nicolaskruchten/pivottable
http://nicolas.kruchten.com/pivottable/examples/

Implement Handsontable as an input format

http://handsontable.com/

Titles are off-centre when served in iframe

The canvas-resizing code isn't working properly when surfaced in an iframe (i.e., in the WordPress plugin).

UKIP and Greens need a colour

Apparently we forgot a party. How sad.

rgba(114, 40, 137, 1)

Embed code output is breaking scope

For some reason, after clicking "Generate embed code", the scope only digests if the viewport is resized.

Add ability to change legend position

Apparently you can change the legend position in C3; this would make a nice additional feature.

Write a test for embedOutput.js

Right now, the only way to get interactive charts out of axisJS is to use the WordPress plugin. For the 1.0.0 release, a helpful feature would be a JavaScript embed code output, in addition to a JSON config output. These should be encapsulated into services as per project best practices.