Backbone sample environment

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.carbon.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.ocean.js"></script>
<script src="https://csm.fusioncharts.com/projects/themes/hulk-light.js"></script>
<div class="wrapper">
  <div class="header">
    <a href="https://www.fusioncharts.com" class="logo-wrapper"><img src="https://www.fusioncharts.com/apple-touch-icon-114x114.png" alt=""></a>
    <ul class="thumbnails">
      <li>
        <div id="thumbnail-column" class="thumbnail"></div>
      </li>
      <li>
        <div id="thumbnail-pie" class="thumbnail"></div>
      </li>
      <li>
        <div id="thumbnail-bar" class="thumbnail"></div>
      </li>
      <li>
        <div id="thumbnail-line" class="thumbnail"></div>
      </li>
    </ul>
  </div>
  <div class="container">
    <div class="left-column">
      <ul class="properties">
        <li>
          <h2>Data Value</h2>
          
          <div class="property">
            <label>
              <input name='dv' id='show' type='radio' value='1' checked="true" /> Show</label>
            <label>
              <br>
              <input name='dv' id='hide' type='radio' value='0' /> Hide
            </label>
          </div>
        </li>
        <li>
          <br>
          <h2>Animation</h2>
          
          <div class="property">
            <label>
...

SCSS

* {
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
}

.header{
  background-color:#DCEAFC;
}

.header {
  border-bottom: 1px solid #ccc;
  &:after {
    content: "";
    display: table;
    width: 100%;
    height: 0;
  }
  .logo-wrapper,
  .thumbnails {
    float: left;
    display: flex;
    padding: 10px;
  }
  .logo-wrapper {
    width: 25%;
    border-right: 1px solid #ccc;
     height: 110px;
  }
  .thumbnails {
    width: 75%;
  }
}

.thumbnails {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  &:after {
    content: "";
    display: table;
    width: 100%;
    height: 0;
  }
  li {
    float: left;
    padding: 0 5px;
  }
}

.container {
  &:after {
    content: "";
    display: table;
    width: 100%;
    height: 0;
  }
  .left-column,
  .right-column {
    float: left;
    display: flex;
    padding: 10px;
  }
  .left-column {
    width: 25%;
    border-right: 1px solid #ccc;
     height: 370px;
     background-color:#DCEAFC;
  }
  .right-column {
    width: 75%;
    background-color:#DCEAFC;
  }
}
h2 {
  font-weight:bold;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: local('Roboto Web SemiBold'), local('RobotoWeb-SemiBold'), url(https://fonts.gstatic.com/s/titilliumweb/v5/anMUvcNT0H1YN4FII8wpr6d1JQt-lS5nD-1TJX2NNl0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

JavaScript

var AppView = Backbone.View.extend({
  // el - stands for element. Every view has a element associate in with HTML
  //      content will be rendered.
  el: '#container',
  // It's the first function called when this view it's instantiated.
  initialize: function() {
    this.render();
  },
  render: function() {
    FusionCharts.ready(function() {
      var chartData = {
          "chart": {
            "caption": "Top 5 Companies Of 2017",
            "subCaption": "Based on Market Value (In Millions)",
            "xAxisName": "",
            "yAxisName": "Market Value",
            "numberPrefix": "$",
            "theme": "ocean",
            "bgcolor": "#DCEAFC",
            "canvasbgcolor": "#DCEAFC",
            "canvasbgalpha": "10",
            "rotateValues": "1",
            "exportEnabled": "1",
            "transposeAnimation": "1",
            "pieRadius": "70",
            "theme": "hulk-light"
          },

          "data": [{
            "label": "Apple",
            "value": "752"
          }, {
            "label": "Alphabet",
            "value": "579.5"
          }, {
            "label": "Microsoft",
            "value": "507.5"
          }, {
            "label": "Amazon",
            "value": "427"
          }, {
            "label": "Berkshire Hathaway",
            "value": "409.9"
          }]
        },

        revenueChartColumn = new FusionCharts({
          type: 'column2d',
          renderAt: 'chart-container',
          width: '420',
          height: '350',
          dataFormat: 'json',
          id: 'revenue-chart-column',
          dataSource: chartData
        }),
        chartinfo,
        revenueChartPie = new FusionCharts({
          type: 'pie2d',
          renderAt: 'chart-container',
          width: '420',
          height: '350',
          dataFormat: 'json',
          id: 'revenue-chart-pie',
          dataSource: chartData
        }),
        revenueChartBar = new FusionCharts({
          type: 'bar2d',
         ...