Creating HiCharts

HiCharts is one of the easiest as finest utility I found to generate different kinds of charts in my Web Application

This is again a JS library which provides wonderful functionality to draw.
we just need to define x axis and y axis . and the data . rest JS will take care of itself

Below is an example of a Line Chart.
Note: I have hardcoded the values for testing purpose . in the next post I will show it can generated dynamically with database values

Include CDN :
<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>

Write a function
<script>

$(function () {

$('#container').highcharts({



chart: {
  type: 'column'



},

title: {
  text: 'Salary'



},

subtitle: {
  text: 'Employee Name'



},

xAxis: {
  categories: ['tom', 'Kedar', 'Sameer', 'Amit','Mohit']



},

yAxis: {

title: {
  text: 'Salary'



},

labels: {
  formatter: function () {

return '$'+ this.value;



}

}

},

tooltip: {
  crosshairs: true,

shared: true



},

plotOptions: {

spline: {

marker: {

radius: 4,
  lineColor: '#666666',



lineWidth: 1

}

}

},

series: [{
  name: 'EMployee Salary',



marker: {
  symbol: 'square'



},



data: [10000, 5700, 15000, 8000, 12800, {

y: 26.5,

marker: {
  symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'



}

}, 23.3, 18.3, 13.9, 9.6]

}]

});

});
  </script>   

The Above code has 4 different components
Title:to display user defined title for your graph
Axes: which defines what should be your X and Y axes values
Series
ToolTip
run the html file. you will see the below output