anychart-es6-example/index.html at master · anychart-integrations/anychart-es6-example · 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
<!doctype html>
<html>
<head>
    <!-- html5 set charset -->
    <meta charset="utf-8"/>
    <style>
        #container {
            width: 1200px;
            height: 600px;
        }
    </style>
    <script src="https://cdn.anychart.com/samples-data/gantt-charts/server-status-list/data.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css"/>
    <link rel="stylesheet" href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css"/>
</head>
<body>
<div id="container"></div>
</body>
<script type="module">
    import 'https://cdn.anychart.com/releases/v8/js/anychart-base.min.js'
    import 'https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js'
    import 'https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js'
    import 'https://cdn.anychart.com/releases/v8/js/anychart-gantt.min.js'
    let chart;
    anychart.onDocumentReady(() => {
        // The data used in this sample can be obtained from the CDN
        // https://cdn.anychart.com/samples-data/gantt-charts/server-status-list/data.js
        var newData = getData();

        // create data tree on our data
        var treeData = anychart.data.tree(newData, 'as-table');

        // create project gantt chart
        chart = anychart.ganttResource();

        // set data for the chart
        chart.data(treeData);

        // set start splitter position settings
        chart.splitterPosition(320);

        // get chart data grid link to set column settings
        var dataGrid = chart.dataGrid();

        dataGrid.column(0).enabled(false);

        // set first column settings
        var firstColumn = dataGrid.column(1);
        firstColumn.cellTextSettings().hAlign('left');
        firstColumn.title('Server')
                .width(140)
                .cellTextSettingsOverrider(labelTextSettingsOverrider)
                .format(item => item.get('name'));

        // set first column settings
        var secondColumn = dataGrid.column(2);
        secondColumn.cellTextSettings().hAlign('right');
        secondColumn.title('Online')
                .width(60)
                .cellTextSettingsOverrider(labelTextSettingsOverrider)
                .format(item => item.get('online') || '');

        // set first column settings
        var thirdColumn = dataGrid.column(3);
        thirdColumn.cellTextSettings().hAlign('right');
        thirdColumn.title('Maintenance')
                .width(60)
                .cellTextSettingsOverrider(labelTextSettingsOverrider)
                .format(item => item.get('maintenance') || '');

        // set first column settings
        var fourthColumn = dataGrid.column(4);
        fourthColumn.cellTextSettings().hAlign('right');
        fourthColumn.title('Offline')
                .width(60)
                .cellTextSettingsOverrider(labelTextSettingsOverrider)
                .format(item => item.get('offline') || '');

        // set container id for the chart
        chart.container('container');

        chart.draw();

        chart.zoomTo(Date.UTC(2008, 0, 31, 1, 36), Date.UTC(2008, 1, 15, 10, 3));

    });

    let labelTextSettingsOverrider = (label, item) => {
        switch (item.get('type')) {
            case 'online':
                label.fontColor('green').fontWeight('bold');
                break;
            case 'offline':
                label.fontColor('red').fontWeight('bold');
                break;
            case 'maintenance':
                label.fontColor('orange').fontWeight('bold');
                break;
        }
    }


</script>
</html>