FusionCharts - Dashboard

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- Dashboard example using FusionCharts.
This dashboard is built keeping the requirements of a store manager in any of Harry's supermart. It tries to provide insight on the 4 key metrics of a store. They are :
1. Sales / Revenue (Trend last 3 weeks)
2. No of Transactions (Trend last 3 weeks)
3. No of Footfalls (Trend last 3 weeks)
4. Customer Satisfaction Index (Trend last 3 weeks)

For the sake of simplicity this dashboard is based on a fixed date. Wich is 4th June 2014. Though the year is not relevant as all charts data is limited to last 3 weeks.
 -->
<div id='container'>
  <div id='header'>
    <div id='logoContainer'>
      <img src="http://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png" alt='Logo' />
      <div>
        <h2>Harry's Supermart</h2>

        <h4>Los Angeles Topanga</h4>
        <p>Today: 4th June, 2014</p>

      </div>
    </div>
    <div id='userDetail'>
      <img src="http://static.fusioncharts.com/sampledata/images/user_image.jpg" alt='Logo' />
      <div>
        <p>Welcome John</p>
        <p>Store Manager</p>
      </div>
    </div>
    <div></div>
  </div>
  <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 class='chartCont border-right' id='footfall-chart-container'>FusionCharts will load here.</div>
      <div class='chartCont' id='cs-chart-container'>FusionCharts will load here.</div>
    </div>
  </div>
  <div id='footer'>
    <p>This application was built using <a href="http://www.fusioncharts.com" target="_blank" title="FusionCharts - Data to delight... in...

CSS

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #00406A;
  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 chartWidth = '550',
    chartHeight = '300',
    dataType = 'json';

  var salesRevChart = new FusionCharts({
    type: 'column2d',
    renderAt: 'sales-chart-container',
    width: chartWidth,
    height: chartHeight,
    dataFormat: dataType,
    dataSource: {
      "chart": {
        "caption": "Daily Revenue",
        "subcaption": "Last 3 weeks",
        "xaxisname": "Date",
        "yaxisname": "Revenue (In USD)",
        "numberprefix": "$",
        "showvalues": "0",
        "theme": "fusion"
      },
      "data": [{
          "label": "14 May",
          "value": "267111"
        },
        {
          "label": "15 May",
          "value": "217207"
        },
        {
          "label": "16 May",
          "value": "185836"
        },
        {
          "label": "17 May",
          "value": "251074"
        },
        {
          "label": "18 May",
          "value": "273374"
        },
        {
          "label": "19 May",
          "value": "215724"
        },
        {
          "label": "20 May",
          "value": "227219"
        },
        {
          "label": "21 May",
          "value": "268160"
        },
        {
          "label": "22 May",
          "value": "239446"
        },
        {
          "label": "23 May",
          "value": "297084"
        },
        {
          "label": "24 May",
          "value": '204399'
        },
        {
          "label": "25 May",
          "value": "236195"
        },
        {
          "label": "26 May",
          "value": "302120"
        },
        {
          "label": "27 May",
          "value": "282909"
        },
        {
          "label": "28 May",
          "value": "272096"
        },
        {
          "label": "29 May",
          "value": "241639"
        },
        {
          "label": "30 May",
          "value": "189526"
        },
        {
          "label": "31 May",
          "value": "248034"
        },
        {
          "label": "1...