Employing dynamic data for graphs

Question

I am aiming to build a site that will contain a lot of user generated data, hopefully. I'm in my first year of self learning programming: Python, Django, MySQL, HTML and Javascript.

I can chart dummy data on a table just fine, but I'm now looking at turning that data into nice colorful looking graphs.

I am in my first day of investigation into finding out how to do this. But before I continue, I would like to ask a few questions.

There seems to be many JavaScript frameworks for building charts, such as Google charts and jquery charts, and some object orientated programs for building charts, such as Cairo Plot and matplotlib.

The Javascript frameworks seem initially like a nice easy way to do it. However, whereas with tables, where you can enter variable data tags in the body of an HTML page, and have Javascript make it look pretty, the data of a graph goes in the scripting area, where the variable data tags don't quite seem to work the same way. I'm using Django, so a variable tag looks like:

{{ uniquenum }}   

Q1. Should this work and am I just doing it wrong, or am I right in thinking variable tags can't go in the scripting area?

Q2. Can you have Javascript frameworks produce graphs from data outside the <script> area?

Q3. I've read that Javascript frameworks are getting more powerful, but because I'll be potentially using large amounts of dynamic data, should I be concentrating on using OO style graph programs like Cairo Plot and matplotlib, which to me don't seem to have the same levels of support?

Just looking for a nudge in the right direction.

Answer 1

How are the plots (typically) placed on the web page?

Here's the usual API schema for javascript-based data visualization libraries:

i. pre-allocate a div as the chart container in your markup (or template); typically using an id selector using an id selector, like so:

<div id="chart1"> </div>

Often these libraries also require that this container be pre-sized--styled with height and width properties e.g.,

<div id="chart1" style="height:300px;width:500px; "></div>

HTML5 libraries are particular about the container--i.e., they require the chart to be placed inside the canvas tag, e.g.,

ii. call the plot constructor from your included javascript file and pass in (i) a data source; (ii) aesthetic options (e.g., axis labels), and (iii) the location in your markup of the container that will hold the plot; this location is usually expected to be in the form of an id selector. So in jqplot for instance inside the jQuery ready event,

plot1 = $.jqplot('chart1', [dataSet1, dataSet2], chartOptions)

---

javascript-based data visualization libraries i recommend (based on having used each for multiple projects).

I. conventional plotting formats: bar, line, point, pie

Among javascript plotting libraries, i recommend the jQuery-based options because you need less code to create yoru plots and because it's easier to use jQuery's AJAX methods to load your data, for instance, jqplot, flot, and HighCharts (the three libraries that i recommend below) all include in their basic distribution, complete (html, css, js) example plots that demonstate loading data via AJAX.

• HighCharts (open source but requires paid license for commercial use, but the most polished and longest feature list; active and fairly high signal-noise ratio forums on the HighCharts Site)

• flot (perhaps the most widely used)

• jqplot (large selection of plot types, highly modular, e.g,. most functinality beyond the basics is added one plugin at a time)
  
  

II. graphs, trees, network diagrams, etc.

• d3 (the successor to protovis; stunning graphic quality, rich interactive elements, animation; not strictly jQuery-based, but the author clearly borrowed the basic syntax patterns from jQuery; excellent tutorials on d3 by an accomplished data visualization specialist, Jan Willem Tulp Unlike the others mentioned here, this is a low-level library; indeed there are (at least) several plotting libraries based on d3, e.g., rickshaw by shutterstock, and cube by Square. If you want conventional x-y line/bar plots then for instance, you can build your plots in e.g., HighCharts much faster. D3 becomes more interesting as use cases become more specific--in particular animation and unorthodox visualization (sunburst diagrams, chord diagrams, parallel line plots, geographic maps, etc.)

• RafaelJS, renders in SVG, along with d3 and processing.js, you can make just about anything (e.g., two-player games in the browser) with this library; gRafael is a separate library for creating the usual plot types (bar, line, pie)
  
  

III. time-series plots

• dygraphs (a javascript library dedidated soley to time-series plotting, and its feature set reflects this mission, e.g., capacity to process and render plots with high volumes of data (>10,000 points), wide range of opdtions for tick labels of time axis with many formatting options

• HighStock (a time-series library from the HighChart guys)
  
  

IV. real-time/streaming data

• Smoothie Charts (sparse feature set, only intended to do one thing well which is smoothly render streaming data; HighCharts, jqplot, and flot will also do this, but depending on the character of your data (variance, rate) these three general-purpose libraries might not show the data as "spiky", which is precisely what Smoothie was designed to eliminate)