Basic Column Chart - CanvasJS JavaScript Charts
Basic Column Chart - CanvasJS JavaScript Charts
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
$(function() {
//window.onload = function() {
var str = 0;
var dataPoints1 = [];
var dataPoints2 = [];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
axisY:{
includeZero: false,
title: "",
tickLength: 0,
lineThickness:0,
margin:0,
gridThickness: 0,
interval: 100000,
minimum: 1,
maximum: 1000000,
valueFormatString:" " //comment this to show numeric values
},
axisX:{
includeZero: false,
title: "",
tickLength: 0,
margin:0,
lineThickness:0,
gridThickness:1,
minimum: 1,
maximum: 100,
interval: 1,
valueFormatString:" " //comment this to show numeric values
},
toolTip: {
shared: true
},
data: [{
type: "spline",
name: "Aggressive",
xValueFormatString:"#### years old",
yValueFormatString: "$#,##0.##",
dataPoints: dataPoints1
},
{
type: "spline",
name: "Conservative",
xValueFormatString:"#### years old",
yValueFormatString: "$#,##0.##",
dataPoints: dataPoints2
}]
});
var xVal = 0;
var yVal = null;
var yVal1 = null;
var dataLength = $('.yrs_val').val();
function updateChart(count) {
//var updateChart = function (count) {
count = count || 1;
if(dataPoints1.length!=0){
dataPoints1 =...