Heat Map Tutorial With Examples For Beginners

0
()

Today, We want to share with you Heat Map Tutorial With Examples.In this post we will show you Heat map with different colors example using highcharts, hear for How to create heatmap using highcharts with example we will give you demo and example for implement.In this post, we will learn about react-highcharts heatmap with an example.

Heat Map Tutorial With Examples

There are the Following The simple About highcharts heatmap angular Full Information With Example and source code.

As I will cover this Post with live Working example to develop Highcharts heatmap with json data example, so the highcharts treemap is used for this example is following below.

Highcharts Heat Map Example

index.html

Angular is a platform for building mobile & desktop web Based user friendly and light weight applications.Angular,It’s TypeScript-based open-source Angularjs web application framework.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Highcharts - Heat Map Chart - www.pakainfo.com</title>
    <script src="https://www.pakainfo.com/jquery/js/jquery-1.12.4.js"></script>
    <script src="https://www.pakainfo.com/jquery/js/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 graphtype = {
                type: 'heatmap',
                marginTop: 40,
                marginBottom: 80,
                plotBorderWidth: 1
            }
            var graphTitle = {
                text: 'Sales per employee per weekday'
            }
            var graphlegend = {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 150,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#3d3d3d'
            }
            var graphxaxis = {
                categories: ['Mobile', 'Laptop', 'LCD', 'TV', 'Table', 'Computer', 'CD', 'Tap', 'Radio', 'Iphone']
            }
            var graphyaxis = {
                categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
                title: null
            }
            var chartcoloraxis = {
                min: 0,
                minColor: '#3d3d3d',
                maxColor: Highcharts.getOptions().colors[0]
            }
            var graphlegend = {
                align: 'right',
                layout: 'vertical',
                margin: 0,
                verticalAlign: 'top',
                y: 25,
                symbolHeight: 280
            }
            var graphtooltip = {
                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 graphseries = [{
                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'
                }
            }]
            $('#chart-full-content').highcharts({
                chart:graphtype,
                title: graphTitle,
                xAxis:graphxaxis,
                yAxis: graphyaxis,
                colorAxis: chartcoloraxis,
                legend:graphlegend,
                tooltip:graphtooltip,
                series: graphseries
            });
        });
    </script>
</head>
<body>
    <div id="chart-full-content" style="height: 425px; min-width: 335px; max-width: 800px; margin: 0 auto"></div>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  3D Bubble Chart Tutorial With Examples

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

Download

I hope you get an idea about highcharts heatmap colors.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.