Jump to content
Larry Ullman's Book Forums

Recommended Posts

I have brought this topic over from php6 and mysql5 as it seems more appropriate to JS than php...........


The question was:.......


I was looking at an Iberdrola electricity invoice and working out how I would code the php to produce one, which was relatively straightforward, except at one point they put a bar chart to show the previous year's consumption....which got me wondering - is there any facility in php to produce something similar?


This would be easy enough:














....and HartleySan replied thus:....


With newer browsers, you can very easily create gradients to somewhat spice up your graphs.

As a more practical solution, you may want to consider a library like Google Chart Tools:



I believe they use the canvas element, so an HTML5-compatible browser is required.


Edit: Apparently the charts fall back to VML graphics for non-HTML5 browsers, so maybe they work in all browsers.




I reckon that package is very useful to developers.

Share this post

Link to post
Share on other sites

Max, I imagine you're looking for other people's input on this as well, but if you're posting in this board as well, then I'm guessing the answer I provided isn't what you were looking for. What exactly are you looking to do?

Share this post

Link to post
Share on other sites

Hi HartleySan


No, am very happy with your help - just thought the info would be useful to surfers who use JS but not php. Gradients are very interesting - I have been looking at http://www.tutorialspoint.com/html5/canvas_create_gradients.htm but suggests that not all browsers are capable of this.


For those who didn't see it under php6 and mysql5, here is the code for bar charts:




<!--Load the AJAX API-->

<script type="text/javascript" src="https://www.google.c...sapi"></script>

<script type="text/javascript">


// Load the Visualization API and the piechart package.

google.load('visualization', '1.0', {'packages':['corechart']});


// Set a callback to run when the Google Visualization API is loaded.



// Callback that creates and populates a data table,

// instantiates the pie chart, passes in the data and

// draws it.

function drawChart() {


// Create the data table.

var data = new google.visualization.DataTable();

data.addColumn('string', 'Topping');

data.addColumn('number', 'Slices');


['Mushrooms', 3],

['Onions', 1],

['Olives', 1],

['Zucchini', 1],

['Pepperoni', 2]



// Set chart options

var options = {'title':'How Much Pizza I Ate Last Night',




// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

chart.draw(data, options);






<!--Div that will hold the pie chart-->

<div id="chart_div"></div>



Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...