Page History

All of this will be accomplished using BellaDati Client API, JavaScript, JQuery and HTML5 canvas.

<div id="wrapper">
<div id="view1" class="view">
<canvas id="canvas1" class="canvas" width="250" height="250"></canvas>
</div>
<div id="view2" class="view">
<canvas id="canvas2" class="canvas" width="250" height="250"></canvas>	
</div>
<div id="view3" class="view">
<canvas id="canvas3" class="canvas" width="250" height="250"></canvas>	
</div>
</div>

Place the code to the Beginning of the body.

<style>
body {
	background-color: #F5F5F5 ;
}
	
.canvas {
    display: block;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  	padding-top: 10%;
}
.view {
	display: inline-block;
}
#wrapper {
	width: 760px;
	height: 300px;
	display: block;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border: 1px solid #ccc;
}
</style>

Place the code to the End of head.

User has to have access permission to the source report. Otherwise the data from the chart cannot be obtained.

function loadData() {

			$.ajax({ 
	                    url: "/bi/report/api:viewDetail/reportID-viewID",	// for example "/bi/report/api:viewDetail/8306-Ua0dyvh7lc"
	                    success: function(chartReply) {
	                      var value = chartReply.data.elements[0].values[0].value; // assign the value from the chart to variable
	                      console.log(value);	// check if the code above is correct
	                    }
	                  });
		}
	loadData();

var value = chartReply.data.elements[0].values[0].value;

function createGauge(canvasID, viewID, color, bgcolor)
	{
		//canvas initialization
		var canvas = document.getElementById(canvasID);
		var ctx = canvas.getContext("2d");
		//dimensions
		var W = canvas.width;
		var H = canvas.height;
		//Variables
		var chartData;
		var degrees = 0;
		var new_degrees = 0;
		var difference = 0;
		var text;
		var animation_loop;

		//previsouly created function to load the value
		function loadData() {
			$.ajax({ 
	                    url: "/bi/report/api:viewDetail/" + viewID,
	                    success: function(chartReply) {
	                      var value = chartReply.data.elements[0].values[0].value;
	                      chartData = Math.round(value*3.6);	//transform the value to degrees and round it
	                      draw();                      
	                    }
	                  });
					}
		loadData();
		
		function init()
		{
			//Clear the canvas everytime a chart is drawn
			ctx.clearRect(0, 0, W, H);
			
			//Background 360 degree arc
			ctx.beginPath();
			ctx.strokeStyle = bgcolor;	// color of the background
			ctx.lineWidth = 10;
			ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false);
			ctx.stroke();
			
			//gauge will be a simple arc
			//Angle in radians = angle in degrees * PI / 180
			var radians = degrees * Math.PI / 180;
			ctx.beginPath();
			ctx.strokeStyle = color;	//color of the filled space
			ctx.lineWidth = 10;
			//The arc starts from the rightmost end. If we deduct 90 degrees from the angles
			//the arc will start from the topmost end
			ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 
			//you can see the arc now
			ctx.stroke();
			
			//Lets add the text
			ctx.fillStyle = "#868686";	//color of the text
			ctx.font = "50px Abel";
			text = Math.round(degrees/360*100) + "%";
			//center the text
			//deducting half of text width from position x
			text_width = ctx.measureText(text).width;
			//adding manual value to position y
			ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
		}
		
		function draw()
		{
			//Cancel any movement animation if a new chart is requested
			if(typeof animation_loop != undefined) clearInterval(animation_loop);
			
			//get degrees that could be filled
			new_degrees = chartData;
			difference = new_degrees - degrees;
			//This will animate the gauge to new position
			//The animation will take 1 second
			//time for each frame is 1sec / difference in degrees
			animation_loop = setInterval(animate_to, 1000/difference);
		}
		
		//function to make the chart move to new degrees
		function animate_to()
		{
			//clear animation loop if degrees reaches to new_degrees
			if(degrees == new_degrees || new_degrees === undefined) 
				clearInterval(animation_loop);
					
			if(degrees < new_degrees)
				degrees++;
		
			init();
		}
	}

function renderGauges() 
		{
		 createGauge("canvas1", "viewId1", "#AEEA2E", "#E6F5BE"); // e.g.: createGauge("canvas1", "8306-k1LELScByj", "#AEEA2E", "#E6F5BE"); 
		 createGauge("canvas2", "viewId2", "#1EBBD4", "#C1EEF4"); // make sure you are using correct ID of the view  
		 createGauge("canvas3", "viewId3", "#B967C9", "#EED9F0");
		} 
		renderGauges();

<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>

Place the code to the End of head.