نمودار را رسم کنید 

<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>

آخرین مرحله ترسیم نمودار است. ابتدا باید نمونه ای از کلاس نموداری را که می خواهید استفاده کنید نمونه سازی کنید و سپس باید draw() را روی آن فراخوانی کنید.

نمودار خود را نمونه برداری کنید

هر نوع نمودار بر اساس کلاس متفاوتی است که در اسناد نمودار ذکر شده است. به عنوان مثال، نمودار دایره ای بر اساس کلاس google.visualization.PieChart ، نمودار میله ای بر اساس کلاس google.visualization.BarChart و غیره است. هر دو نمودار دایره ای و میله ای در بسته هسته ای که در ابتدای این آموزش بارگذاری کردید گنجانده شده است. با این حال، اگر می‌خواهید یک نقشه درختی یا نمودار جغرافیایی در صفحه خود داشته باشید، باید بسته‌های 'treemap' یا 'geomap' را نیز بارگیری کنید .

سازندگان نمودار گوگل یک پارامتر واحد را می گیرند: ارجاع به عنصر DOM که در آن تصویرسازی را ترسیم می کند.

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

نمودار خود را رسم کنید

پس از اینکه داده ها و گزینه های خود را آماده کردید، آماده ترسیم نمودار خود هستید.

صفحه شما باید یک عنصر HTML (معمولاً یک <div> ) برای نگهداری نمودار شما داشته باشد. شما باید نمودار خود را یک مرجع به این عنصر ارسال کنید، بنابراین یک شناسه به آن اختصاص دهید که می توانید از آن برای بازیابی یک مرجع با استفاده از document.getElementById() استفاده کنید. هر چیزی که در داخل این عنصر قرار دارد با ترسیم نمودار جایگزین می شود. در نظر بگیرید که آیا باید این عنصر <div> را به صراحت اندازه بگیرید ، اما در حال حاضر، اندازه نمودار را در <div> HTML مشخص کنید.

هر نمودار از یک متد draw() پشتیبانی می‌کند که دو مقدار می‌گیرد: یک شی DataTable (یا یک DataView ) که داده‌های شما را نگه می‌دارد، و یک شی اختیاری گزینه‌های نمودار. شی گزینه مورد نیاز نیست، و می‌توانید آن را نادیده بگیرید یا برای استفاده از گزینه‌های پیش‌فرض نمودار، آن را تهی کنید.

پس از فراخوانی draw() ، نمودار شما در صفحه رسم می شود. هر بار که داده ها یا گزینه ها را تغییر می دهید و می خواهید نمودار را به روز کنید، باید متد draw() را فراخوانی کنید.

متد draw() ناهمزمان است: یعنی بلافاصله برمی گردد، اما نمونه ای که برمی گرداند ممکن است فوراً در دسترس نباشد. در بسیاری از موارد این خوب است. در نهایت نمودار رسم خواهد شد. با این حال، اگر می‌خواهید پس از فراخوانی draw() مقادیری را روی نمودار تنظیم یا بازیابی کنید، باید منتظر بمانید تا رویداد آماده را پرتاب کند، که نشان‌دهنده پر شدن آن است. گوش دادن به رویدادها را در صفحه بعدی پوشش خواهیم داد.

عیب یابی

اگر نمودار شما روی صفحه رسم نمی شود، در اینجا چند روش وجود دارد که ممکن است به شما در حل مشکلات کمک کند:

  • به دنبال اشتباهات تایپی باشید به یاد داشته باشید که جاوا اسکریپت یک زبان حساس به حروف بزرگ و کوچک است.
    • از یک دیباگر جاوا اسکریپت استفاده کنید. در فایرفاکس، می‌توانید از کنسول جاوا اسکریپت، Venkman Debugger یا افزونه Firebug استفاده کنید. در کروم می توانید از ابزارهای توسعه دهنده (Shift + Ctl + J) استفاده کنید.
  • گروه بحث Google Visualization API را جستجو کنید. اگر نمی توانید پستی را پیدا کنید که به سؤال شما پاسخ دهد، سؤال خود را به همراه پیوندی به یک صفحه وب که مشکل را نشان می دهد به گروه ارسال کنید.

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