jQuery addClass example

Change class name on click in jQuery

by Good Muyis

HTML

<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="banner-message">
  <div id="chartContainer" style="height: 300px; width: 100%;"></div>
  <button>Change color</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 400px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

jQuery(document).ready(function($) {

var options = {
	animationEnabled: true,  
	title:{
		text: "Rental DirectAdmin Sales"
	},
	axisX: {
		title: "Order Date",
		valueFormatString: "DD MMM Y"
	},
	axisY: {
		title: "Sales (in NGN)",
		prefix: "N",
		includeZero: false
	},
	data: [{
		yValueFormatString: "N#,###",
		xValueFormatString: "DD MMM Y",
		type: "spline",
		dataPoints: [
			{ x: new Date(2017, 0), y: 25060 },
			{ x: new Date(2017, 1), y: 27980 },
			{ x: new Date(2017, 2), y: 33800 },
			{ x: new Date(2017, 3), y: 41400 },
			{ x: new Date(2017, 4), y: 40260 },
			{ x: new Date(2017, 5), y: 33900 },
			{ x: new Date(2017, 6), y: 23000 },
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

//Notice
console.log("Js Loaded Update: ");
//End of ready()
});