For rendering charts in one of my projects, I started using jplot library.
Usage is pretty simple, but I needed some specifics in implementation.
First, add the following lines to HEAD section:
In my case, I used also date rendering and some more features, provided by jplot.
Then I added the following code to my page:
I used such construction in order to dynamically return reports on needed options.
My javascript code is following:
$(function() { var plot2 = ""; $('select#price').change(function() { if (plot2) plot2.destroy(); //this string is needed to make sure, that old chart is not displayed while new is generated var id = $(this).val(); // here we get selected option value var name = $("#price option[value='" + id + "']").text(); // here we take the name of option, selected. $.getJSON("/lib/helpers/price_data.php?price_code=" + id, //read JSON data from helper script function (data) { plot2 = $.jqplot('chart_display', [data], { title: name, axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, // X axis will be rendered as date tickOptions:{ formatString: '%b %#d' // format of date display } }, yaxis:{ tickOptions:{ formatString:'%.2f EUR' // format of price display } } }, series:[ {lineWidth:4, markerOptions:{style:'square'}} // one of the features to display break points ], highlighter: { show: true // mouse hover highlighting on break points }, cursor: { show: false, tooltipLocation:'sw' // mouse hover tooltip onbreak points } }); }) }); });
To display correctly all these data, we need correct data to be returned by our php script. In my case it should be in format of JSON data [[‘2008-09-30 4:00PM’,4], [‘2008-10-30 4:00PM’,6.5], [‘2008-11-30 4:00PM’,5.7], [‘2008-12-30 4:00PM’,9], [‘2009-01-30 4:00PM’,8.2]]
For this purpose, I generate output of script in the following way:
$query = mysql_query("SELECT * FROM prices WHERE price_code = '$price_code' ORDER BY date") or die(mysql_error()); while ($row = mysql_fetch_array($query)) { $result[] = array($row['date'].' 0:00AM', round($row['price'])); } print json_encode($result);