Max Posted July 30, 2012 Share Posted July 30, 2012 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 More sharing options...
HartleySan Posted July 30, 2012 Share Posted July 30, 2012 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? Link to comment Share on other sites More sharing options...
Max Posted July 31, 2012 Author Share Posted July 31, 2012 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 More sharing options...
HartleySan Posted July 31, 2012 Share Posted July 31, 2012 Yeah, gradients are cool, and with enough CSS definitions, you can get them to work in most any browser. Here's an awesome site for creating website gradients: http://www.colorzill...radient-editor/ Also, thanks for posting the working code. Link to comment Share on other sites More sharing options...
Recommended Posts