FusionCharts - Gallery Example - Drag Area Chart

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>
<!-- ShowCased DragArea chart from PowerCharts suite. 
The chart shows the quarterly sales trend for two specific brands. Forthcoming quarterly sales are estimated values and are draggable. Whenever the values are updated (dragged up or down), the corresponding value in the table gets updated. This is done through the 'dataplotdragend' event.

Chart:
    1. DragArea
Events:
    1. dataPlotDragEned
    2. dataRestored
-->
<div>
  <div id="chart-container">FusionCharts will render here</div>
  <div id="tableCont">
    <table>
      <tr>
        <td></td>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3(E)</th>
        <th>Q4(E)</th>
      </tr>
      <tr>
        <td class='row-header'>Apple</td>
        <td id='1-1'>1200</td>
        <td id='1-2'>1500</td>
        <td id='1-3'>1300</td>
        <td id='1-4'>900</td>
      </tr>
      <tr>
        <td class='row-header'>Samsung</td>
        <td id='2-1'>600</td>
        <td id='2-2'>850</td>
        <td id='2-3'>1000</td>
        <td id='2-4'>1200</td>
      </tr>
    </table>
    <p align="center" /> (E) indicates Estimated
  </div>
</div>

CSS

body {
  font-family: "Arial", "Verdana", "sans";
  font-size: 80%;
}

body>div {
  /*only one in this sample */
  width: 600px;
}

table {
  margin: 25px auto;
  border-collapse: collapse;
  border: 1px solid;
  border-bottom: 2px solid;
}

th {
  background-color: #fece2f;
  color: #ffffff;
}

th,
td {
  border: 1px solid #000;
  padding: 10px 5px;
  min-width: 70px;
  text-align: center;
}

tr:nth-child(1)>td:nth-child(1) {
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}

tr:nth-child(2)>td {
  color: #0075c2;
}

tr:nth-child(3)>td {
  color: #1aaf5d;
}

.row-header {
  background-color: #1aaf5d;
  color: #fff !important;
}

tr:nth-child(2)>td:nth-child(1) {
  background-color: #0075c2;
}

#tableCont {
  width: 100%;
}

JavaScript

FusionCharts.ready(function() {
  var salesPrediction = new FusionCharts({
    type: 'dragarea',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Quarterly Sales Projections",
        "subCaption": "iPhone vs Samsung Galaxy",
        "xAxisName": "Quarter",
        "yAxisName": "No. of Units",
        "showalternatehgridcolor": "0",
        "bgAlpha": "0",
        "borderAlpha": "20",
        "usePlotGradientColor": "0",
        "canvasBorderAlpha": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "showXAxisLine": "1",
        "axisLineAlpha": "25",
        "divLineAlpha": "25",
        "showBorder": "0",
        "theme": "fusion"
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          },
          {
            "label": "Q2"
          },
          {
            "label": "Q3(E)"
          },
          {
            "label": "Q4(E)"
          }
        ]
      }],
      "dataset": [{
          "seriesname": "Apple",
          "valuePosition": "ABOVE",
          "allowDrag": "0",
          "data": [{
              "value": "1200"
            },
            {
              "value": "1500",
              "dashed": "1"
            },
            {
              "value": "1300",
              "allowDrag": "1",
              "dashed": "1"
            },
            {
              "value": "900",
              "allowDrag": "1",
              "tooltext": "Predicted sales $value units"
            }
          ]
        },
        {
          "seriesname": "Samsung",
          "allowDrag": "0",
          "data": [{
              "value": "600"
            },
            {
              "value": "850",
              "dashed": "1"
            },
            {
              "value": "1000",
              "allowDrag": "1",
              "dashed": "1"
            },
            {
              "value": "1200",
        ...