FusionCharts - Gallery Example - Zoom Line Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js"></script>
<!-- This sample shows the event parameters, and their values, when dataplotClick event is triggered-->
<div id="indicatorDiv">Event name: <strong> beforeDrillUp </strong>
  
  <p>Triggered just <strong>before</strong> the chart is rendered when it is <strong>drilled up</strong> to a parent or the root node</p>
  <p>All events, when triggered, will provide two parameters for the handler - <strong> eventObj </strong> (object containing information generic to all events) and <strong> dataObj </strong> (object containing information specific to an event).</p>
  <p>Click any of the data plots to trigger the event. Scroll down to the table rendered below the chart to view information contained in the dataObj object. To view information contained in the eventObj object, open the console.</p>
  
</div>
<div id="chart-container">FusionCharts will render here</div>
<div>
  <div>
    <div id="header">
      <div class="parameter-name">Parameter Name</div>
      <div class="parameter-value">Parameter Value</div>
    </div>
    <div id="attrs-table"></div>
  </div>
</div>

CSS

body {
  padding: 5px;
  margin: 0 auto;
}

strong{
  font-weight: bold;
}

#header {
  display: none;
}

#indicatorDiv {
  width: 500px;
  font-family: 'Arial', 'Helvetica';
  font-size: 13px;
}

p {
  margin-top: 20px;
  margin-bottom: 20px;
}

#attrs-table {
  text-align: center;
  width: 500px;
}

.parameter-name,
.parameter-value {
  width: 250px;
  font-weight: bold;
  text-align: center;
  float: left;
  font-family: 'Arial', 'Helvetica';
  font-size: 13px;
}

.title,
.value {
  float: left;
  width: 230px;
  height: 20px;
  background: #fff;
  padding: 5px 10px;
}

.title {
  clear: left;
  font-family: 'Arial', 'Helvetica';
  font-size: 13px;
}

.title:nth-child(4n+1),
.value:nth-child(4n+2) {
  background: rgb(0, 117, 194);
  color: #fff;
  font-family: 'Arial', 'Helvetica';
  font-size: 13px;
}

.value {
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: 'Arial', 'Helvetica';
  font-size: 13px;
}

JavaScript

FusionCharts.ready(function() {
  var visitChart = new FusionCharts({
    type: 'treemap',
    renderAt: 'chart-container',
    width: '550',
    height: '550',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "animation": "0",
        "hideTitle": "1",
        "plotToolText": "<div><b>$label</b><br/><b>SAR (body) : </b>$svalue W/kg<br/><b>Units Sold : </b>$value</div>",
        "horizontalPadding": "0",
        "verticalPadding": "0",
        "plotborderthickness": ".5",
        "plotbordercolor": "ffffff",
        "chartBottomMargin": "0",
        "labelGlow": "0",
        "labelFontColor": "ffffff",
        "showLegend": "1",
        "legendpadding": "0",
        "legendItemFontSize": "10",
        "legendItemFontBold": "1",
        "legendPointerWidth": "8",
        "legenditemfontcolor": "3d5c5c",
        "legendScaleLineThickness": "0",
        "legendCaptionFontSize": "10",
        "algorithm": "squarified",
        "caption": "Harry's SuperMart : Sales of mobile devices in last quarter",
        "theme": "zune",
        "subcaption": "Analysis based on SAR values",
        "legendCaption": "Specific Absorption Rate (SAR) in W/kg"
      },
      "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "5800",
        "data": [{
          "label": "Samsung",
          "fillcolor": "838986",
          "value": "2217",
          "data": [{
            "label": "Galaxy Note 4",
            "value": "519",
            "sValue": "1.09"
          }, {
            "label": "Galaxy S6 Edge",
            "value": "448",
            "sValue": "1.48"
          }, {
            "label": "Galaxy S6",
            "value": "416",
            "sValue": "1.13"
          }, {
            "label": "Galaxy J1",
            "value": "304",
            "sValue": "1.18"
          }, {
            "label": "Galaxy J7",
            "value": "159",
            "sValue": "1.36"
          }, {
            "label": "Galaxy...