Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Highcharts Heat Map Example
Keywords : Heat map with different colors example using highcharts, How to create heatmap using highcharts with example, Highcharts heatmap with json data example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts - Heat Map Chart</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> $(function () { var chartype = { type: 'heatmap', marginTop: 40, marginBottom: 80, plotBorderWidth: 1 } var chartitle = { text: 'Sales per employee per weekday' } var chartlegend = { layout: 'vertical', align: 'left', verticalAlign: 'top', x: 150, y: 100, floating: true, borderWidth: 1, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' } var chartxaxis = { categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'] } var chartyaxis = { categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], title: null } var chartcoloraxis = { min: 0, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] } var chartlegend = { align: 'right', layout: 'vertical', margin: 0, verticalAlign: 'top', y: 25, symbolHeight: 280 } var chartooltip = { formatter: function () { return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; } } var chartseries = [{ name: 'Sales per employee', borderWidth: 1, data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]], dataLabels: { enabled: true, color: '#000000' } }] $('#container').highcharts({ chart:chartype, title: chartitle, xAxis:chartxaxis, yAxis: chartyaxis, colorAxis: chartcoloraxis, legend:chartlegend, tooltip:chartooltip, series: chartseries }); }); </script> </head> <body> <div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div> </body> </html>
Click Here to See Result
Result
Previous
Next