Jump to content
Larry Ullman's Book Forums

Recommended Posts

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:













Share this post

Link to post
Share on other sites

Using just divs, you could create some rudimentary bar charts.

For anything fancier, you've have to use either the HTML5 canvas element or Flash.

I suppose as a third option, you could create various graphics that would make up parts of the bar chart, scales, etc., and then piece those together using various logic, although that would be time-consuming and annoying.

Share this post

Link to post
Share on other sites

Thanks for that HartleySan


The ideas that I have had are as follows:


- Have a .jpg for every conceivable variation of consumption possible and call the correct one with . Yeuk!!


- Ages ago, before PCs, there was a computer on tha market called a Commodore PET which had a character set which included boxes in shades of grey, triangles, etc. etc. ASCII and UTF-8 don't seem to provide for this.


- Use tables with each column having a dark background to indicate consumption.


That's about it, I guess.

Share this post

Link to post
Share on other sites

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.

  • Upvote 1

Share this post

Link to post
Share on other sites

Yes, please do. I've thought about using the Google Chart Tools several times now, but never had a real reason to do so.

Very curious how they are though.


Share this post

Link to post
Share on other sites

The google site says to copy and paste the following to create the pie chart shown on the page so I tried that (copy to a file called testchart.html) and ran it but all I got was a blank screen (yes, I have JS enabled).<p>---------------------------------------------------------------------------------------------------------



<!--Load the AJAX API-->

<script type="text/javascript" src="

Share this post

Link to post
Share on other sites

I just copied and pasted the code into a text file and saved it as an HTML file, and it ran fine in both IE9 and Chrome.

I should note that since I was running it locally, I had to manually approve the use of the ActiveX controls for it to work in IE9 though.

Perhaps you made an honest mistake in copying and pasting the code? I really don't know.

Share this post

Link to post
Share on other sites

Hi HartleySan


Yes - works well now, don't know where I went wrong - just copied and pasted it. I like the bar charts as well:....




<!--Load the AJAX API-->

<script type="text/javascript" src="https://www.google.com/jsapi"></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...