Create Flot Charts without Inline Scripts

Flot is a nice and free jQuery based JavaScript charts engine. Unfortunately, all officially provided examples use inline JavaScript in order to configure the charts. Let me first quickly explain why this bad practice and then show how you can externalize and generalize the code, so that it is also more web-components-framework-friendly.


How Flot charts are initialized

Basically, the Flot guys explain in their manuals and examples that you can initialize a particular chart like this:

var data = [ [[0, 0], [1, 1]] ];
$.plot($("#placeholder"), data, 
	{ yaxis: { max: 1 } });

Two things here: For each chart, you need a single DOM element as the first element and the data to display (the “series”) as the second argument. So this snippet is dependent on the HTML component. If you build a web component framework, you would need to render an inline block after the actual component’s HTML markup.

Why Inline script should be avoided

Most of you guys know it anyway, but here is a quick summary:

Using HTML5’s Data Attribute

HTML 5 provides a very simple way to specify data in your HTML markup without writing actual JavaScript code and without violating any HTML validation. Just add an attribute called “data-foo” to your HTML element, whereas “foo” is any valid attribute name. John Resig gave a nice little overview of the data attribute on his blog.
Luckily, jQuery facilitates these data attributes with its .data() function. This function finds an attribute starting with “data-” and parses the attribute value as a JSON object.

Externalize Flot Initialization

Now we can get rid of inline scripts and just add a data attribute to our chart placeholder, which could be rendered by a framework. This is an example for a pie chart:

<div class="pieChart" data-series="[
	{ &quot;label&quot;: &quot;label1&quot;,  &quot;data&quot;: [[1,70]]},
	{ &quot;label&quot;: &quot;label2&quot;,  &quot;data&quot;: [[1,30]]}
]"></div>

Note that a valid JSON object needs the quotation marks around the attribute names, hence we add them by using HTML entities (in order to not produce invalid HTML).
We have valid HTML, still all possibilities to specify parameters, but not a single line of JavaScript (if you do not consider JSON as JavaScript).

And this is the JavaScript code in our external JavaScript file which will work for all elements with the CSS class “pieChart”:

$('.pieChart').each(function(index, component) {
	$.plot(component, $(component).data('series'), {
		series: {
			pie: {
				show: true,
				}
			}
	});
});
Advertisements

Tags: , , ,

2 responses to “Create Flot Charts without Inline Scripts”

  1. Sascha says :

    Hi,

    thanks for this interesting post. How could an ajax request be used in this scenario? I think of loading the inline data within in ajax request for faster page loading if you think if a dashboard…

    • Ingo.Hofmann says :

      Hi Sascha,

      Thanks for your comment. What I usually do in this scenario is moving the initialization of such components into a separate function:

      var initComponents = function() {
      // init code here
      }

      I call this function then both on the “document ready” and on the “Ajax complete” event (see http://api.jquery.com/ajaxComplete/).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: