Post
Ask Question

Working With Charts

Introduction

This tip says how to formulate our data as a High Chart. Please provide your valuable comments. :)

Background

I am working in a project where 80% of the processes are handled in the client side itself. So I was looking for a client-side chart and High Chart satisfied my requiremetns. It is a good plugin and also easy to use. What is High Chart? High Charts is solely based on native browser technologies and doesn't require client-side plugins like Flash or Java. Furthermore you don't need to install anything on your server. No PHP or ASP.NET. High Charts needs only two JavaScript files to run, the highcharts.js core and either the jQuery, MooTools, Prototype or High Charts Standalone framework. The High Charts Standalone framework is designed for those who do not already use jQuery, MooTools or Prototype in their web page and wish to use High Charts with minimal overhead. Read more here: HIGHCHARTS, HIGHSTOCK AND HIGHMAPS DOCUMENTATION.

What you must know

  1. jQuery :jQuery .
  2. JavaScript :W3Schools.com.
  3. CSS 3 : CSS3 Introduction .
  4. HTML :HTML(5) Tutorial .
  5. DOM Manipulations in jQuery :jQuery - DOM Manipulation .
Using the code

Before you start, you need to download the necessary files from: http://www.highcharts.com/download. Once you download the files, you need to include those in your project. Or you can use the CDN also. 

  1. <script src="http://code.highcharts.com/highcharts.js"></script>  
  2. <script src="http://code.highcharts.com/modules/heatmap.js"></script>  
  3. <script src="http://code.highcharts.com/modules/exporting.js"></script>   

Now it is time to add a UI element in which we will generate the chart. Please assign some width to that element, so that our chart can be formulated inside that element.

  1. <div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div> 

Now what else is pending is only to add the script that does the formulation work as in the following:

  1. $(function() {  
  2.     $('#container').highcharts({  
  3.         chart: {  
  4.             type: 'heatmap',  
  5.             marginTop: 40,  
  6.             marginBottom: 40  
  7.         },  
  8.         title: {  
  9.             text: 'Sales per employee per weekday'  
  10.         },  
  11.         xAxis: {  
  12.             categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']  
  13.         },  
  14.         yAxis: {  
  15.             categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],  
  16.             title: null  
  17.         },  
  18.         colorAxis: {  
  19.             min: 0,  
  20.             minColor: '#FFFFFF',  
  21.             maxColor: Highcharts.getOptions().colors[0]  
  22.         },  
  23.         legend: {  
  24.             align: 'right',  
  25.             layout: 'vertical',  
  26.             margin: 0,  
  27.             verticalAlign: 'top',  
  28.             y: 25,  
  29.             symbolHeight: 320  
  30.         },  
  31.         tooltip: {  
  32.             formatter: function() {  
  33.                 return '<b>'  
  34.                 this.series.xAxis.categories[this.point.x]  
  35.                 '</b> sold <br><b>'  
  36.                 this.point.value '</b> items on <br><b>'  
  37.                 this.series.yAxis.categories[this.point.y]  
  38.                 '</b>';  
  39.             }  
  40.         },  
  41.         series: [{  
  42.             name: 'Sales per employee',  
  43.             borderWidth: 1,  
  44.             data: [  
  45.                 [0, 0, 10],  
  46.                 [0, 1, 19],  
  47.                 [0, 2, 8],  
  48.                 [0, 3, 24],  
  49.                 [0, 4, 67],  
  50.                 [1, 0, 92],  
  51.                 [1, 1, 58],  
  52.                 [1, 2, 78],  
  53.                 [1, 3, 117],  
  54.                 [1, 4, 48],  
  55.                 [2, 0, 35],  
  56.                 [2, 1, 15],  
  57.                 [2, 2, 123],  
  58.                 [2, 3, 64],  
  59.                 [2, 4, 52],  
  60.                 [3, 0, 72],  
  61.                 [3, 1, 132],  
  62.                 [3, 2, 114],  
  63.                 [3, 3, 19],  
  64.                 [3, 4, 16],  
  65.                 [4, 0, 38],  
  66.                 [4, 1, 5],  
  67.                 [4, 2, 8],  
  68.                 [4, 3, 117],  
  69.                 [4, 4, 115],  
  70.                 [5, 0, 88],  
  71.                 [5, 1, 32],  
  72.                 [5, 2, 12],  
  73.                 [5, 3, 6],  
  74.                 [5, 4, 120],  
  75.                 [6, 0, 13],  
  76.                 [6, 1, 44],  
  77.                 [6, 2, 88],  
  78.                 [6, 3, 98],  
  79.                 [6, 4, 96],  
  80.                 [7, 0, 31],  
  81.                 [7, 1, 1],  
  82.                 [7, 2, 82],  
  83.                 [7, 3, 32],  
  84.                 [7, 4, 30],  
  85.                 [8, 0, 85],  
  86.                 [8, 1, 97],  
  87.                 [8, 2, 123],  
  88.                 [8, 3, 64],  
  89.                 [8, 4, 84],  
  90.                 [9, 0, 47],  
  91.                 [9, 1, 114],  
  92.                 [9, 2, 31],  
  93.                 [9, 3, 48],  
  94.                 [9, 4, 91]  
  95.             ],  
  96.             dataLabels: {  
  97.                 enabled: true,  
  98.                 color: 'black',  
  99.                 style: {  
  100.                     textShadow: 'none',  
  101.                     HcTextStroke: null  
  102.                 }  
  103.             }  
  104.         }]  
  105.     });  
  106. });  

Explanation

Now it's time to go deeper to see what we have done. There are a few properties we have set for our chat so far. The following are what they are:

  • Chart: This property sets the chart type and chart styles. Here in this I am using heatmap. And you can set your own style to it.
  • Title: This sets the title for our chart. You can set a meaningful title related to our chart.
  • XAxis: Here you need to bind the series of elements that all you need to come under in X axis. You can bind that to the inner property categories.
  • YAxis: Here you need to bind the series of elements that all you need to come under in Y axis. You can bind that to the inner property categories.
  • ColorAxis: This property sets the colors for the chart. You can set the min color and max color so that we can get the shadow effect.
  • Legend: This is where we can set the limitation of which quadrant we need to show the data. You can set the y value to get the values as it's multiplied one. You can also set its alignment.
  • Tooltip: Tooltip plays a main role in this chart, when you mouse over to the specific column you can see the small pop up that shows the exact value. You can set your own style for this J
  • Series: Now it's time to apply the data. This is where we need to do that.
You can find more and do the options in this JavaScript fiddle.

Sibeeshvevenu

Output


Points of Interest

jQuery, CSS, HTML and HighChart.

History

1st Version: 08-May-2015


Similar Articles