🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery plugin for transforming HTML tables into charts using Google Charts.

Chart_Graph Plugins

Documentation

About Chartinator

Chartinator - Google Charts made easier and accessible.

  • Description: A jQuery plugin for transforming HTML tables, Google Sheets and js arrays into charts using Google Charts
  • Repository: https://github.com/jbowyers/chartinator
  • Demo: http://chartinator.com
  • Bower: chartinator
  • Requires: jQuery, Google Charts
  • Author: jbowyers
  • Copyright: 2015 jbowyers
  • License: GPLv3
  • Version: 0.3.10

Demo

Visit http://chartinator.com to view a demo

What is this repository for?

Transforming HTML tables, Google Sheets and js arrays into charts using Google Chart ( https://developers.google.com/chart/ ).

What are the current features?

Chartinator currently supports the following:

  • Creation of all chart types using Google Charts - Visit https://developers.google.com/chart/interactive/docs/gallery
  • Extraction of data from HTML tables, Google spreadsheets, and JavaScript arrays
  • Accessible data - Using HTML tables as data sources makes data accessible to screen readers and searchbots
  • Generation of HTML tables from other data sources - Makes data extracted from JS arrays and Google Sheets accessible
  • Showing and hiding of HTML tables accessibly
  • Manipulation of data extracted from HTML tables and Google Sheets using JavaScript arrays
  • Transposition of data - swapping of rows and columns
  • Resizing of charts on screen resize - Responsive Web Design
  • Chart aspect ratio control
  • Art direction - Zoom and offset of chart - Useful for refining the region displayed in geoCharts
  • Customization of chart tooltips and annotations
  • Customization of all Google Chart options - Fonts, colors, chart formatting, etc.
  • Adding Google Chart event handlers - Event handlers can be defined in the options

How do I get set up?

  • Download - Download and extract the Chartinator zip files - https://github.com/jbowyers/chartinator
  • Copy files - Copy the chartinator.js file to your project
  • Setup the HTML - Open the chartinator.html sample file and copy and paste the desired html into the files in your project. Or, adapt your existing project files to work with chartinator (see Configuration).
  • Link to chartinator.js - Add a script references in your HTML files
  • Initialize Chartinator - Activate the plugin using jQuery (see Configuration)

Using Bower Package Manager

The Chartinator repo is registered as a bower package as 'chartinator'.

Configuration

The Chartinator repo includes the chartinator.js plugin file as well as sample HTML. To use the plugin you need to:

  • Reference the chartinator.js file in your html
  • add/modify your HTML tables, Google Sheets or js arrays
  • Use jQuery to modify options

Using Data from HTML Tables

Chartinator is designed to extract data from HTML tables. The header cells (th elements) in HTML table must be in the first row (or first column if transposing table) and should have a 'data-type' attribute with one of the following values:

  • 'string'
  • 'number'
  • 'boolean'
  • 'date'
  • 'datetime'
  • 'timeofday'

or a 'data-role' attribute with one of the following values:

  • 'tooltip'
  • 'annotation'

The caption element's text will be used as a title for the chart by default

You can also restructure the data extracted from an HTML table by adding and replace data with data contained in js data arrays. For example you can add column headers, columns of data and rows of data. You can also remove and replace headers and columns and transpose data.

Sample HTML

    <div id="chart_canvas"></div>     <table id="chart_data">         <caption>Chart Title</caption>         <tr>             <th scope="col" data-type="string">Domain Axis Name</th>             <th scope="col" data-type="number">Data Axis Name</th>             <th scope="col" data-role="tooltip">Tooltip</th>         </tr>         <tr>             <td>Data</td>             <td>Data</td>             <td>Tooltip text</td>         </tr> ...

Using Data from Google Sheets

You can also use data from Google Sheets to define chart data. Data extracted from a Google Sheet can be added to and replaced with data contained in js data arrays. For example you can add column headers, columns of data and rows of data. You can also remove and replace headers and columns and transpose data.

To use a Google Sheet as a data source you need to do the following:

  • Create the Google Sheet (visit: https://docs.google.com/spreadsheets)
  • Make sure your sheet is the only sheet in the Google Sheets document
  • Make the sheet public - Choose 'Publish to the Web' from the 'File' menu
  • Get the key id from the link url - Should look something like: '1kg6f4UVJPpT45D7ucAE8lhsVp8vIUl7bSMM442_DrhI'
  • Set the 'googleSheetKey' option in the jQuery Chartinator options to be the key id

Note: Data is extracted from a Google Sheet as comma separated values (csv) so don't use commas in data

Using Data from JavaScript Arrays

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

The JS data arrays must adhere to the following syntax:

    // Columns - The columns data-array     columns: [         {label: 'Primary Column Title', type: 'string'},         {label: 'Data Column Title', type: 'number'},         {role: 'tooltip', type: 'string'}],      // Rows - The rows data-array     rows: [         ['China', 18, '2015 - 18'],         ['Japan', 12, '2015 - 12'],         ['Russia', 10, '2015 - 10'],         ['Mexico', 5, '2015 - 5'],         ['Brazil', 6, '2015 - 6'],         ['Italy', 4, '2015 - 4']],

See https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable for more info.

Sample jQuery

The Chart must be initialized using jQuery.

    <script src="js/chartinator.js" ></script>     <script>         jQuery(function ($) {              //  Bar Chart Example             // Use any jQuery selector to select the chart canvas(es)             var chart1 = $('#barChart').chartinator({                  // Custom Options ------------------------------------------------------                                  // The Google Sheet key                 // The id of the Google sheet taken from the public url of the Sheet                 // Default: false                 googleSheetKey: '1kg6f4UVJPpT45D7ucAE8lhsVp8vIUl7bSMM442_DrhI',                                  // The data columns js array                 // An array of object literals that define each column                 // Default: false                 //columns: [                 //    {label: 'Country', type: 'string'},                 //    {label: 'Students', type: 'number'},                 //    {role: 'tooltip', type: 'string'}],                  // Column indexes array - An array of column indexes defining where                 // the data will be inserted into any existing data extracted                  // from an HTML table or Google Sheet                 // 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: [2],                  // 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 or Google Sheet                 // Default: false                 //rows: [                 //  ['China', 18, '2013 - 18'],                 //  ['Japan', 12, '2013 - 12'],                 //  ['Russia', 10, '2013 - 10']],                  // The jQuery selector of the HTML table to extract the data from.                 // Default: false - Checks if the element this plugin                  // is applied to is an HTML table                 //tableSel: '.barChart',                                  // Ignore row indexes array - An array of row index numbers to ignore                 // Default: []                 // Note: Only works on data extracted from HTML tables or Google Sheets                 // The headings row is index 0                 //ignoreRow: [6,8],                                  // Ignore column indexes array - An array of column indexes to ignore                 // Default: []                 // Note: Only works when extracting data from HTML tables or Google Sheets                 //ignoreCol: [2],                                  // Transpose data Boolean - swap columns and rows                 // Default: false                 // Note: Only works on data extracted from HTML tables or Google Sheets                 //transpose: false,                  // The chart type - String                 // Derived from the Google Charts visualization class name                 // Default: 'BarChart'                 // Use TitleCase names. eg. BarChart, PieChart, ColumnChart, Calendar, GeoChart, Table.                 // See Google Charts Gallery for a complete list of Chart types                 // https://developers.google.com/chart/interactive/docs/gallery                 chartType: 'BarChart',                  // The annotation concatenation                  // Defines a string for concatenating a custom annotation.                 // Keywords: 'domain', 'data', 'label'                  // The keywords 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 or Google Sheets.                 // Not supported on pie, geo, calendar charts                 annotationConcat: 'domain - label: data',                                  // The chart aspect ratio custom option - width/height                 // Used to calculate the chart dimensions relative to the width or height                 // this is overridden if the Google Chart's height and width options have values                 // Suggested value: 1.25                 // Default: false - not used                 chartAspectRatio: 1.25,                  // Google Bar Chart Options                 barChart: {                      // Width of chart in pixels - Number                     // Default: automatic (unspecified)                     width: null,                      // Height of chart in pixels - Number                     // Default: automatic (unspecified)                     //height: 400,                      chartArea: {                         left: "20%",                         top: 40,                         width: "74%",                         height: "80%"                     },                      // The font size in pixels - Number                     // Default: false - Use Google Charts defaults                     fontSize: 14,                      // Font-family name - String                     // Default: The body font-family                     fontName: 'Roboto',                      // Chart Title - String                     // Default: Table caption.                     title: 'Bar Chart Sample',                                          titleTextStyle: {                          // 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: 20                     },                     legend: {                          // Legend position - String                         // Options: bottom, top, left, right, in, none.                         // Default: 'bottom'                         position: 'bottom'                     },                      // Array of colours                     colors: ['#3691ff'],                      // Stack values within a bar or column chart - Boolean                     // Default: false.                     isStacked: false,                     tooltip: {                          // Shows tooltip with values on hover - String                         // Options: focus, none.                         // Default: focus                         trigger: 'focus'                     }                 },                  // Show table as well as chart - String                 // Options: 'show', 'hide', 'remove'                 showTable: 'show'             });         });     </script>

List of Options

The following is a list of useful options with default values. For more information about Google Chart options visit https://developers.google.com/chart/

All chart types options

The following are options that are specific to Chartinator and apply to all chart types unless otherwise specified.

    // URL - The path to the Google AJAX API. Default: 'https://www.google.com/jsapi'     urlJSAPI: 'https://www.google.com/jsapi',          // The Google Sheet key     // The id code of the Google sheet taken from the public url of your Google Sheet     // Default: false     googleSheetKey: false,          // The data columns js array     // An array of object literals that define each column     // 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 or Google Sheet     // 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 or Google Sheet     // Default: false     rows: false,      // The jQuery selector of the HTML table element to extract the data from.     // Default: false - Checks if the element this plugin is applied to is an HTML table     tableSel: false,          // The data title     // A title used to identify the set of data     // Used as a caption when generating an HTML table     dataTitle: false,      // Create Table - String     // Create a basic HTML table or a Google Table Chart from chart data     // Options: false, 'basic-table', 'table-chart'     // Note: This table will replace an existing HTML table     createTable: false,      // Ignore row indexes array - An array of row index numbers to ignore     // Default: []     // Note: Only works on data extracted from HTML tables or Google Sheets     // The headings row is index 0     ignoreRow: [],      // Ignore column indexes array     // An array of column indexes to ignore in the HTML table or Google Sheet     // Default: []     // Note: Only works on data extracted from HTML tables or Google Sheets     ignoreCol: [],      // Transpose data Boolean - swap columns and rows     // Default: false     // Note: Only works on data extracted from HTML tables or Google Sheets     transpose: false,      // 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 or Google Sheets     // 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 or Google Sheets.     // Not supported on pie, geo, calendar charts     annotationConcat: false,      // The chart type - String     // Derived from the Google Charts visualization class name     // Default: 'BarChart'     // Use TitleCase names. eg. BarChart, PieChart, ColumnChart, Calendar, GeoChart, Table.     // See Google Charts Gallery for a complete list of Chart types     // https://developers.google.com/chart/interactive/docs/gallery     chartType: 'BarChart',      // Chart Id - The id applied to the chart container element as an id and a class     // This is overridden if the chart element has an id or the id is user defined     chartId: 'c24_' + Math.random().toString(36).substr(2, 9),          // The class to apply to the dynamically created chart container element     chartClass: 'chtr-chart',          // Table Id - The id applied to the table element as an id and a class     // This is overridden if the table element has an id or is user defined     tableId: 'c24_table_' + Math.random().toString(36).substr(2, 9),      // The class to apply to the table element     tableClass: 'chtr-table',      // The chart aspect ratio custom option - width/height     // Used to calculate the chart dimensions relative to the width or height     // this is overridden if the Google Chart's height and width options have values     // Default: false - not used     chartAspectRatio: false,          // The chart zoom factor - number     // A scaling factor for the chart - uses CSS3 transform     // To prevent tooltips from displaying off canvas when zooming, set tooltip.isHtml: true     // Default: 0     chartZoom: 0,      // The chart offset - Array of numbers     // An array of x and y offset percentage values     // Used to offset the chart by percentages of the height and width - uses CSS3 transform     // To prevent tooltips from displaying off canvas when offsetting, set tooltip.isHtml: true     // Default: false     chartOffset: false,          // The chart event objects array     // An array of objects containing Google Chart event types and handlers     // Each object must contain an 'event' and a 'handler' name value pair     // Example: [{ 'event': 'select', 'handler': function (e) { ... }}]     // Default: false     chartEvents: false,          // The Google Chart Options     // This option can be used with any chart type     // Some chart types have default options defined within Chartinator by the following objects:     // barChart, pieChart, columnChart, calendar, table, areaChart, lineChart     // These objects should be used instead of this one when using those chart types     // Default: no default - not defined     chartOptions: {},          // Google Bar Chart Options - Object Literal     // This should be used instead of the chartOptions object when creating a bar chart     //barChart: {},          // Google Pie Chart Options - Object Literal     // This should be used instead of the chartOptions object when creating a pie chart     //pieChart: {},          // Google Column Chart Options - Object Literal     // This should be used instead of the chartOptions object when creating a column chart     //columnChart: {},          // Google Line Chart Options - Object Literal     // This should be used instead of the chartOptions object when creating a line chart     //lineChart: {},              // Google Area Chart Options - Object Literal     // This should be used instead of the chartOptions object when creating a area chart     //areaChart: {},          // Google Geo Chart Options - Object Literal     // This should be used instead of the chartOptions object when creating a area chart     //geoChart: {},              // Google Calendar Chart Options - Object Literal     // This should be used instead of the chartOptions object when creating a calendar chart     //calendar: {},                  // Google Table Chart Options - Object Literal     // This should be used instead of the chartOptions object when creating a table chart     //table: {},          // Show table along with chart - String     // Options: 'show', 'hide', 'remove'. Default: 'hide'     showTable: 'hide',            // The CSS literal used to show the table.     showTableCSS: { 'position': 'static', 'top': 0 },           // The CSS literal used to hide the table.     hideTableCSS: { 'position': 'absolute', 'top': '-9999px', 'width': $tableS.width() },           // The CSS literal used to show the chart.     showChartCSS: { },           // The CSS literal used to hide the chart.     hideChartCSS: { 'opacity': 0} 

Google Bar Chart Options

The following are some of the Google Charts Bar Chart options, unless otherwise specified.

    // Google Bar Chart Options - Object Literal     barChart: {              // Width of chart in pixels - Number         // Default: automatic (unspecified)         width: null,          // Height of chart in pixels - Number         // Default: automatic (unspecified)         height: 200,          chartArea: {             left: "20%",              top: 40,              width: "75%",              height: "85%"         },          // 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: 'body',          // Font-family name - String         // Default: The body font-family         fontName: 'Arial',          // Chart Title - String         // Default: Table caption.         title: 'Bar Chart Sample',                  titleTextStyle: {              // The font size in pixels - Number             // Or use css selectors as keywords to assign font sizes from the page             // For example: 'body'             // Default: Google Charts defaults             fontSize: 'h3',         },         legend: {              // Legend position - String             // Options: bottom, top, left, right, in, none.             // Default: 'bottom'             position: 'right'         },          // Array of colours         colors: ['#3691ff'],          // Stack values within a bar or column chart - Boolean         // Default: false.         isStacked: false,                  tooltip: {              // Shows tooltip with values on hover - String             // Options: focus, none.             // Default: focus             trigger: 'focus'         }     },

For a complete list of Bar chart options visit Google Bar Charts

Google Pie Chart Options

The following are some of the Google Charts Pie Chart options, unless otherwise specified.

    // Google Pie Chart Options     pieChart: {              // Width of chart in pixels - Number         // Default: automatic (unspecified)         width: null,          // Height of chart in pixels - Number         // Default: automatic (unspecified)         height: 200,              chartArea: { // The chart proportions             left: "20%",             top: 40,             width: "60%",             height: "85%"         },                  // 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: 'body',                  // The font family name. String         // Default: body font family         fontName: 'Arial',                  // Chart Title. String         // Default: The table caption text.         title: 'Chart Title',                  titleTextStyle: {                      // 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: 'h3',          },                  legend: {                      // Legend position - Controls display of legend. String              // Options: 'bottom', 'top', 'left', 'right', 'in', 'none'.             position: 'right'          },                  // Array of colours         colors: ['#90A046', '#90A046'],                  // Makes chart 3D. Boolean, Default: false.         is3D: false,                       tooltip: {                      // String - Shows tooltip with values on hover.              // Options: 'focus', 'none'. Default: focus             trigger: 'focus',         }     },

For a complete list of Pie Chart options visit Google Pie Charts

Google Column Chart Options

The following are some of the Google Charts Column Chart options, unless otherwise specified.

    // Google Column Chart Options     columnChart: {               // Width of chart in pixels - Number         // Default: automatic (unspecified)         width: null,          // Height of chart in pixels - Number         // Default: automatic (unspecified)         height: 200,              chartArea: { // The chart proportions             left: "20%",             top: 40,             width: "60%",             height: "85%"         },                  // 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: 'body',                  // The font family name - String         // Default: body font family         fontName: 'Arial',                  // Chart Title - String         // Default: The table caption text.         title: 'Chart Title',                  titleTextStyle: {                      // 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: 'h3',           },          legend: {                              // Legend position - Controls display of legend. String              // Options: 'bottom', 'top', 'left', 'right', 'in', 'none'.              Default: 'bottom'             position: 'right'          },                  // Array of colours         colors: ['#90A046', '#90A046'],          // Stack values within a bar or column chart. Boolean, Default: false.         isStacked: false,                  tooltip: {                      // String - Shows tooltip with values on hover.              // Options: 'focus', 'none'. Default: focus             trigger: 'focus',         }     },

For a complete list of Column Chart options visit Google Column Charts

Google Geo Chart Options

The following are some of the Google Charts Geo Chart options, unless otherwise specified.

    // Google Geo Chart Options     geoChart: {               // Width of chart in pixels - Number         // Default: automatic (unspecified)         width: null,          // Height of chart in pixels - Number         // Default: automatic (unspecified)         height: 200,                  // The chart title - not a Google Geo Chart option         // This option is supported by Chartinator only         title: 'Geo Chart',                  titleTextStyle: {             // Note: Support for this option has been added by Chartinator             // but is not supported by Google Charts for this chart type              // The html tag that contains the title Chartinator adds to the top of the chart             // This is supported by Chartinator only             tag: 'h3'         }              // Background Color - Default: 'white'         backgroundColor: '#fff',                   // Dataless Region Color - Default: '#F5F5F5'         datalessRegionColor: '#F5F5F5',                  // Map Region - String, Options: 'world', continent, region, country, states.          // Default: 'world'         region: 'world',                  // Resolution - String         // Options: 'countries', 'provinces', 'metros'. Default: 'countries'         resolution: 'countries',                  legend: {                              // Legend position - Controls display of legend. String              // Options: 'bottom', 'top', 'left', 'right', 'in', 'none'. Default: right             position: 'right'          },                  colorAxis: {                      // Start and end colour gradient values. Default: null             colors: []          },                  tooltip: {                              // String - Shows tooltip with values on hover.              // Options: 'focus', 'none'. Default: focus             trigger: 'focus',         }     },

Note: Google Charts does not apply a heading to this chart type. Chartinator adds a heading using either the caption from the HTMl data table or the chartTitle option. For a complete list of Geo Chart options visit Google Geo Charts

Google Calendar Chart Options

The following are some of the Google Charts Calendar Chart options, unless otherwise specified.

    // Google Calendar Chart Options     calendar: {               // 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,          // Width of chart in pixels - Number         // Default: automatic (unspecified)         width: null,          // Height of chart in pixels - Number         // Default: automatic (unspecified)         height: 200,                  titleTextStyle: {             // Note: Support for this option has been added by Chartinator             // but is not supported by Google Charts for this chart type              color: '#000',             fontWeight: 'bold',             fontName: 'Arial', // Default is body font-family              // The font size in pixels - Number             // Or use css selectors as keywords to assign font sizes from the page             // For example: 'body'             // Default: '' - Use Google Charts defaults             fontSize: 'h3'         },                          calendar: {                      // Cell size in pixels. Number,              // Default: use cellScaleFactor             cellSize: 16,                           monthLabel: {                                  // Font-family name - String                 // Default: the body font-family                 fontName: 'Times-Roman',                                   // 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: 'body',             },             dayOfWeekLabel: {                              // Font-family name - String                 // Default: the body font-family                 fontName: 'Arial'                              // 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: 12,             },             monthOutlineColor: {                              // The active month outline stroke colour. String, Default: #000                 stroke: '#000',              }         },         colorAxis: {                      // The colour gradient start and end values             colors: ['#FF0000', '#00FF00']         },         tooltip: {                      // Note: Support for this option has been added by Chartinator             // but is not supported by Google Charts for this chart type             textStyle: {                 color: '#000',                 fontName: 'Arial', // Default: body font-family                 fontSize: 16             }         }     },

For a complete list of Calendar Chart options visit Google Calendar Charts

Google Table Chart Options

The following are some of the Google Charts Table Chart options, unless otherwise specified.

    // Google Table Chart Options     table: {               // The table caption - not a Google Charts option for this chart type         // Chartinator option only         title: 'Table Chart',          // The font size in pixels - Number         // Or use css selectors as keywords to assign font sizes from the page         // For example: 'body'         // Not a Google Charts option for this chart type         fontSize: 16,          // The table caption - not a Google Charts option for this chart type         // Chartinator option only         // Default: the body font-family         fontName: 'Roboto',              // Format a data column in a Table Chart         formatter: {                       // Formatter type - String, Options: 'none', 'BarFormat'. Default: 'none'             type: 'none',                          // The index number of the column to format - Integer             // Options: 0, 1, 2, etc. Default: 1             column: 1,                           // Base value number to compare the cell value against. Default: 0             base: 0,                           // Negative bar color - String              // Options: 'red', 'green', 'blue'. Default: 'red'             colorNegative: 'red',                           // Positive bar color - String              // Options:'red', 'green', 'blue'. Default: 'blue'             colorPositive: 'green',                           // Dark base line when negative values are present.              // Default value is 'false'             drawZeroLine: false,                           // Maximum  bar value. Number, Default: highest value in table             max: ,                           // Minimum bar value. Number, Default; lowest value in the table             min: ,                          // Show number values. Boolean, Default: true             showValue: true,                           // Thickness of each bar in pixels. Number, Default: 100             width: 100          },                  // Allow HTML in cells. Boolean, default: true         allowHtml: true,                  // Alternating row styling - Boolean, Default: true         alternatingRowStyle: true,                  // Width of chart in pixels. Number, Default: automatic (unspecified)         width: ,                  // Height of chart in pixels. Number, Default: automatic (unspecified)         height: ,                  // Enable paging - String, Options: enable, event, disable. Default: disable         page: 'disable',                   // Rows per page. Integer, Default 10         pageSize: 10,                   // Enable row numbers. Boolean, Default: false         showRowNumber: false,                   // Enables sorting. String, Options: enable, event, disable. Default: enable         sort: 'enable',                   // Sort order. Boolean, Default: true         sortAscending: true,                   // The index of a column to sort. Integer, Default: -1         sortColumn: -1,           // CSS class names - Default: no classes         cssClassNames: {              headerRow: 'headerRow',             tableRow: 'tableRow',             oddTableRow: 'oddTableRow',             selectedTableRow: 'selectedTableRow',             hoverTableRow: 'hoverTableRow',             headerCell: 'headerCell',             tableCell: 'tableCell',             rowNumberCell: 'rowNumberCell'         }     },

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

Styling Tooltips

Google Charts HTML enabled tooltips can be styled using the relevant CSS classes. Chartinator adds a style element to the head of the document to apply custom styles to tooltips for for certain chart types. The default Google Charts tooltip CSS is located at: https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/core/tooltip.css

Dependencies

jQuery, Google Charts

How to run tests

No testing framework at this time

Task Managers

Gruntfile.js and package.json files are included if you want to manage tasks using Grunt.
Note: The Grunt file uses configuration information contained in the package.json

Deployment instructions

The git repo is versioned and includes a Bower configuration file so the repo can be easily included in your project as a dependency.

Contribution guidelines

Contributions are much appreciated and welcomed.

Who do I talk to?

jbowyers


You May Also Like