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

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

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

סוג: מחרוזת
תווית: ציפוי		 סוג: מספר
תווית: פרוסות
פטריות 3
בצלים 1
זיתים 1
זוקיני 1
פפרוני 2

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

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

במקום לאכלס טבלה בעצמכם, תוכלו לשלוח שאילתה לאתר שתומך בפרוטוקול Datasource של כלי תרשימים – לדוגמה, דף של Google Sheets. באמצעות האובייקט google.visualization.Query אפשר לשלוח שאילתה לאתר ולקבל אובייקט DataTable מאוכלס, שאותו אפשר להעביר לתרשים. כדי ללמוד איך לשלוח שאילתה, עיינו בנושא המתקדם שליחת שאילתות למקור נתונים.

 

מידע נוסף