How to draw chart in HTML:

(Chart in HTML code)

A simple code to draw bar chart using HTML 5.

Requirements:
you are required for download RGraph.common.core.js(here) and RGraph.bar.js (here)
copy the code and paste it in notepad and save as RGraph.common.core.js and RGraph.bar.js

This code is tested in Netbeans, you can also view the video tutorial here Video Tutorial

 

//How to draw chart in HTML
<html>
    <head>
        <title>Graphs</title>
        <script type="text/javascript" src="RGraph.common.core.js"></script>
        <script type="text/javascript" src="RGraph.bar.js"></script>
    </head>
    <body>
        <canvas width="500" height="250" id="graphs" style="border: 2px solid black"></canvas>
        <script type="text/javascript">
            var chart=new RGraph.Bar('graphs', [30,44,34,60]); //these are the values of bar chart that be drawn
            chart.Set('chart.colors',['red']); // color of graph
            chart.Set('chart.title',"Profits"); //title for bar chart
            chart.Set('chart.labels', ["25", "50", "75", "100"]); //these are the labels shown
            chart.Draw();
        </script>
    </body>
</html>

YouTube Link: Video Tutorial

 

By Sri

Leave a Reply

Your email address will not be published. Required fields are marked *