داده ها را آماده کنید

<html>
  <head>
    <!--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 piechart package.
      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 our 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" style="width:400; height:300"></div>
  </body>
</html>

یک DataTable ایجاد کنید

همه نمودارها به داده نیاز دارند. نمودارهای ابزار نمودار گوگل نیاز دارند که داده ها در یک کلاس جاوا اسکریپت به نام google.visualization.DataTable . این کلاس در کتابخانه Google Visualization که قبلاً بارگیری کرده اید تعریف شده است.

DataTable یک جدول دو بعدی با ردیف و ستون است که در آن هر ستون یک نوع داده، یک شناسه اختیاری و یک برچسب اختیاری دارد. مثال بالا جدول زیر را ایجاد می کند:

نوع: رشته
برچسب: تاپینگ		 نوع: شماره
برچسب: برش ها
قارچ 3
پیازها 1
زیتون 1
کدو سبز 1
پپرونی 2

چندین راه برای ایجاد DataTable وجود دارد. می توانید لیست و مقایسه هر تکنیک را در DataTables و DataViews مشاهده کنید. می‌توانید داده‌های خود را پس از افزودن آن‌ها تغییر دهید و ستون‌ها و ردیف‌ها را اضافه، ویرایش یا حذف کنید.

شما باید DataTable نمودار خود را در قالبی سازماندهی کنید که نمودار انتظار دارد: به عنوان مثال، هر دو نمودار میله ای و دایره ای به یک جدول دو ستونی نیاز دارند که در آن هر ردیف نشان دهنده یک برش یا میله است. ستون اول برچسب برش یا نوار و ستون دوم مقدار برش یا نوار است. نمودارهای دیگر به قالب های جدول متفاوت و احتمالاً پیچیده تری نیاز دارند. برای یادگیری قالب داده های مورد نیاز، به مستندات نمودار خود مراجعه کنید.

به جای پر کردن جدول، می‌توانید وب‌سایتی را که از پروتکل Chart Tools Datasource پشتیبانی می‌کند - برای مثال، صفحه‌گسترده‌های Google - پرس و جو کنید. با استفاده از شی google.visualization.Query ، می توانید یک پرس و جو را به یک وب سایت ارسال کنید و یک شی DataTable پر شده را دریافت کنید که می توانید آن را در نمودار خود ارسال کنید. برای یادگیری نحوه ارسال پرس و جو به مبحث پیشرفته Querying a Datasource مراجعه کنید.

اطلاعات بیشتر