Gist 3744189

100%

✓ Published0🌍 Public

Last edited Sep 18, 2012

Created on Sep 18, 2012

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.

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

69% match

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

66% match

Loading thumbnail…

Useful functions

This example demonstrates a reusable JavaScript function for joining two datasets, enabling efficient data combination in visualization workflows. It builds an index from a lookup table and then maps rows from a main table through that index, selecting only the desired columns. The code shows a raw implementation of a lookup-table join, similar to SQL-style joins, with a commented usage example that merges brand and article data. The example relies on plain JavaScript arrays and objects, with no external libraries, making it a lightweight utility for preprocessing data before visualization.

RRodolfo Viana

62% match

Loading thumbnail…

Gist 585199

This visualization loads an external CSV file and parses its rows into JavaScript objects, mapping each column name from an array to the corresponding values in each line. It handles quoted fields that contain commas by merging split segments until the quote count is even, and it logs warnings for malformed lines that do not match the expected number of columns. The example demonstrates a reusable CSV-asynchronous-loading helper, but does not show any charting, layout, or rendering code beyond the data preparation stage.

RRandomEtc

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

60% match

Loading thumbnail…

datatable

This example combines D3.js with the DataTables jQuery plugin to create an interactive data table and a linked bar-chart-style visualization of 500 generated rows. The page renders a scrollable, reorderable table with columns for ID, names, ZIP code, and country, while a horizontal row of thin rectangles above it represents each record. Hovering over a rectangle triggers a throttled mouseover event that scrolls the corresponding table row into view and highlights it, with a text element displaying the row index. The table uses the Scroller extension for virtual rendering and RowReorder for drag-and-drop sorting, while D3 manages the SVG rectangles and event handling.

AAlainRo

60% match

Loading thumbnail…

Gist a5a48620f47ddaa0208a2b226e4ca111

This example shows a deeply nested, table-like data structure where sensory attributes such as “Aparencia” and “Color” are repeatedly wrapped in layers of “No aplica” headers, ultimately ending in the accessor fields `aparencia` and `color`. The visualization presents this hierarchical arrangement as a column-oriented table, using the `columns.json` configuration to define multi-level grouping. The code relies on a generic table-rendering API, likely from a React-based library like `react-table`, which consumes the `columns` array to generate headers and cells. The rendering approach emphasizes the recursive nesting of metadata rather than a direct visual encoding, with no additional JavaScript libraries such as `d3` or animation shown.

EErnestoR

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

59% match