I got a project where i need to insert a bar graph into the website. I cant use the image of the graph. Is there any other method to draw this? Some way i can draw it in middle and give explanation about the graph below it.
2
-
Try canvas on fly scripting (HTML5)mehulmpt– mehulmpt2014-08-13 14:11:04 +00:00Commented Aug 13, 2014 at 14:11
-
Are you allowed to use JavaScript and/or third party libraries to aid the creation of your graph?Robin Bastiaan– Robin Bastiaan2022-12-07 22:43:53 +00:00Commented Dec 7, 2022 at 22:43
Add a comment
|
2 Answers
If you do not want to use an HTML 5 canvas, you might try using DIV elements with different color backgrounds.
<div style="height: 150px; width:100px; background:black;">
<div style="height: 10px; margin-top:17px; width:10px; background:red;" /><br/>
<div style="height: 10px; margin-top:17px; width:30px; background:green;" /><br/>
<div style="height: 10px; margin-top:17px; width:70px; background:yellow;" /><br/>
<div style="height: 10px; margin-top:17px; width:96px; background:blue;" /><br/>
</div>It's crude, but can be effective for a quick hack.
You can set all of the static values in the chart using CSS, and then use the Style tag to change the length of the bars.
Comments
There are many javascript libraries for drawing charts. You could try chartjs for example, or read this article that provides a list of 50 libraries for charts and graphs.
