jQuery Plugin For Producing Google Charts From Tables – Charrty

Charrty, previously Chartinator, is a jQuery plugin that turns HTML tables, Google Sheets information, and JavaScript arrays into Google Charts.

It helps responsive chart sizing, table-to-chart conversion, information transformation, annotations, tooltips, and Google Chart occasion handlers.

Options

• HTML tables, Google Sheets, and JavaScript arrays as chart information sources.
• Bar, column, pie, line, space, geo, calendar, desk, and different Google Chart sorts.
• Responsive resizing and configurable chart facet ratios.
• Row and column filtering plus information transposition.
• Customized tooltip and annotation textual content from desk or sheet information.
• Elective HTML desk technology from array or Google Sheets information.
• Chart zoom and X/Y offsets for chart framing.
• Google Chart occasion handlers by way of the chartEvents possibility.

Find out how to use it

1. Load jQuery and Charrty

Load jQuery first, then embrace 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 desk

Place column definitions within the first row. Charrty reads data-type values resembling string, quantity, boolean, date, datetime, and timeofday. Use data-role="tooltip" or data-role="annotation" for Google Charts function columns.

<desk id="salesTable">
  <caption>Quarterly Gross sales</caption>
  <tr>
    <th scope="col" data-type="string">Quarter</th>
    <th scope="col" data-type="quantity">Gross sales</th>
    <th scope="col" data-role="tooltip">Particulars</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>128</td>
    <td>Q1 gross sales: 128</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>164</td>
    <td>Q2 gross sales: 164</td>
  </tr>
  <tr>
    <td>Q3</td>
    <td>151</td>
    <td>Q3 gross sales: 151</td>
  </tr>
</desk>

Apply .charrty() to the desk. Charrty creates the chart container after the desk when the chosen component incorporates desk information.

$('#salesTable').charrty({
  chartType: 'ColumnChart',
  showTable: 'present',
  columnChart: {
    title: 'Quarterly Gross sales',
    legend: {
      place: 'none'
    }
  }
});

3. Use a separate chart container

Set tableSel when the chart and supply desk use separate parts.

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

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

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

4. Create a chart from JavaScript arrays

The columns possibility defines Google Charts column metadata. The rows possibility provides the info 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: 'Month-to-month Visits'
  }
});

5. Use Google Sheets information

Charrty accepts a public Google Sheet key by way of googleSheetKey. The plugin fetches the sheet as CSV earlier than it builds the chart.

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

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

Google Sheets compatibility: Charrty at the moment requests the older spreadsheets.google.com/spreadsheet/pub?key=...&output=csv endpoint. Google Charts now paperwork the /gviz/tq question endpoint for spreadsheet information and requires authorization for personal sheets. Take a look at the googleSheetKey workflow along with your sheet earlier than utilizing it in a manufacturing venture.

6. Add Google Chart occasion handlers

Go Google Visualization occasion names and handler capabilities by way of chartEvents. Accessible occasion names rely on the chosen Google Chart sort.

$('#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 Choices

Information Supply and Transformation Choices

Chart Setup and Rendering Choices

Chart-specific Choice Objects

Desk and Chart Visibility Choices

Google Charts Loader Compatibility

Charrty at the moment hundreds https://www.google.com/jsapi after which calls google.load('visualization', '1', ...). Google Charts now makes use of https://www.gstatic.com/charts/loader.js with google.charts.load(). Altering solely urlJSAPI doesn’t replace Charrty’s loader name, because the plugin code calls google.load() after the script hundreds.

Alternate options and Associated Assets

Changelog

2026-08-25

• Undertaking renamed from Chartinator to Charrty. The plugin methodology modified to .charrty(), and the JavaScript information modified to charrty.js and charrty.min.js.

2015-06-16

2015-05-08

2015-04-14

2015-03-25

This superior jQuery plugin is developed by jbowyers. For extra Superior Usages, please examine the demo web page or go to the official web site.