ej2-javascript-samples/src/heatmap/cell-selection.js at master · jesusarockias/ej2-javascript-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/**
 * Sample for Cell Selection
 */
this.default = function () {

    var heatmap = new ej.heatmap.HeatMap({
        titleSettings:{
            text:'Top export products 2014-2018, Value in USD million'
        },
        xAxis: {
            labels: ['Cereals', 'Meat', 'Spices', 'Tea', 'Edible Oil', 'Dairy Products', 'Wheat'],
        },
        yAxis: {
            labels:['2014','2015','2016','2017','2018']
        },
        allowSelection: true,
        dataSource: window.cellSelectionData,
        paletteSettings: {
            palette: [
                {color: '#3C5E62 '},
                {color: '#86C843 '}
            ],
        },
        legendSettings: {
            visible:false,
        },
        showTooltip: true,
        load: function (args) {
            var selectedTheme = location.hash.split('/')[1];
            selectedTheme = selectedTheme ? selectedTheme : 'Material';
            args.heatmap.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
        },
         cellSelected: function(args) {
            var obj = document.getElementById('container1').ej2_instances[0];
            var data  = args.data;
            var length  = data.length;
            var xAxis  = [];
            var flag  = [];
            var series = [];
            var columnData = {};
             for (var i = 0; i < length; i++) {
                 if (xAxis.indexOf(data[i].xLabel) === -1) {
                     xAxis.push(data[i].xLabel);
                     flag.push(false);
                 }
             }
             for (i = 0; i < length; i++) {
                 var index = xAxis.indexOf(data[i].xLabel);
                 if (!flag[index]) {
                     flag[index] = true;
                     var column = {};
                     column.type = 'Column';
                     column.xName = 'x';
                     column.yName = 'y';
                     column.width = 2;
                     column.name = data[i].xLabel;
                     column.marker = { dataLabel: { visible: false } };
                     column.dataSource = [];
                     columnData = {};
                     columnData.x = data[i].yLabel;
                     columnData.y = data[i].value;
                     column.dataSource.push(columnData);
                     series.push(column);
                 }
                 else {
                     columnData = {};
                     columnData.x = data[i].yLabel;
                     columnData.y = data[i].value;
                     series[index].dataSource.push(columnData);
                 }
             }
             obj.series = series;
             obj.refresh();
            },
    });
    heatmap.appendTo('#container');
    var chart = new ej.charts.Chart({
    primaryXAxis: {
        valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
    },
    chartArea: { border: { width: 0 } },
    primaryYAxis:
    {
        majorGridLines: { width: 0 },
        majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
    },
    series:window.chartData,
    tooltip: {
        enable: true
    },
    load: function(args) {
        var selectedTheme = location.hash.split('/')[1];
        selectedTheme = selectedTheme ? selectedTheme : 'Material';
        args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
    }
    });
    chart.appendTo('#container1');
    var button = new ej.buttons.Button();
    button.appendTo('#clearSelection');
    document.getElementById('clearSelection').onclick = function () {
        heatmap.clearSelection();
        chart.series =window.chartData;
        chart.refresh();
    };

};