סרגל הכלים

  1. סקירה כללית
  2. דוגמה
  3. שימוש
    1. סוגי פלט
    2. תחביר
  4. המדיניות בנושא נתונים

סקירה כללית

אפשר להוסיף רכיב של סרגל כלים לכל תצוגה חזותית כדי לאפשר למשתמש לייצא את הנתונים הבסיסיים לקובץ CSV או לטבלת HTML, או לספק קוד להטמעת התצוגה בדף אינטרנט או בגאדג'ט אקראי.

מאת: Google

דוגמה

בוחרים באחת מהאפשרויות שמוצגות בסרגל הכלים.

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

שימוש

מוסיפים סרגל כלים לדף על ידי שליחת קריאה ל-method google.visualization.drawToolbar(), כדי לאכלס אותה בסוגי הייצוא המותרים ובנתונים הנדרשים לכל אחד מהם.

כדי להשתמש בסרגל כלים, התצוגה החזותית צריכה לקבל את הנתונים מכתובת URL. אי אפשר להעביר באובייקטים של DataTable או DataView שאוכלסו באופן ידני. כתובת ה-URL של הנתונים שמשמשים לאכלוס התצוגה החזותית תעבור לשיטה drawToolbar().

אם אתם רוצים לספק רכיב של BigQuery או רכיב iFrame שניתן להטמעה שמכיל את הגאדג'ט, צריכה להיות לכם כתובת URL של גרסה גאדג'טית של התצוגה החזותית.

סוגי פלט

בסרגל הכלים אפשר להציע למשתמשים אפשרות לבחור באחד או יותר מסוגי הפלט הבאים, בהתאם לאופן שבו מגדירים את סרגל הכלים בשיטה drawToolbar():

  • גרסת CSV פשוטה של הנתונים (שהדפדפן יעבד או יציע להוריד ולשמור, בהתאם להגדרות הדפדפן ו/או
  • טבלת HTML שמכילה את הנתונים, שנפתחת בחלון דפדפן חדש ו/או
  • את קוד ה-HTML <iframe> כדי להטמיע את התצוגה החזותית הזו בדף אינטרנט, ו/או
  • קישור לדף המאפשר למשתמש להטמיע גאדג'ט זה בדף ה-iGoogle שלו.

תחביר

google.visualization.drawToolbar(container, components)

פרמטרים

קונטיינר
נקודת אחיזה לרכיב DOM בדף. ממשק ה-API יצייר את סרגל הכלים לאלמנט הזה. הערך הזה דומה לפרמטר של מאגר התגים לתצוגה חזותית רגילה. צריך להציב את סרגל הכלים ליד התצוגה החזותית שמשתמשת בו.
רכיבים
מערך אובייקטים, שכל אחד מהם מתאר פורמט שאליו אפשר לייצא את הנתונים או את התצוגה החזותית. סרגל הכלים יציג את האפשרויות למשתמש לפי הסדר שבו הן נוספו למערך. לכל אובייקט יש מאפיין סוג שמתאר את הפורמט, ומאפיין נוסף אחד או יותר, בהתאם לסוג:
  • type: 'csv' – האפשרות הזו מייצאת את הנתונים לקובץ ערכים שמופרדים בפסיקים. תיבת הדו-שיח 'שמירה בשם' תיפתח בדפדפן.
    • datasource: 'string' - כתובת ה-URL של מקור הנתונים.
  • type: html' – האפשרות הזו מייצאת את הנתונים לטבלת HTML. הדף עם טבלת הנתונים ייפתח בחלון חדש בדפדפן.
    • datasource: מחרוזת כתובת ה-URL של מקור הנתונים.
  • type: igoogle - אפשרות זו מאפשרת למשתמשים להוסיף את התצוגה החזותית לדף ה-iGoogle שלהם. ייפתח הדף 'הוספה ל-iGoogle' בדפדפן. יש להשתמש באפשרות הזו רק אם התצוגה החזותית זמינה בגרסה גאדג'ט.
    • datasource: מחרוזת כתובת ה-URL של מקור הנתונים.
    • GAIA: המחרוזת של כתובת ה-URL של הגרסה הגאדג'טנית בפורמט XML. שימו לב שהתצוגה החזותית שאליה משויך סרגל הכלים לא חייבת להיות הגרסה הגאדג'ט.
    • userprefs: אובייקט העדפות אופציונלי שמתאים להמחשה חזותית, שמציין את ההעדפות להמחשה.
  • type: htmlcode - האפשרות הזו יוצרת בלוק של קוד HTML שהמשתמש יכול להטמיע בדף אינטרנט כדי להציג את התצוגה בתוך iframe. ייפתח בדפדפן חלון קופץ עם רכיב ה-HTML המדויק של הגאדג'ט.יש להשתמש באפשרות הזו רק אם התצוגה החזותית זמינה בגרסה גאדג'ט.
    • datasource: מחרוזת כתובת ה-URL של מקור הנתונים.
    • GAIA: המחרוזת של כתובת ה-URL של הגאדג'ט מסוג XML.
    • userprefs: אובייקט העדפות אופציונלי שמתאים להמחשה חזותית, שמציין את ההעדפות להמחשה.
    • style: מחרוזת אופציונלית לסגנון של ה-iframe. לדוגמה: 'width: 300px;height: 500px;'.

דוגמה

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

המדיניות בנושא נתונים

כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא נשלחים נתונים לאף שרת. בחלק מהרכיבים, הנתונים נלקחים ממקור הנתונים המתאים שניתן לסרגל הכלים.

התאמה לשוק המקומי

סרגל הכלים תומך כרגע רק באנגלית ארה"ב.