Origa.me

This came in kind of useful on a client's site recently - allows you to display data in a standard HTML table and then use jQuery to read the data in the table and display a graph using Open Flash Charts in its place. It's all a bit rough but meets my requirements so I probably won't give it any more attention. I'm making it available here in case anyone else finds it useful - feel free to take it and extend it. Here's the jQuery plugin code (ofcplugin.js):

jQuery.fn.createChart = function(settings) {
    this.props = {
        title: ""
    };

    settings = jQuery.extend({
        type: "",
        width: 600,
        height: 320,
        html_title: false,
        tool_tip: "",
        x_col: 1,
        y_col: 2,
        y_max: 100,
        y_steps: 10,
        x_label_orient: 0,
        c_class: ""
    }, settings);
    var xlabels = new Array();
    var values = new Array();

    $(this).find("tbody tr td:nth-child("+settings.x_col+")").each(function() {
        xlabels[xlabels.length] = $(this).text();
    });

    $(this).find("tbody tr td:nth-child("+settings.y_col+")").each(function() {
        values[values.length] = $(this).text();
    });

    var url = "chart-data.php?";
    this.props.title = $(this).find("caption").text();

    if (!settings.html_title) {
        url += "title="+escape(this.props.title+",{font-size:10px; color:#000000}");
    }

    url += "&x_legend="+escape($(this).find("thead th:nth-child(1)").text()+",10,#AAAAAA");
    url += "&y_legend="+escape($(this).find("thead th:nth-child(2)").text()+",10,#AAAAAA");
    url += "&y_label_size="+escape("15");
    url += "amp;&y_steps="+escape(settings.y_steps);
    url += "&values="+escape(values.join(","));
    url += "&x_labels="+escape(xlabels.join(","));
    url += "&y_max="+escape(settings.y_max);
    url += "&bg_colour="+escape("#FFFFFF");
    url += "&x_axis_colour="+escape("#000000");
    url += "&x_grid_colour="+escape("#AAAAAA");
    url += "&y_axis_colour="+escape("#000000");
    url += "&y_grid_colour="+escape("#AAAAAA");
    url += "&x_label_style="+escape("8,#000000,"+settings.x_label_orient+",1,#000000");
    url += "&type="+escape(settings.type);

    if (settings.tool_tip.length > 0) {
        url += "&tool_tip="+escape(settings.tool_tip);
    }

    var outer = $("
 
");
    var inner = $("
 
");
    outer.append(inner);

    if (settings.html_title) {
        outer.prepend("
"+this.props.title+"
");
    }

    $(this).after(outer);
    $(inner).flash(
        {
            src: "open-flash-chart.swf",
            width: settings.width,
            height: settings.height,
            flashvars: {data: url}
        },{version:8}
    );

    return this;
}

Here's the PHP file which creates the chart data (chart-data.php):

<?php

// use the chart class to build the chart:
include_once( 'ofc-library/open-flash-chart.php' );
$g = new graph();

$x_labels = explode(',', $_GET['x_labels']);

for ($i=0; $i

And here's an example of usage:

<table id="table1">
	<caption>Some data</caption>
	<thead>
		<tr>
			<th>Labels</th>
			<th>Values</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Label 1</td>
			<td>65</td>
		</tr>
		<tr>
			<td>Label 2</td>
			<td>22</td>
		</tr>
		<tr>
			<td>Label 3</td>
			<td>18</td>
		</tr>
		<tr>
			<td>Label 4</td>
			<td>18</td>
		</tr>
	</tbody>
</table>

<script type="text/javascript" src="jquery-1.1.3.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript" src="ofcplugin.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("#table1").createChart(
        {type:"bar", c_class:"graph centercontent", html_title:true, tool_tip:"#x_label#
#val#%25"}).hide();
});

</script>

Also requires:

• Open Flash Chart
• jQuery (tested with 1.1.3)
• Flash plugin

See it in action: http://www.playlink.org.uk/articles/?p=20.