jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts.

Use data from HTML tables

Chartinator is designed to extract data from HTML tables. The header cells (the third elements) of the HTML table must be in the first row (or first column if the table is toggled) and must contain a DataType attribute with one of the following values:

‘string’
‘number’
‘boolean’
‘date’
‘datetime’
‘timeofday’

or the Data Role attribute with one of the following values:

‘tooltip’
‘annotation’

The text of the caption element will be used as the title of the chart by default.

You can also restructure the data extracted from the HTML table by adding the data and replacing it with the data in the js data arrays. For example, you can add column headers, data columns, and data rows. You can also remove and replace headers and columns and move data around.

Use data from Google Sheets

You can also use data from Google Sheets to define graph data. Data extracted from google spreadsheets can be added and replaced with data in js data arrays. For example, you can add column headers, data columns, and data rows. You can also remove and replace headers and columns and move data around.

Using data from JavaScript arrays

You can also use data from JavaScript arrays that you create to completely define schema data, or add to and replace data extracted from an HTML table or Google Sheets, including column headers.

Note: Google Charts does not apply a table caption to this chart. Chartinator adds a caption to the table taken from the HTML spreadsheet or from the chartTitle option. For a full list of table chart options, visit Google Table Charts.

Features

Chartinator currently supports the following:

Create all kinds of charts using Google Charts.
Extract data from HTML tables, Google Sheets, and JavaScript arrays.
Accessible Data – Using HTML tables as data sources make data accessible for screen readers and search bots.
Create HTML tables from other data sources – Makes data extracted from JS arrays and Google Sheets accessible.
Easily show and hide HTML tables.
Process data extracted from HTML tables and Google Sheets using JavaScript arrays.
Data switch – switch rows and columns.
Resizing charts on the screen – Responsive web design.
Control the aspect ratio of the graph.
Technical Orientation – graph zooming and shifting – is useful for optimizing the area displayed in geographical charts.
Customizable graph hints and annotations.
Customize all Google Chart options – fonts, colors, graph format, etc.
Add Google Schema event handlers – Event handlers can be specified in the options.

Must Read: Create Simple Percentage Circles charts Using SVG | MK Charts

How to make use of it:

1. Include the jQuery Chartinator plug-in after loading the jQuery library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/chartinator.js" ></script>

2. The th elements in the HTML table must have one of the following Data Type attributes:

<table id="myTable" class="barChart data-table">
  <caption>Student Nationalities Table</caption>
  <tr>
      <th scope="col" data-type="string">Country</th>
      <th scope="col" data-type="number">Number of Students</th>
  </tr>
  <tr>
      <td>Bulgaria</td>
      <td align="right">1</td>
  </tr>
  <tr>
      <td>China</td>
      <td align="right">19</td>
  </tr>
  <tr>
      <td>Colombia</td>
      <td align="right">5</td>
  </tr>
  <tr>
      <td>France</td>
      <td align="right">3</td>
  </tr>
  ...
</table>

3. Connect to the plugin to create a bar chart with Google Charts.

var chart1 = $('#barChart').chartinator({

// The jQuery selector of the HTML table element to extract the data from - String
// Default: false
// If unspecified, the element this plugin is applied to must be the HTML table
tableSel: '.barChart',

// The chart type - String
// Default: 'BarChart'
// Options: BarChart, PieChart, ColumnChart, Calendar, GeoChart, Table.
chartType: 'BarChart',

// Google Bar Chart Options
barChart: {
   ...
},

// Show table as well as chart - String
// Options: 'show', 'hide', 'remove'
showTable: 'show'

});

4. Full plugin options.

// The path to the Google AJAX API
urlJSAPI: 'https://www.google.com/jsapi',

// The data columns js array
// Default: false
columns: false,

// Column indexes array - An array of column indexes defining where
// the data will be inserted into any existing data extracted from an HTML table
// Default: false - js data array columns replace any existing columns
// Note: when inserting more than one column be sure to increment index number
// to account for previously inserted indexes
colIndexes: false,

// Rows - The rows data-array
// If colIndexes array has values the row data will be inserted into the columns
// defined in the colindexes array. Otherwise the row data will be appended
// to any existing row data extracted from an HTML table
// Default: false
rows: false,

// The jQuery selector of the HTML table element to extract the data from.
// Default: false - Chart extracts data and replaces the HTML table(s) selected above
tableSel: false,

// Ignore column indexes array - An array of column indexes to ignore in the HTML table
// Default: []
// Note: Only works when extracting data from HTML tables
ignoreCol: [],

// The tooltip concatenation - Defines a string for concatenating a custom tooltip.
// Keywords: 'domain', 'data', 'label' - these will be replaced with current values
// 'domain': the primary axis value, 'data': the data value, 'label': the column title
// Default: false - use Google Charts tooltip defaults
// Note: Only works when extracting data from HTML tables
// Not supported on pie, calendar charts
tooltipConcat: false,

// The annotation concatenation - Defines a string for concatenating a custom annotation.
// Keywords: 'domain', 'data', 'label' - these will be replaced with current values
// 'domain': the primary axis value, 'data': the data value, 'label': the column title
// Default: false - use Google Charts annotation defaults
// Note: Only works when extracting data from HTML tables.
// Not supported on pie, geo, calendar charts
annotationConcat: false,

// The chart type - Options: BarChart, PieChart, ColumnChart, Calendar, GeoChart, Table.
// Default: 'BarChart'
chartType: 'BarChart',

// The class to apply to the dynamically created chart container element
chartClass: 'chtr-chart',

// The chart height aspect ratio custom option
// Used to refactor the chart height relative to the width in responsive designs
// this is overridden if the Google Charts height option has a value
// Default: false - not used
chartHeightRatio: false,

// Google Bar Chart Options
barChart: {

  // The font size in pixels - Number
  // Or use css selectors as keywords to assign font sizes from the page
  // For example: 'body'
  // Default: false - Use Google Charts defaults
  fontSize: false,

  chartArea: { left: "20%", top: 40, width: "75%", height: "85%" },
  fontName: o.fontFamily,
  legend: { position: 'bottom' }
},

// Google Pie Chart Options
pieChart: {

  // The font size in pixels - Number
  // Or use css selectors as keywords to assign font sizes from the page
  // For example: 'body'
  // Default: false - Use Google Charts defaults
  fontSize: false,

  chartArea: { left: 0, top: 0, width: "100%", height: "100%" },
  fontName: o.fontFamily
},

// Google Column Chart Options
columnChart: {

  // The font size in pixels - Number
  // Or use css selectors as keywords to assign font sizes from the page
  // For example: 'body'
  // Default: false - Use Google Charts defaults
  fontSize: false,

  fontName: o.fontFamily,
  legend: { position: 'bottom' }
},

// Google Geo Chart Options
geoChart: {

},

// Google Calendar Chart Options
calendarChart: {

  // The cell scaling factor custom option - Not a Google Chart option
  // Used to refactor the cell size in responsive designs
  // this is overridden if the calendar.cellSize option has a value
  cellScaleFactor: 0.017,

  calendar: {
      monthLabel: {

        // The font size in pixels - Number
        // Or use css selectors as keywords to assign font sizes from the page
        // For example: 'body'
        // Default: false - Use Google Charts defaults
        fontSize: false,

        fontName: o.fontFamily
      },
      dayOfWeekLabel: {

        // The font size in pixels - Number
        // Or use css selectors as keywords to assign font sizes from the page
        // For example: 'body'
        // Default: false - Use Google Charts defaults
        fontSize: false,

        fontName: o.fontFamily
      }
  }
},

// Google Table Chart Options
tableChart: {

  // Format a data column in a Table Chart
  formatter: {

    // Formatter type - Options: 'none', 'BarFormat'
    type: 'none',

    // The index number of the column to format. Options: 0, 1, 2, etc.
    column: 1
  },

  // Allow HTML in cells. default: false
  allowHtml: true,

  cssClassNames: {
    headerRow: 'headerRow',
    tableRow: 'tableRow',
    oddTableRow: 'oddTableRow',
    selectedTableRow: 'selectedTableRow',
    hoverTableRow: 'hoverTableRow',
    headerCell: 'headerCell',
    tableCell: 'tableCell',
    rowNumberCell: 'rowNumberCell'
  }
},

// Show table along with chart. String, Options: 'show', 'hide', 'remove'
showTable: 'hide',

// The CSS to apply to show or hide the table and chart
showTableCSS: { 'position': 'static', 'top': 0, 'width': '' },
hideTableCSS: { 'position': 'absolute', 'top': '-9999px', 'width': $tableS.width() },
showChartCSS: {  },
hideChartCSS: { 'opacity': 0 }