Drawing image on canvas

I have on my website (https://alancameron.net/solar choose Aggregate) the display of solar panel statistics. I am trying to understand the methods of drawing an image on an HTML CANVAS using JavaScript.

The problem, that I see, is that the image generated in an Excel spreadsheet is getting too large to view easily. Currently you get two graphs, one above the other. I would like to split this into multiple separate pages and on each page show one of the statistic graphs, in a format that is viewable by users who could be using different devices with different screen properties, height/width.
A single graph image is 1359 x 889 pixels.
I have seen somewhere a method of finding the size of the screen in use. I plan to define an HTML Canvas with suitable dimensions so that it fills the screen and then draw the image of the graph, scaling it suit the canvas size. My question is how do you do it?

I have gone through the w3schools tutorial and am trying their code in a VM but it does not all work for me and I can only use trial and error to find the reason why not.

The W3Schools tutorials are good in a general way but not for my specific requirements. The section called “Draw Image” in the HTML Canvas tutorial I can get to work. It requires the user to click a button to ‘Try it’. What I need is how to have the JavaScript function ‘myCanvas’ to be executed after the graph image has been loaded, but I cannot see how.

Any suggestions will be gratefully received.

If you’ve got the actual data and can save it as CSV or JSON, then D3 is the tool you need (at least for javascript). The fCC D3 course will give you enough information to draw basic graphs like you currently have. You can size the graphs however you want or you can research responsive sizing for D3 (this is one of the better resources if you want react too) and let it set itself responsively.

Thanks Jeremy, for your input. I will try to see if D3 can handle the data which I have . The data in the Excel spreadsheet is extensive and getting larger each month it currently stands at 10MB. As I developed the original spreadsheet and the macros which analyse the data points which are created every 5 minutes of every day when the solar panels generate electricity. I do not look to reinvent my graph but take the .png image and display it. I can after a fashion display the data as you will have seen if you opened the solar application.
I need help in using the JavaScript which is required to draw images on an HTML canvas.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.