jQuery Plugins › jQuery Chart & Graph Plugins › jQuery Charrty

jQuery Plugin For Generating Google Charts From Tables - Charrty

File Size:	465 KB
Views Total:	7692
Last Update:	09/01/2026 04:06:00 UTC
Publish Date:	03/20/2015 06:27:45 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Features

HTML tables, Google Sheets, and JavaScript arrays as chart data sources.
Bar, column, pie, line, area, geo, calendar, table, and other Google Chart types.
Responsive resizing and configurable chart aspect ratios.
Row and column filtering plus data transposition.
Custom tooltip and annotation text from table or sheet data.
Optional HTML table generation from array or Google Sheets data.
Chart zoom and X/Y offsets for chart framing.
Google Chart event handlers through the chartEvents option.

How to use it

1. Load jQuery and Charrty

Load jQuery first, then include charrty.js or charrty.min.js.

<script src="path/to/jquery.min.js"></script>
<script src="dist/js/charrty.min.js"></script>

2. Create a chart from an HTML table

Place column definitions in the first row. Charrty reads data-type values such as string, number, boolean, date, datetime, and timeofday. Use data-role="tooltip" or data-role="annotation" for Google Charts role columns.

<table id="salesTable">
  <caption>Quarterly Sales</caption>
  <tr>
    <th scope="col" data-type="string">Quarter</th>
    <th scope="col" data-type="number">Sales</th>
    <th scope="col" data-role="tooltip">Details</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>128</td>
    <td>Q1 sales: 128</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>164</td>
    <td>Q2 sales: 164</td>
  </tr>
  <tr>
    <td>Q3</td>
    <td>151</td>
    <td>Q3 sales: 151</td>
  </tr>
</table>

Apply .charrty() to the table. Charrty creates the chart container after the table when the selected element contains table data.

$('#salesTable').charrty({
  chartType: 'ColumnChart',
  showTable: 'show',
  columnChart: {
    title: 'Quarterly Sales',
    legend: {
      position: 'none'
    }
  }
});

3. Use a separate chart container

Set tableSel when the chart and source table use separate elements.

<div id="salesChart"></div>

<table id="salesData">
  ...
</table>

$('#salesChart').charrty({
  tableSel: '#salesData',
  chartType: 'BarChart',
  showTable: 'hide',
  barChart: {
    title: 'Sales by Quarter'
  }
});

4. Create a chart from JavaScript arrays

The columns option defines Google Charts column metadata. The rows option supplies the data rows.

<div id="trafficChart"></div>

$('#trafficChart').charrty({
  columns: [
    { label: 'Month', type: 'string' },
    { label: 'Visits', type: 'number' }
  ],
  rows: [
    ['January', 1840],
    ['February', 2210],
    ['March', 2475]
  ],
  chartType: 'LineChart',
  lineChart: {
    title: 'Monthly Visits'
  }
});

5. Use Google Sheets data

Charrty accepts a public Google Sheet key through googleSheetKey. The plugin fetches the sheet as CSV before it builds the chart.

<div id="sheetChart"></div>

$('#sheetChart').charrty({
  googleSheetKey: 'YOUR_PUBLIC_SHEET_KEY',
  chartType: 'PieChart',
  pieChart: {
    title: 'Traffic Sources'
  }
});

Google Sheets compatibility: Charrty currently requests the older spreadsheets.google.com/spreadsheet/pub?key=...&output=csv endpoint. Google Charts now documents the /gviz/tq query endpoint for spreadsheet data and requires authorization for private sheets. Test the googleSheetKey workflow with your sheet before using it in a production project.

6. Add Google Chart event handlers

Pass Google Visualization event names and handler functions through chartEvents. Available event names depend on the selected Google Chart type.

$('#interactiveChart').charrty({
  columns: [
    { label: 'Category', type: 'string' },
    { label: 'Value', type: 'number' }
  ],
  rows: [
    ['Alpha', 42],
    ['Beta', 31],
    ['Gamma', 27]
  ],
  chartType: 'PieChart',
  chartEvents: [
    {
      event: 'select',
      handler: function () {
        console.log('Chart selection changed');
      }
    }
  ]
});

Charrty Options

Data Source and Transformation Options

Option	Description
`googleSheetKey`	Google Sheet key used by the built-in CSV request. Default: `false`.
`columns`	Array of Google Charts column definitions. Default: `false`.
`rows`	Array of data rows. Default: `false`.
`colIndexes`	Column indexes where array data should be inserted into table or sheet data. Default: `false`.
`tableSel`	jQuery selector for the HTML table used as the data source. Default: `false`.
`dataTitle`	Title for the data set and generated table caption. Default: `false`.
`createTable`	Creates a table from chart data. Values: `false`, `basic-table`, or `table-chart`. Default: `false`.
`ignoreRow`	Array of row indexes to exclude from HTML table or Google Sheets data. Default: `[]`.
`ignoreCol`	Array of column indexes to exclude from HTML table or Google Sheets data. Default: `[]`.
`transpose`	Swaps rows and columns for table or sheet data. Default: `false`.
`tooltipConcat`	Template string for custom tooltip text. Supports `domain`, `data`, and `label` keywords. Default: `false`.
`annotationConcat`	Template string for custom annotation text. Supports `domain`, `data`, and `label` keywords. Default: `false`.

Chart Setup and Rendering Options

Option	Description
`urlJSAPI`	URL that Charrty loads before it calls the Google Charts loader API. Default: `https://www.google.com/jsapi`.
`chartType`	Google Visualization constructor name, such as `BarChart`, `PieChart`, `ColumnChart`, `Calendar`, `GeoChart`, or `Table`. Default: `BarChart`.
`chartId`	ID for the chart container. Charrty creates a random ID when no ID is supplied.
`chartClass`	Class applied to the chart container. Default: `chtr-chart`.
`tableId`	ID for the source or generated table. Charrty creates a random ID when no ID is supplied.
`tableClass`	Class applied to the source or generated table. Default: `chtr-table`.
`chartAspectRatio`	Width-to-height ratio used for responsive chart dimensions. Default: `false`.
`chartZoom`	CSS transform scale applied to the chart canvas. Default: `0`.
`chartOffset`	Array with X and Y percentage offsets for chart framing. Default: `false`.
`chartEvents`	Array of objects with `event` and `handler` properties for Google Chart events. Default: `false`.
`chartOptions`	Generic Google Chart options object. Charrty uses it when present and otherwise checks the chart-specific option object.

Chart-specific Option Objects

Option	Description
`barChart`	Google Bar Chart options plus Charrty defaults for font, chart area, and legend.
`pieChart`	Google Pie Chart options plus Charrty defaults for font and chart area.
`columnChart`	Google Column Chart options plus Charrty defaults for font, chart area, and legend.
`lineChart`	Google Line Chart options plus Charrty defaults for font, chart area, and legend.
`areaChart`	Google Area Chart options plus Charrty defaults for font, chart area, and legend.
`geoChart`	GeoChart options. Charrty also supports a custom title tag through `titleTextStyle.tag`.
`calendar`	Calendar options plus Charrty settings for cell scaling, title text, month labels, day labels, and tooltip text.
`table`	Table Chart options plus Charrty settings for font, formatter, HTML cells, and CSS class names.

Table and Chart Visibility Options

Option	Description
`showTable`	Controls the HTML table after the chart loads. Values: `show`, `hide`, or `remove`. Default: `hide`.
`showTableCSS`	CSS object applied when Charrty shows the table.
`hideTableCSS`	CSS object applied when Charrty hides the table.
`showChartCSS`	CSS object applied when Charrty shows the chart.
`hideChartCSS`	CSS object applied when Charrty hides the chart. Default opacity: `0`.

Google Charts Loader Compatibility

Charrty currently loads https://www.google.com/jsapi and then calls google.load('visualization', '1', ...). Google Charts now uses https://www.gstatic.com/charts/loader.js with google.charts.load(). Changing only urlJSAPI does not update Charrty's loader call, since the plugin code calls google.load() after the script loads.

Alternatives and Related Resources

Changelog

2026-08-25

Project renamed from Chartinator to Charrty. The plugin method changed to .charrty(), and the JavaScript files changed to charrty.js and charrty.min.js.

2015-06-16

v0.3.10

2015-05-08

v0.3.9

2015-04-14

v0.3.8

2015-03-25

v0.2.2

This awesome jQuery plugin is developed by jbowyers. For more Advanced Usages, please check the demo page or visit the official website.