FusionCharts - Half doughnut through gauge
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<div id='container'>
<div class='border-bottom' id='content'>
<div class='border-bottom'>
<div class='chartCont border-right' id='sales-chart-container'>FusionCharts will load here.</div>
<div class='chartCont' id='trans-chart-container'>FusionCharts will load here.</div>
</div>
<div></div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
width: 100%;
font-family: Tahoma, Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
font-weight: bold;
}
.chartCont {
padding: 0px 12px;
}
.border-bottom {
border-bottom: 1px dashed rgba(0, 117, 194, 0.2);
}
.border-right {
border-right: 1px dashed rgba(0, 117, 194, 0.2);
}
#container {
width: 1200px;
margin: 0 auto;
position: relative;
}
#container> div {
width: 100%;
background-color: #ffffff;
}
#logoContainer {
float: left;
}
#logoContainer img {
padding: 0 10px;
}
#logoContainer div {
position: absolute;
top: 8px;
left: 95px;
}
#logoContainer div h2 {
color: #0075c2;
}
#logoContainer div h4 {
color: #0e948c;
}
#logoContainer div p {
color: #719146;
font-size: 12px;
padding: 5px 0;
}
#userDetail {
float: right;
}
#userDetail img {
position: absolute;
top: 16px;
right: 130px;
}
#userDetail div {
position: absolute;
top: 15px;
right: 20px;
font-size: 14px;
font-weight: bold;
color: #0075c2;
}
#userDetail div p {
margin: 0;
}
#userDetail div p:nth-child(2) {
color: #0e948c;
}
#header div:nth-child(3) {
clear: both;
border-bottom: 1px solid #0075c2;
}
#content div {
display: inline-block;
}
#content > div {
margin: 0px 20px;
}
#content > div:nth-child(1) > div {
margin: 20px 0 0;
}
#content > div:nth-child(2) > div {
margin: 0 0 20px;
}
#footer p {
margin: 0;
font-size: 9pt;
color: black;
padding: 5px 0;
text-align: center;
}
JavaScript
FusionCharts.ready(function () {
var cSatScoreChart1 = new FusionCharts({
type: 'angulargauge',
renderAt: 'sales-chart-container',
width: '400',
height: '250',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Migration Readiness Score",
"subcaption": "YYYY-MM-DD",
"pivotFillAlpha": "0",
"showTickMarks": "0",
"showTickValues": "0",
"gaugeOriginX": "200",
"gaugeOriginy": "200",
"gaugeOuterRadius": "60",
"gaugeInnerRadius": "90"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "24",
"code": "#ff0000"
}, {
"minValue": "24",
"maxValue": "100",
"code": "#D8D8D8"
}]
},
"dials": {
"dial": [{
"alpha": "0",
"borderAlpha": "0"
}]
}
}
}).render();
var cSatScoreChart2 = new FusionCharts({
type: 'angulargauge',
renderAt: 'trans-chart-container',
width: '400',
height: '250',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Last week",
"placeTicksInside": "1",
"placeValuesInside": "1",
"theme": "fint",
"showPivotBorder": "0",
"pivotFillAlpha": "0",
"showTickMarks": "0",
"showTickValues": "0",
"gaugeOriginX": "200",
"gaugeOriginy": "200",
...