HTML5 / JS Linear Gauge

javascript html charts

13,323

You can achieve almost the same with http://amcharts.com, here is the code:

       <script type="text/javascript">
        var chart;

        var chartData = [{
            category: "",
            bad: 75,
            moderate: 15,
            good: 10
        }];

        AmCharts.ready(function () {
            // SERIALL CHART
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "category";
            chart.rotate = true;
            chart.columnWidth = 1;

            // AXES
            // Category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.gridAlpha = 0;
            categoryAxis.axisAlpha = 0;
            categoryAxis.gridPosition = "start";

            // value                      
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.stackType = "100%";
            valueAxis.gridAlpha = 0;
            valueAxis.autoGridCount = false;
            valueAxis.gridCount = 20;
            valueAxis.axisAlpha = 1;
            chart.addValueAxis(valueAxis);

            // GRAPHS
            // firstgraph 
            var graph = new AmCharts.AmGraph();
            graph.labelText = "Bad";
            graph.valueField = "bad";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.fillColors = ["#d05c4f", "#ffb2a8"];
            chart.addGraph(graph);

            // second graph                              
            graph = new AmCharts.AmGraph();
            graph.labelText = "[[value]]";
            graph.valueField = "namerica";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.lineColor = "#D8E0BD";
            chart.addGraph(graph);

            // thirdt graph              
            graph = new AmCharts.AmGraph();
            graph.labelText = "Moderate";
            graph.valueField = "moderate";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.fillColors = ["#cba01e", "#fee3a0"];
            chart.addGraph(graph);

            // fourth graph 
            graph = new AmCharts.AmGraph();
            graph.labelText = "Good";
            graph.valueField = "good";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.fillColors = ["#74960c","#d2e594"];
            chart.addGraph(graph);

            // WRITE
            chart.write("chartdiv");
        });

    </script>
</head>

<body>
    <div id="chartdiv" style="width: 500px; height: 100px;"></div>
</body>

And here is the result:

enter image description here

13,323

Author by

Anand Sunderraman

Technology agnostic, (with the exception of .NET, yet to break ice with it), software enthusiast. Use technology as means to solve a problem.

Updated on August 21, 2022

Comments

Anand Sunderraman over 1 year

I would like to display a linear gauge like the one in fusion charts using html5 or javascript. On doing a google search i could not find any open source / free linear gauge similar to the one fusion charts have
Andrew Barber over 11 years

Thanks for posting your answer! Please be sure to read the FAQ on Self-Promotion carefully. Also note that it is required that you post a disclaimer every time you link to your own site/product.
MadsterMaddness over 9 years

@zeroin I can't seem to get mine to work on JSFiddle. Can you post a JSFiddle of it? It would really help me. Thank you!
Paul Kirkason over 6 years

@zeroin i have managed to implement this onto my page however i dont understand they values in the little pointers and how they work? How can i get this to just display a single pointer in a certain position, say at 80 in the moderate section?