JavaScript-Graphical-Charts/3D-piechart.html at main · wbhoomika/JavaScript-Graphical-Charts · 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
<html>

<head>
    <title>3D Piechart</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load("current", { packages: ["corechart"] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                  ['Task', 'Hours per Day'],
                  ['Work',     11],
                  ['Eat',      2],
                  ['Commute',  2],
                  ['Watch TV', 2],
                  ['Sleep',    7]
            ]);

            var options = {
                title: 'Daily Activities',
                is3D: true,
            };


            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
            chart.draw(data, options);
        }

        google.charts.setOnLoadCallback(drawChart1);
        function drawChart1() {
            var data1 = google.visualization.arrayToDataTable([
                  ['Language', 'Speakers (in millions)'],
                  ['German',  5.85],
                  ['French',  1.66],
                  ['Italian', 0.316],
                  ['Romansh', 0.0791]
            ]);

            var options1 = {
                title: 'Swiss Language Use',
                is3D: true,
            };

            var chart1 = new google.visualization.PieChart(document.getElementById('piechart1'));
            chart1.draw(data1, options1);
        }
    </script>
    <style>
        .row {
            display: flex;
            position: absolute;

        }
    </style>
</head>

<body>
    <div class="row">
        <div id="piechart" style="width: 500px; height: 500px;"></div>
        <div id="piechart1" style="width: 500px; height: 500px;"></div>
    </div>
</body>

</html>