DBILITY

google chart sample 본문

front-end & ui/html

google chart sample

DBILITY 2020. 12. 19. 17:11
반응형
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<h2>Draw Graph using Google Chart</h2>
<h3>Vote for Favorite fruits</h3>
<div id="chartDiv" style="height:500px"></div>
<script>
    var fruitsData = [
        ['Kinds', 'Count'],
        ['Apple', 3], ['Banana', 4], ['Orange', 5], ['Strawberry', 1], ['Watermelon', 3], ['melon', 3]
    ];

    var drawBasic = function() {
        var data = google.visualization.arrayToDataTable(fruitsData);
        var options = {title: 'Favorite Fruits', 'is3D': true};
        var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));
        console.log(data);
        console.log(options);
        console.log(chart);
        chart.draw(data, options);
    };
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawBasic);

</script>
</body>
</html>
반응형

'front-end & ui > html' 카테고리의 다른 글

web pdf viewer iframe toolbar disable ( pdf 툴바 제거 )  (0) 2023.01.12
공유하기 링크
'front-end & ui/html' Related Articles more
Comments