Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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 -->
<div id="dialogBox" style="display: none;">

      <input  type="image"  id="expChart" style="width:27px;height:22px" src="images/ei2.png" title="EXPORT AS IMAGE">
     --%>
        
     <input id="printChart" align="right" type="button" class="btn6" value="PRINT" style="width:80px">
     <input id="expChart" align="right" type="button" class="btn6" value="EXPORT" style="width:80px">
<input align="right" type="button" class="btn6" value="SCALING" id="scaling" style="width:80px">
<input align="right" type="button" class="btn6" value="MARK POINTS" id="marker" style="width:130px">
   
    
 <div id="divWait" style="position:absolute;left:50%; top:50%; margin:-100px 0 0 -150px; display:none;">
      <div style="text-align:center; width:300px; height:70px; color:#000;">
              Processing....
              <br/>
             <img src="images/bf.gif" id="img"/>
      </div>
</div>
    
    
<div id="chartContainer" class="dialog" style="width:100%;height:450px">
  
</div>  
   
     
     <div id="rangebox" style="display: none;">

     <div id="range" class="dialog" style="width:100%;height:180px">
      
    </div>
    
</div>   
     
     
        </div>

JavaScript

var param = [],nam= [];
   var out = [];
   var i,t=0;
   var url,filename,ff,url1,string2,mn,telnm;
    var dataPointss =[],arr=[[]];
           var k=3,n=0,m=0;
        var pm;   
 $("#divWait").css({'display': 'block'});
  
  var chart = new CanvasJS.Chart("chartContainer", {
	theme:"light1",
	animationEnabled: true,
        zoomEnabled: true,
       
        zoomType: "xy",
	title:{
		text: "DATA PLOT FOR PARAMETERS",
                 fontFamily: "arial",
                 fontSize: 20
	},
	axisY :{
           
            
		title: "Eng-unit-value"
	
	},
        axisX :{  
                includeZero: false,
                gridcolor:"lightblue",
                gridThickness:1,
                interlacedcolor: "#F0F8FF",
 
            
              valueFormatString: "###.###",
		title: "Flight-time(sec)",
		suffix: "s"
	},
	toolTip:{
		shared: "true"
	},
	legend:{             
		cursor:"pointer",
		itemclick : toggleDataSeries
	},
	data:[{ 
               
              
		type: "spline",              
		visible: true,
		showInLegend: true,
               
		name: [],
		dataPoints: []
	},
	{                                
		type: "spline",                
		showInLegend: true,
		visible: true,                        
		name: [],
		dataPoints: []
	},
	{ 
              
		type: "spline",                
		visible: true,
		showInLegend: true,            
		name: [],
		dataPoints: []
	},
    {
              
		type: "spline",                
		visible: true,
		showInLegend: true,            
		name: [],
		dataPoints: []
	},
    {
               
		type: "spline",                
		visible: true,
		showInLegend: true,            
		name: [],
		dataPoints: []
	}]
    
});


      $.each( $j('#hd1').DataTable().rows().nodes().to$().find('input[type="checkbox"]:checked'),function(){ 
         url = $(this).val();
 
        
       url=url.replace(/\\/gi, "/");
   
       filename = url.substring(url.lastIndexOf("/")+1);
       filename =...