<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-8">
      <div id="chart-container"></div>
    </div>
    <div class="col-4">
      <div class="demo-card">
        <div class="theme-control">
          <h5 class="mb-1">Themes</h5>
          <button
            id="fusion-theme-switcher"
            class="btn btn-sm btn-selected"
            onClick="handler.switchTheme('fusion')"
          >
            Fusion
          </button>
          <button
            id="gammel-theme-switcher"
            class="btn btn-sm"
            onClick="handler.switchTheme('gammel')"
          >
            Gammel
          </button>
          <button
            id="candy-theme-switcher"
            class="btn btn-sm"
            onClick="handler.switchTheme('candy')"
          >
            Candy
          </button>
          <button
            id="umber-theme-switcher"
            class="btn btn-sm"
            onClick="handler.switchTheme('umber')"
          >
            Umber
          </button>
        </div>
        <div class="legend-control mt-2">
          <h5 class="mb-1">Legend</h5>
          <button
            id="show-legend-btn"
            class="btn btn-sm"
            onClick="handler.showLegend(1)"
          >
            Show
          </button>
          <button
            id="hide-legend-btn"
            class="btn btn-sm btn-selected"
            onClick="handler.showLegend(0)"
          >
            Hide
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
#chart-container {
  width: 100%;
  height: 500px;
}

.demo-card {
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
  background: #b3b3b3;
  width: 100%;
}

.btn-sm:hover {
  background: #212344;
  color: #ffffff;
}

.btn-selected {
  background: #212344;
  color: #ffffff;
}
function fetchCheckStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  } else {
    var error = new Error(response.statusText);
    error.response = response;
    throw error;
  }
}

function loadData(url) {
  var option = {
    method: "GET",
    headers: new Headers(),
    mode: "cors",
    cache: "default"
  };

  return fetch(url, option)
    .then(fetchCheckStatus)
    .then(function(resp) {
      var contentType = resp.headers.get("Content-Type");
      if (contentType && contentType.indexOf("application/json") !== -1) {
        return resp.json();
      } else {
        return resp.text();
      }
    })
    .then(function(data) {
      return data;
    })
    .catch(function(err) {
      console.log("Something went wrong! Please check data/schema files");
    });
}

var data, schema, dataStore;

Promise.all([
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-line-combination-data.json"
  ),
  loadData(
    "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-line-combination-schema.json"
  )
]).then(function(res) {
  data = res[0];
  schema = res[1];
  dataStore = new FusionCharts.DataStore(data, schema);

  new FusionCharts({
    type: "timeseries",
    renderAt: "chart-container",
    id: "legend-demo-chart",
    width: "100%",
    height: "100%",
    dataSource: {
      chart: {},
      caption: {
        text: "Web visits & downloads since 2015"
      },
      subcaption: {
        text: "Legend is disabled"
      },
      yaxis: [
        {
          plot: [
            {
              value: "Downloads",
              type: "column"
            },
            {
              value: "Web Visits",
              type: "line"
            }
          ]
        }
      ],
      legend: {
        enabled: 0,
        item: [
          {
            value: "Downloads"
          },
          {
            value: "Web Visits",
            initiallyhidden: 1
          }
        ]
      },
      data: dataStore.getDataTable()
    }
  }).render();
});

const handler = {
  switchTheme: function(val) {
    let fusionThemeElem = document.getElementById("fusion-theme-switcher");
    let gammelThemeElem = document.getElementById("gammel-theme-switcher");
    let candyThemeElem = document.getElementById("candy-theme-switcher");
    let umberThemeElem = document.getElementById("umber-theme-switcher");

    fusionThemeElem.classList.remove("btn-selected");
    gammelThemeElem.classList.remove("btn-selected");
    candyThemeElem.classList.remove("btn-selected");
    umberThemeElem.classList.remove("btn-selected");

    if (val === "fusion") {
      fusionThemeElem.classList.add("btn-selected");
    } else if (val === "gammel") {
      gammelThemeElem.classList.add("btn-selected");
    } else if (val === "candy") {
      candyThemeElem.classList.add("btn-selected");
    } else if (val === "umber") {
      umberThemeElem.classList.add("btn-selected");
    }

    FusionCharts.items["legend-demo-chart"].setChartAttribute("theme", val);
  },

  showLegend: function(val) {
    let ds = {
      chart: {},
      caption: {
        text: "Web visits & downloads since 2015"
      },
      subcaption: {
        text: val ? "Legend is enabled, click on legend item to enable hidden data series" : "Legend is disabled"
      },
      yaxis: [
        {
          plot: [
            {
              value: "Downloads",
              type: "column"
            },
            {
              value: "Web Visits",
              type: "line"
            }
          ]
        }
      ],
      legend: {
        enabled: val,
        item: [
          {
            value: "Downloads"
          },
          {
            value: "Web Visits",
            initiallyhidden: 1
          }
        ]
      },
      data: dataStore.getDataTable()
    };

    let showLegendElem = document.getElementById("show-legend-btn");
    let hideLegendElem = document.getElementById("hide-legend-btn");

    showLegendElem.classList.remove("btn-selected");
    hideLegendElem.classList.remove("btn-selected");

    if (val === 0) {
      hideLegendElem.classList.add("btn-selected");
    } else if (val === 1) {
      showLegendElem.classList.add("btn-selected");
    }

    FusionCharts.items["legend-demo-chart"].setJSONData(ds);
  }
};

External CSS

  1. https://ds.fusioncharts.com/2.0.42/css/ds.css

External JavaScript

  1. https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js
  2. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js
  3. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.gammel.js
  4. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.candy.js
  5. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.umber.js