Drag-able chart - Managing chart limits using JavaScript API

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>
<!-- Drag-able chart - Managing chart limits using JavaScript API. After rendering, the sample, retrieves the upper and lower limit of the chart and set those values in the two input fields. After updating these input fields, you can click the associated buttons to change upper and lower limits. Afetr each update an alert message notifies the user whether the update was successful.

Methods: 
    # setUpperLimit
    # setLowerLimit
    # getUpperLimit
    # getLowerLimit
-->
<div>
  <div id="chart-container">FusionCharts will render here</div>
  <div id="controllers">
    <p>Reset values to update limits.
      <p>
        <div>
          <span>            
                <input type="text" id="max-limit" />
                <input type="button" id="max-btn" class='btn' value="Set Max Value"/>
            </span>
        </div>
        <div>
          <span>            
                <input type="text" id="min-limit" />
                <input type="button" id="min-btn" class='btn' value="Set Min Value"/>
            </span>
        </div>
  </div>
</div>

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans;
  font-size: 14px;
  /*font-style: normal;
    font-weight: normal;*/
}

input[type=text] {
  max-width: 100px;
  font-weight: bold;
}

input[type=button] {
  padding: 2px 5px;
}

#controllers {
  margin-left: 20px;
  font-weight: bold;
}

#controllers div {
  padding-top: 5px;
}

.btn {
  font-size: 16px;
}

JavaScript

FusionCharts.ready(function() {
  var maxBtn = document.getElementById('max-btn'),
    minBtn = document.getElementById('min-btn'),
    maxTxtFld = document.getElementById('max-limit'),
    minTxtFld = document.getElementById('min-limit'),

    setMaxLimit = function() {
      var maxLimit = maxTxtFld.value,
        crntLimit = salesPrediction && salesPrediction.getUpperLimit(),
        status;

      if (maxLimit != crntLimit) {
        status = salesPrediction && salesPrediction.setUpperLimit(maxLimit);
        if (status) {
          alert('Max limit updated successfully');
        } else {
          maxTxtFld.value = crntLimit;
          alert('Max limit could not be updated!')
        }
      }

    },

    setMinLimit = function() {
      var minLimit = minTxtFld.value,
        crntLimit = salesPrediction && salesPrediction.getLowerLimit(),
        status;

      if (minLimit != crntLimit) {
        status = salesPrediction && salesPrediction.setLowerLimit(minLimit);
        if (status) {
          alert('Min limit updated successfully');
        } else {
          minTxtFld.value = crntLimit;
          alert('Min limit could not be updated!')
        }
      }

    },

    salesPrediction = new FusionCharts({
      type: 'dragarea',
      renderAt: 'chart-container',
      width: '500',
      height: '350',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Quarterly Unit Sales - Apple vs. Samsung",
          "subCaption": "Drag anchors to change estimated values",
          "subCaptionFontSize": "12",
          "xAxisName": "Quarter",
          "yAxisName": "No. of Units",
          "theme": "fusion"
        },
        "categories": [{
          "category": [{
              "label": "Q1"
            },
            {
              "label": "Q2"
            },
            {
              "label": "Q3(E)"
            },
            {
              "label": "Q4(E)"
            }
          ]
        }],
        "dataset":...