목차

HOW TO - Google Chart

  • description : How TO - Google Chart
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-09


Ref

Google Charts - Quick Start

Pie Chart


<!DOCTYPE html>
<html>
 
<head>
    <title>Google Pie Chart</title>
    <!-- Load the AJAX API -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
 
        // Load the Visualization API and the corechart packgage.
        google.charts.load('current', { 'packages': ['corechart'] });
 
        //Set a callback to run when the Google Visualization API is loaded. 
        google.charts.setOnLoadCallback(drawChart);
 
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it. 
        function drawChart() {
 
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                ['Mushrooms', 3],
                ['Onions', 1],
                ['Olives', 1],
                ['Zucchini', 1],
                ['Pepperoni', 2]
            ]);
 
            // Set chart options
            var options = {
                'title': 'How Much Pizza I Ate Last Night',
                'width': 400,
                'height': 300
            };
 
            // Instantiate and draw out chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>
 
<body>
    <!-- Div that will hold the pie chart -->
    <div id="chart_div"></div>
</body>
 
</html>

BarChart


<!DOCTYPE html>
<html>
 
<head>
    <title>Google Bar Chart</title>
    <!-- Load the AJAX API -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
 
        // Load the Visualization API and the corechart packgage.
        google.charts.load('current', { 'packages': ['corechart'] });
 
        //Set a callback to run when the Google Visualization API is loaded. 
        google.charts.setOnLoadCallback(drawChart);
 
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it. 
        function drawChart() {
 
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows([
                ['Mushrooms', 3],
                ['Onions', 1],
                ['Olives', 1],
                ['Zucchini', 1],
                ['Pepperoni', 2]
            ]);
 
            // Set chart options
            var options = {
                'title': 'How Much Pizza I Ate Last Night',
                'width': 500,
                'height': 300
            };
 
            // Instantiate and draw out chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>
 
<body>
    <!-- Div that will hold the pie chart -->
    <div id="chart_div"></div>
</body>
 
</html>
, ,