FusionCharts - Drag Column Chart Attributes

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 DragColumn chart from PowerCharts suite. 
The chart shows a comparison between 'Avialable stock' and 'Estomated Stock' of different food items. The estimated columns are draggable and whenever the value is updated (dragged up or down), the corresponding value in the table gets updated. This is done through the 'dataplotdragend' event. Also when we click the 'restore' button all original values are restored. This is achieved through 'dataRestored' event.

Chart:
    1. DragColumn 2D
Events:
    1. dataPlotDragEned
    2. dataRestored
-->
<div>
  <div id="chart-container">FusionCharts will render here</div>
  <div id="tableCont">
    <table id='dragcolumn2d-sample-table'>
      <tr>
        <td></td>
        <th>Poultry</th>
        <th>Rice</th>
        <th>Peanut Butter</th>
        <th>Salmon</th>
        <th>Cereal</th>
      </tr>
      <tr>
        <td>Estimated Demand</td>
        <td>19000</td>
        <td>16500</td>
        <td>14300</td>
        <td>10000</td>
        <td>9800</td>
      </tr>
    </table>
  </div>
</div>

CSS

body {
  font-family: 'Helvetica Neue', Arial;
  font-size: 14px;
}

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

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

th {
  background-color: #0075c2;
  color: #ffffff;
}

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

tr:nth-child(1)>td:nth-child(1) {
  border-color: #fff;
}

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

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

#tableCont {
  width: 100%;
}

JavaScript

FusionCharts.ready(function() {
  var inventoryChart = new FusionCharts({
    type: 'dragcolumn2d',
    renderAt: 'chart-container',
    width: '500',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Inventory status - Bakersfield Central",
        "subCaption": "Top 5 Food items",
        "xAxisName": "Food Item",
        "yAxisName": "No. of Units",
        "theme": "fusion"
      },
      "categories": [{
        "category": [{
            "label": "Poultry"
          },
          {
            "label": "Rice"
          },
          {
            "label": "Peanut Butter"
          },
          {
            "label": "Salmon"
          },
          {
            "label": "Cereal"
          }
        ]
      }],
      "dataset": [{
          "seriesname": "Available Stock",
          "data": [{
              "value": "6000"
            },
            {
              "value": "9500"
            },
            {
              "value": "11900"
            },
            {
              "value": "8000"
            },
            {
              "value": "9700"
            }
          ]
        },
        {
          "seriesname": "Estimated Demand",
          "dashed": "1",
          "data": [{
              "value": "19000"
            },
            {
              "value": "16500"
            },
            {
              "value": "14300"
            },
            {
              "value": "10000"
            },
            {
              "value": "9800"
            }
          ]
        }
      ]
    },
    "events": {
      "dataplotDragEnd": function(evt, arg) {
        var dataIndex = arg && arg.dataIndex,
          prevVal = arg && arg.startValue,
          newVal = arg && parseInt(arg.endValue, 10),
          valuerow = document.getElementById("dragcolumn2d-sample-table")
          .getElementsByTagName("tr")[1]
          .getElementsByTagName('td');

        valuerow[dataIndex].innerHTML = newVal;
     ...