eCharts (v3) Gauge chart

eCharts (v3) has captured my attention and am impressed. Lets create a gauge chart and also understand the code.

Note: CDN for english version of echarts version 3 can be found here :

https://cdnjs.com/libraries/echarts

HTML:

<!doctype html>
<html>
<head>
<title>Charts Gauge Example</title>
</head>
<body>
<div id="chart" style="width: 100vw; height: 100vh;">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts-en.min.js"></script>
<script src="app.js"></script>
</body>
</html>

The js code (app.js):

var mychart = document.getElementById('chart');
 gChart = echarts.init(mychart);
 var option = {
   tooltip : {
     formatter: "{a} <br/>{b} : {c}%"
   },
   toolbox: {
     show : true,
     feature : {
       restore : {show: true},
       saveAsImage : {show: true}
    }
   },
 series : [
 { 
     title:{
         show:true,
         offsetCenter:[0,-230],
         color:'#888',
         fontWeight:'bold',
         fontSize:24 
         },
     clockwise:true,
     startAngle:180,
     endAngle:0,
     pointer:{show:true},
     axisTick:{show:true},
     splitLine:{show:false},
     name:'Business Indicators',
     type:'gauge',
     detail : {
         offsetCenter:[5,-40],
         formatter:'{value}%'
         },
     data:[{value: 75, name: 'Rate'}]
 }]
};

//Add this to have the data changed every two seconds
setInterval(function () {
 option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
 gChart.setOption(option, true);
},2000);

  • Here first we are setting variable “mychart” to DOM element with ID = “chart”
  • At line 2 of the JS we initialize an echart at the DOM ID (“chart”)
  • Now we set the options which will be passed to the initialized echart to render on screen

Decoding the “options”:

  • In the example , options has the following attributes
    • series
    • tooltip
    • toolbox

Series:

Here we define the

  • name of chart – ‘Business Indicators’ in the example
  • type of chart – ‘Gauge’
  • Title (“Rate” in this example)  takes its value from data.name and the styling is driven by series.title properties 
  • startAngle is 180 and endAngle is 0 (see pic) when property clockwise is set to true (default)
  • series.data.value is displayed with style and positioning defined by series.details
  • pointer and axis ticks have visbility set to true.

 

Tooltip:

  • Here we define the content to be seen when hovering over the pointer.
  • In line 33 of JS code ,
    • {a} represents name of the chart, defined in property series.name (“Businesss Indicators”)
    • {b} represents data.name
    • {c} represents data.value

Note : There are more options to customize ( described in API documentation of echarts)

Tool Box:

  • Here two features are defined to be visible -> Restore and Download as Image.
  • There are other options that can be configured

Heres the output:

Just by changing the startAngle and/or endAngle you can change the shape of the dial.

Ex, set startAngle to 225 and endAngle to -45 and here’s what you get:

 

Posted in Charts n Graphs, Generic, JS Frameworks, Web Technology

Leave a Reply

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

*