FusionCharts - Dashboard

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ritesh Pandey

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>

  <body>
  	<div class="container">
  		<div class="logo-container">
  			<a href="http://www.fusioncharts.com" class="logo-anchor">
  				<img width="210" height="38" alt="Go to FusionCharts home" src="http://www.fusioncharts.com/theme/210x38xfusioncharts-logo.png.pagespeed.ic.KZD9tJ7qIK.png" />
  			</a>
  		</div>
  	<div class="company-monitor-heading-wrap">
  		<div class="company-monitor">Company Monitor</div>
  		<div class="dash-demo">Dashboard Demo</div>
  	</div>
    <div class="chart-dashboard">
    	<div class="hbullet-heading-wrap">
    		<span class="metric">Metric</span>
    		<span class="target-reach">Target Reach</span>
    		<span class="actual">Actual</span>
    	</div>

      <div class="hbullet-chart-wrap">
      	<div id="revenueChartContainerCaption" class="hbullet-chart-caption"></div>
      	<div id="revenueChartContainer" class="hbullet-chart">FusionCharts XT will load here!</div>
      </div>
      <div class="hbullet-chart-wrap">
      	<div id="profitChartContainerCaption" class="hbullet-chart-caption"></div>
      	<div id="profitChartContainer" class="hbullet-chart">FusionCharts XT will load here!</div>
      </div>
      <div class="hbullet-chart-wrap">
      	<div id="avgOrderSizeChartContainerCaption" class="hbullet-chart-caption"></div>
      	<div id="avgOrderSizeChartContainer" class="hbullet-chart">FusionCharts XT will load here!</div>
      </div>
      <div class="hbullet-chart-wrap">
      	<div id="newCustomersChartContainerCaption" class="hbullet-chart-caption"></div>
      	<div id="newCustomersChartContainer" class="hbullet-chart">FusionCharts XT will load here!</div>
      </div>
      <div class="hbullet-chart-wrap">
      	<div...

CSS

body{
	font-family: sans-serif;
}

.container{
	margin: 0 auto;
	width: 768px;
}
.logo-container {
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
}
.logo-anchor{
	display: inline-block;
}
.company-monitor-heading-wrap{
	padding: 10px;
	text-align: center;
}

.company-monitor{
	font-size: 13px;
	color: #333;
	font-weight: bold;
	margin-bottom: 10px;
}
.dash-demo{
	font-size: 13px;
	color: #666;
	margin-top: 10px;
}
.chart-dashboard{
	border: 1px solid #ccc;
	padding: 10px;
}
.hbullet-heading-wrap{
	font-size: 12px;
	color: #999;
	padding: 10px;
	border-bottom: 1px solid #999;
}
.metric, .target-reach, .actual{
	width: 33%;
	display: inline-block;
}
.metric, .target-reach{
	text-align: left;
}
.actual{
	text-align: right;
}
.hbullet-chart-caption {
  display: inline-block;
  width: 33%;
  vertical-align: top;
  line-height: 60px;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  color: #333;
  font-size: 14px;
}
.hbullet-chart-wrap:nth-child(2n+1){
	background-color: #eee;
}
.hbullet-chart {
    display: inline-block;
    width: 65%;
}

.sparkcolumn-chart{
	display: inline-block;
	padding-right: 20px;
	border-right: 1px dotted #999;
}
.sparkcolumn-chart-last{
	padding-right: 0;
	border-right: none;
}
.sparkcolumn-chart-wrap{
	width: 32%;
	display: inline-block;
}
.revenue-block{
	border-bottom: 1px dotted #666;
	padding: 30px 20px;
}
.sparkcolumn-top-caption{
	width: 200px;
	text-align: center;
	display: inline-block;
	color: #666;
	font-size: 14px;
	font-family: sans-serif;
}
.sparkcolumn-total{
	width: 200px;
	text-align: center;
	display: inline-block;
	color: #333;
	font-size: 28px;
	font-weight: bold;
	font-family: sans-serif;	
}
.recent-investment-monitor-title{
	text-align: center;
	font-family: sans-serif;
	color: #333;
	padding: 20px;
}
.recent-investment-heading-wrap{
	font-size: 13px;
	color: #666;
	padding: 0 10px 10px;
	border-bottom: 1px solid #999;
}
.investor, .low-label, .high-label{
	display: inline-block;
	width: 15%;
}
.opening-day,...

JavaScript

"use strict";
(function() {

    function insertTopCaption(container) {
        var chartObj = this,
            chartData = chartObj.getJSONData(),
            chart = chartData.chart,
            topcaption = chart.topcaption,
            containerId = container.id;
        document.getElementById(containerId + "Caption").innerHTML = topcaption;
    }

    function insertRevenueTotal(container) {
        var chartObj = this,
            chartData = chartObj.getJSONData(),
            dataset = chartData.dataset,
            containerId = container.id,
            total = 0;
        dataset[0]["data"].forEach(function(obj) {
            total += parseInt(obj.value);
        });
        document.getElementById(containerId + "Total").innerHTML = total;
    }

    function insertOpenValue(container) {
        var chartObj = this,
            chartData = chartObj.getJSONData(),
            dataset = chartData.dataset,
            containerId = container.id,
            openValue = 0;

        dataset[0]["data"].every(function(datum) {
            openValue = datum["value"];
            return false;
        })

        document.getElementById(containerId + "OpeiningDay").innerHTML = openValue;
    }

    function insertCloseValue(container) {
        var chartObj = this,
            chartData = chartObj.getJSONData(),
            dataset = chartData.dataset,
            containerId = container.id,
            closeValue = 0;
        dataset[0]["data"].forEach(function(datum) {
            closeValue = datum["value"];
        });

        document.getElementById(containerId + "ClosingDay").innerHTML = closeValue;
    }

    function insertHighLowValue(container) {
        var chartObj = this,
            chartData = chartObj.getJSONData(),
            dataset = chartData.dataset,
            containerId = container.id,
            highValue = 0,
            lowValue = 0,
            value;

        dataset[0]["data"].forEach(function(datum, index) {
            if...