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:

 

x........x

x........x...x

x....x...x...x

x....x...x...x

x....x...x...x

________

J...M..M..J

A...A..A..U

N...R..Y..L

 

BUT WOULD LIKE TO SOMETHING A BIT MORE FLASHY!

Link to comment
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.

Link to comment
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.

Link to comment
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:

https://developers.google.com/chart/

 

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
Link to comment
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>---------------------------------------------------------------------------------------------------------

<html>

<head>

<!--Load the AJAX API-->

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

Link to comment
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.

Link to comment
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:....

 

<html>

<head>

<!--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.

google.setonloadCallback(drawChart);

 

// 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');

data.addRows([

['Mushrooms', 3],

['Onions', 1],

['Olives', 1],

['Zucchini', 1],

['Pepperoni', 2]

]);

 

// Set chart options

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

'width':400,

'height':300};

 

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

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

chart.draw(data, options);

}

</script>

</head>

 

<body>

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

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

</body>

</html>

Link to comment
Share on other sites

 Share

×
×
  • Create New...