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:

 

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!

 

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

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.

------------------------------------

 

 

I reckon that package is very useful to developers.

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

 

<html>

<head>

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

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