Gist 3742278

100%

✓ Published0🌍 Public

Last edited Sep 18, 2012

Created on Sep 18, 2012

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 3742279

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.

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

69% 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

69% 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

68% 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

67% match

Loading thumbnail…

Untitled

This example displays two Google Charts visualizations side by side: a pie chart and a bar chart, both titled “How Much Pizza I Ate Last Night.” The charts present the same categorical dataset of pizza toppings with corresponding slice counts. The code uses the Google Charts loader and the `corechart` package to create a `DataTable`, then instantiates a `google.visualization.ScatterChart` (mislabeled as pie) and a `google.visualization.BarChart`. Each chart is drawn into a separate `div` element with predefined width and height options.

Aavesh1998

66% 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

65% match

Loading thumbnail…

Gist 3738160

This visualization shows a network of nodes connected by seven links, with the entire graph laid out using a force-directed algorithm. The node positions and connections are defined in the JavaScript data structures `linksTable` and `linksTable2`, which are passed to Google’s `google.visualization.arrayToDataTable` for formatting. The graph is rendered as an interactive force simulation, allowing nodes to repel and links to attract, producing a stable, organic layout. The example relies on the `d3.forceSimulation` engine to compute the physics, while the static node and edge geometry is drawn via standard D3 rendering. The data itself is hard-coded in the `gistfile1.js` file.

RRCura

65% match