Question

I’m working on an android tablet application using phonegap in which i need to get a report chart which diagrammatically explains the status of different things, something like as shown in the picture below.

I want to generate these kind of charts or reports dynamically which varies as the data changes.Can anyone help me providing some examples using html5, js and css which has some similar functionality?

Answer 1

Did you check out RGraph: HTML5 & Javascript charts?

RGraph is a charts library written in Javascript that uses HTML5 to draw and supports over twenty different types of charts. Using the new HTML5 canvas tag, RGraph creates these charts inside the web browser using Javascript, meaning quicker pages and less web server load. This leads to smaller page sizes, lower costs and faster websites – everybody wins!

---

If you see a basic code, it goes this way:

<script>
    window.onload = function ()
    {
        // The data to be shown on the Pie chart
        var data = [564,155,499,611,322];

        // Create the Pie chart. The arguments are the canvas ID and the data to be shown.
        var pie = new RGraph.Pie('myPie', data);

        // Configure the chart to look as you want.
        pie.Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno']);
        pie.Set('chart.linewidth', 5);
        pie.Set('chart.stroke', 'white');

        // Call the .Draw() chart to draw the Pie chart.
        pie.Draw();
    }
</script>

See a live example of Pie charts!

---

Yours is a Radar Chart. See one here: Radar Charts. Source code:

<script>
    window.onload = function ()
    {
        // The data to be represented on the Radar chart.
        var data = [3, 3, 41, 37, 16];

        // Create the Radar chart. The arguments are the canvas ID and the data to be shown on the chart.
        var radar = new RGraph.Radar('myRadar', data);

        // If you want to show multiple data sets, then you give them like this:
        // var radar = new RGraph.Radar('myRadar', [3,5,6,8], [4,5,2,6]);

        // Configure the Radar chart to look as you wish.
        radar.Set('chart.background.circles', true);
        radar.Set('chart.color', 'rgba(255,0,0,0.5)');
        radar.Set('chart.circle', 20);
        radar.Set('chart.circle.fill', 'rgba(200,255,200,0.5)');
        radar.Set('chart.labels', ['Safari (3%)', 'Other (3%)', 'MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)']);
        radar.Set('chart.key', ['Market share', 'A made up figure']);

        // Now call the .Draw() method to draw the chart.
        radar.Draw();
    }
</script>