Gist 3742279

100%

✓ Published0🌍 Public

Last edited Sep 18, 2012

Created on Sep 18, 2012

This example builds a small HTML form to trigger an interactive test of Google's Visualization API, version 1. The code defines a data table (`gAxesTable`) with three fictional axes, each given an id, label, title, and type. When the user clicks the "TEST" button, the script populates the page’s `result` div with the table’s JSON representation via `google.visualization.DataTable` and its `toJSON()` method. The demonstration focuses on how to initialize the API and serialize structured data for display.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 3742278

This example demonstrates a minimal web-based test harness for the Google Visualization API. It defines a data table with three axes, each containing an identifier, display text, title, and type, and renders a simple form with a submit button. When the button is clicked, the `test()` function calls `init()`, then displays the table’s JSON representation in a `div` element via `innerHTML`. The code relies on `google.load("visualization", "1")` and the `google.visualization.DataTable` class to structure the data, though no actual chart or graphical output is generated.

RRCura

90% match

Loading thumbnail…

Gist 121d4ca177a743cfedfd

This example uses Google's Visualization API to render an area chart tracking the number of Google search results for the term "data" from 2002 to 2012. The code loads the `corechart` package, creates a `DataTable` with year and result-count columns, and draws the chart inside a `<div>` with a smooth `curveType: "function"`. It sets custom styling for title, axes, and colors, and handles window resizing via `$(window).smartresize()` to redraw the chart responsively. The data is hardcoded in the script, with values rising from 7.39 million to 470 million results.

DDStruths

67% match

Loading thumbnail…

Gist 3744189

This example shows a JavaScript function that merges two Google Visualization DataTables into a single table, combining rows from both inputs and filling missing columns with the string “nop.” The code uses the Google Visualization API, specifically `DataTable` methods like `addColumn`, `addRows`, `getColumnIndex`, and `setValue`. It iterates over a provided list of column names, checks whether each table contains those columns, and copies values when present. The resulting table preserves the union of columns and concatenates all rows, making it useful for comparing or unifying datasets in a charting context.

RRCura

66% match

Loading thumbnail…

Gist 3742319

This example is a simple HTML form that displays a static text string, “ABC,” in a div, with a button labeled “TEST.” The page’s JavaScript defines a variable, `testvar`, with a value of `JIHIBNBUI`, and a `test()` function that assigns that variable to the div’s `innerHTML` property when the button is clicked. The code uses no external libraries or data sources, relying solely on plain JavaScript and the Document Object Model (DOM) to update the content. It demonstrates a basic event-handling interaction without any visualization or charting.

RRCura

64% match

Loading thumbnail…

Untitled

This example embeds an image inside a Google Visualization table cell, demonstrating how HTML content can be rendered within a chart. It displays a single row with a politician label and a green W3Schools image, using the Google Charts loader and the `google.visualization.Table` API with `allowHtml: true` to enable the image tag. The table is drawn into a fixed-size div, and the code relies on the `google.charts.load` and `google.load` calls to initialize the visualization libraries.

CCaparino

64% match

Loading thumbnail…

Untitled

This example presents two scatter plots, one large and one small, using Google Charts. Both plots display six data points with x and y coordinates, rendered as an interactive scatter chart titled "Scatter Plot." The code loads the Google Charts library through a script tag and initializes the chart with the `google.visualization.arrayToDataTable` and `ScatterChart` APIs. A third scatter plot uses CanvasJS to visualize income versus savings data for 50 individuals, with custom axes and triangle markers.

Aavesh1998

64% match

Loading thumbnail…

D3 + leaflet + GForm

This example combines D3.js, Leaflet, and the Google Maps Geocoding API to visualize geocoded data from a Google Form spreadsheet on an interactive map. Circles are drawn on a Leaflet map using D3, with their positions updated based on the map view. The circles' fill colors correspond to categories in the data, and hovering over a circle triggers a smooth elastic transition that enlarges it, while clicking displays the venue's name, formatted address, and timestamp in an HTML tooltip panel. The map and circles animate in response to panning and zooming, and the data is loaded dynamically via Tabletop from a public Google Sheet.

FFedericopvs

63% match

Loading thumbnail…

Data Visualization Project

This example presents a gallery of visualizations, beginning with an embedded Tableau public dashboard and including multiple iframes of D3-based charts such as bar, pie, scatter, tree, and 3D bar graphs hosted on VizHub. The page also references Google Colab and Figma-embedded screenshots. Built with React, the code uses standard HTML, CSS, and JavaScript to lay out these components, with the Tableau Viz API script loading the interactive dashboard and VizHub iframes displaying the individual charts.

Aav.dj.2000@gmail.com

62% match