דף זה תורגם על ידי Cloud Translation API.

מכינים את הנתונים

<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 Charts, יש לעטוף את הנתונים בכיתת JavaScript שנקראת google.visualization.DataTable. הכיתה מוגדרת בספריית התצוגה החזותית של Google, שטענתם בעבר.

DataTable היא טבלה דו-ממדית עם שורות ועמודות, שבה לכל עמודה יש סוג נתונים, מזהה אופציונלי ותווית אופציונלית. הדוגמה שלמעלה יוצרת את הטבלה הבאה:

type: string תווית: ציפוי	type: number label: פרוסות
פטריות	3
בצלים	1
זיתים	1
זוקיני	1
פפרוני	2

יש כמה שיטות ליצור DataTable. רשימה והשוואה של כל שיטה מופיעות ב-DataTables וב-DataViews. ניתן לשנות את הנתונים אחרי שמוסיפים אותם, ולהוסיף, לערוך או להסיר עמודות ושורות.

יש לארגן את ה-DataTable של התרשים בפורמט שמוצג בתרשים: לדוגמה, גם תרשים העמודות וגם תרשימי העוגה מחייבים טבלה עם שתי עמודות, שבה כל שורה מייצגת פלח או עמודה. העמודה הראשונה כוללת את תווית הפלח או העמודה, והעמודה השנייה היא ערך הפלח או העמודה. לתרשימים אחרים נדרשים פורמטים שונים של טבלאות ועשויים להיות מורכבים יותר. מידע נוסף על פורמט הנתונים הנדרש זמין במסמכי התרשים.

במקום למלא את הטבלה בעצמך, אפשר במקום זאת להריץ שאילתה על אתר שתומך בפרוטוקול Data Source של תרשים התרשימים – לדוגמה, דף של Google Sheets. באמצעות האובייקט google.visualization.Query, אפשר לשלוח שאילתה לאתר ולקבל אובייקט DataTable מאוכלס, שאותו אפשר להעביר לתרשים. רוצים לדעת איך שולחים שאילתה? עיינו בנושא המתקדם Querying a datasource.

השלב הבא: התאמה אישית של התרשים

מכינים את הנתונים

צור DataTable

מידע נוסף

צור `DataTable`