Charts within HTML Tree View | CanvasJS JavaScript Charts

Charts within HTML Tree View | CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<ul id="chartsList">
  <li><span class="caret">Charts</span>
    <ul class="charts">
      <li><div id="chartContainer1" style="height: 300px; width: 100%;"></div></li>
      <li><div id="chartContainer2" style="height: 300px; width: 100%;"></div></li>
    </ul>
  </li>
</ul>

CSS

ul, #chartsList {
  list-style-type: none;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);  
}
.charts {
  display: none;
}

.active {
  display: block;
}

JavaScript

var dataPoints = [
  { x: 10, y: 71 },
  { x: 20, y: 55 },
  { x: 30, y: 50 },
  { x: 40, y: 65 },
  { x: 50, y: 95 },
  { x: 60, y: 68 },
  { x: 70, y: 28 },
  { x: 80, y: 34 },
  { x: 90, y: 14 }
];
var chart1 = new CanvasJS.Chart("chartContainer1", {
  title: {
    text: "Basic Column Chart"
  },
  data: [{
    type: "column",
    dataPoints: dataPoints
  }]
});

var chart2 = new CanvasJS.Chart("chartContainer2", {
  title: {
    text: "Basic Line Chart"
  },
  data: [{
    type: "line",
    dataPoints: dataPoints
  }]
});


var caret = document.getElementsByClassName("caret")[0];


caret.addEventListener("click", function() {
  this.parentElement.querySelector(".charts").classList.toggle("active");
  chart1.render();
  chart2.render();
  this.classList.toggle("caret-down");
});