Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by xwei01

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 -->

      <button class="tablinks" onclick="display(event,'test1');" id="defaultOpen" >tab1</button>
      <button class="tablinks" onclick="display(event,'test2');" >tab2</button>
</div>

<div id="test1" class="tabcontent">
      
 </div> 
 
 <div id="test2" class="tabcontent">
      
 </div> 
 
 <script>
document.getElementById('test1').innerHTML = '<p>hello<\p>'+'<div id="chartContainer" style="height: 360px; width: 100%;"></div>';


function display(evt, tabID) {
	var i, tabcontent, tablinks;
          var text = document.getElementById(tabID);
           
           if(tabID == "test2"){
           text.innerHTML = '<p>Hello world</p><p>vvv Is there any chart displayed below? vvv</p>'+'<div id="chartContainer" style="height: 360px; width: 100%;"></div>'+'<p>^^^ Is there any chart displayed above? ^^^</p>'; 
          }
          
          tabcontent = document.getElementsByClassName("tabcontent");
          for (i = 0; i < tabcontent.length; i++) {
              tabcontent[i].style.display = "none";
          }
          tablinks = document.getElementsByClassName("tablinks");
          for (i = 0; i < tablinks.length; i++) {
              tablinks[i].className = tablinks[i].className.replace(" active", "");
          }
          document.getElementById(tabID).style.display = "block";
          evt.currentTarget.className += " active";
}
 </script>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  data: [
    {
      type: "column",
      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 }
      ]
    }					
  ]
});

chart.render();