Max Posted July 21, 2012 Share Posted July 21, 2012 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 More sharing options...
HartleySan Posted July 21, 2012 Share Posted July 21, 2012 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 More sharing options...
Max Posted July 23, 2012 Author Share Posted July 23, 2012 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 More sharing options...
HartleySan Posted July 23, 2012 Share Posted July 23, 2012 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. 1 Link to comment Share on other sites More sharing options...
Max Posted July 24, 2012 Author Share Posted July 24, 2012 Thanks HartleySan - will study and report back! Link to comment Share on other sites More sharing options...
HartleySan Posted July 24, 2012 Share Posted July 24, 2012 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. Thanks. Link to comment Share on other sites More sharing options...
Max Posted July 26, 2012 Author Share Posted July 26, 2012 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 More sharing options...
HartleySan Posted July 26, 2012 Share Posted July 26, 2012 Where's the rest of the code? Could you please link us to the exact page? Thanks. Link to comment Share on other sites More sharing options...
Max Posted July 26, 2012 Author Share Posted July 26, 2012 That is the exact code, copied and pasted from https://google-developers.appspot.com/chart/interactive/docs/quick_start Should we now, considering the previous posts, move this thread to JavaScript Develop and Design??? Link to comment Share on other sites More sharing options...
HartleySan Posted July 26, 2012 Share Posted July 26, 2012 Wouldn't hurt to move it over there (although I don't know how). Either way is fine. Please give me a bit to look into this. Thanks. Link to comment Share on other sites More sharing options...
HartleySan Posted July 26, 2012 Share Posted July 26, 2012 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 More sharing options...
Max Posted July 29, 2012 Author Share Posted July 29, 2012 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 More sharing options...
HartleySan Posted July 29, 2012 Share Posted July 29, 2012 Glad it worked. Thanks for sharing. Link to comment Share on other sites More sharing options...
Recommended Posts