Closed

Javascript Chart Wrapper

This project received 9 bids from talented freelancers with an average bid price of $1231 AUD.

Get free quotes for a project like this
Employer working
Project Budget
$750 - $1500 AUD
Total Bids
9
Project Description

metaVis: a Visualization Wrapper

The Google visualisation api is well thought out, and has much to recommend it - there are however many other great plotting and visualization libraries available (all of which can be used without a connection to Google). Since Google has good abstraction and documentation I would like to produce a javascript library that wraps the google visualization api and allows different backend adapters (one of which is the Google visualization api). To summarise the adaptor will:

- Have a 1:1 api correspondence with the google api as far as possible
- Map calls for a given adapter to translate google api syntax into jqplot, or D3
- Allow for extension so that new visualizations not provided by google can be enabled
- Write this as a jquery plugin

I'm calling this project metaVis.

an example will make this clearer

/**** Original Visualization Playground example ***/

function drawVisualization() {
// Create and populate the data table.
var data = [url removed, login to view]([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', [url removed, login to view], [url removed, login to view], 'North America', 33739900],
['DEU', [url removed, login to view], [url removed, login to view], 'Europe', 81902307],
]);

var options = {
title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};

// Create and draw the visualization.
var chart = new [url removed, login to view](
[url removed, login to view]('visualization'));
[url removed, login to view](data, options);
}

/**** Proposed wrapper example ***/

function drawVisualization() {
// Create and populate the data table.
var data = [url removed, login to view]([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', [url removed, login to view], [url removed, login to view], 'North America', 33739900],
['DEU', [url removed, login to view], [url removed, login to view], 'Europe', 81902307],
]);

var options = {
adaptor:"Google", // set the adapter
// adaptor:"jqPlot", // or might be jqPlot or D3
title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};


// Create and draw the visualization.
var chart = $('#visualization').metaVis("BubbleChart");
[url removed, login to view](data, options);
}

/************** END ************/

The final project must ensure
1) it is a well specified and documented jquery plugin - must use similar patterns as from [url removed, login to view]
2) Make sure it propagate and handles events (such as mouse click) correctly and transparently regardless of the backend
3) Development of adaptors is documented
4) Works with substantial subset of Jqplot as initial adaptor
5) Is coded on github (so that I can watch development).

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online