שרטוט התרשים 

<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, וכן הלאה. גם תרשימי העוגה וגם תרשימי העמודות כלולים בחבילת תרשים הליבה שטענתם בתחילת המדריך הזה. עם זאת, אם רוצים להציג מפת נתיב או תרשים גיאוגרפי בדף, צריך לטעון גם את החבילות 'מפת הגעה' או 'מפה גיאוגרפית'.

בוני תרשימים של Google משתמשים בפרמטר יחיד: הפניה לרכיב DOM שבו צריך לשרטט את התצוגה החזותית.

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

איך משרטטים תרשים

אחרי שתכינו את הנתונים והאפשרויות, תהיו מוכנים לשרטט את התרשים.

הדף צריך לכלול רכיב HTML (בדרך כלל <div>) כדי להכיל את התרשים. צריך להעביר לתרשים הפניה לאלמנט הזה, לכן צריך להקצות לו מזהה שישמש לאחזור קובץ עזר באמצעות document.getElementById(). כל מה שבתוך הרכיב הזה יוחלף בתרשים בזמן השרטוט. כדאי לשקול אם צריך להגדיר את הגודל של רכיב ה-<div> הזה באופן מפורש, אבל בינתיים צריך לציין את גודל התרשים ב-HTML של <div>.

כל תרשים תומך בשיטה draw() שמקבלת שני ערכים: אובייקט DataTable (או DataView) שמכיל את הנתונים, ואובייקט אופציונלי של אפשרויות תרשים. אובייקט האפשרויות אינו נדרש, ואפשר להתעלם ממנו או להעביר ערך null כדי להשתמש באפשרויות ברירת המחדל של התרשים.

לאחר הקריאה אל draw(), התרשים שלך יצויר בדף. צריך להפעיל את ה-method draw() בכל פעם שמשנים את הנתונים או את האפשרויות ורוצים לעדכן את התרשים.

ה-method draw() היא אסינכרונית: כלומר, היא חוזרת באופן מיידי, אבל יכול להיות שהמכונה שהיא מחזירה לא זמינה באופן מיידי. במקרים רבים זה בסדר, בסופו של דבר יש גרפי בתרשים. עם זאת, אם רוצים להגדיר או לאחזר ערכים בתרשים אחרי קריאה אל draw(), צריך להמתין עד שהאירוע המוכן יקפיץ את האירוע המוכן, שמציין שהוא מאוכלס. בדף הבא נעסוק בהאזנה לאירועים.

פתרון בעיות

אם התרשים לא מוצג בדף, הנה כמה גישות שיכולות לעזור לכם לפתור את הבעיות:

  • מחפשים שגיאות הקלדה. חשוב לזכור ש-JavaScript היא שפה תלוית אותיות רישיות.
    • שימוש בכלי לניפוי באגים של JavaScript. ב-Firefox, אפשר להשתמש במסוף JavaScript, ב- Venkman Debugger או בתוסף Firebug. ב-Chrome, אפשר להשתמש בכלים למפתחים (Shift + Ctl + J).
  • מחפשים בקבוצת הדיון של GoogleVisual API. אם לא מצאת פוסט שיענה על השאלה שלך, אפשר לפרסם את השאלה בקבוצה יחד עם קישור לדף אינטרנט שמדגים את הבעיה.

 

 

 

מידע נוסף