{"id":13596211,"url":"https://github.com/jbowyers/chartinator","last_synced_at":"2026-02-19T09:07:01.948Z","repository":{"id":29027358,"uuid":"32554683","full_name":"jbowyers/chartinator","owner":"jbowyers","description":"A jQuery plugin for transforming HTML tables into charts using Google Charts","archived":false,"fork":false,"pushed_at":"2026-02-02T22:19:16.000Z","size":414,"stargazers_count":49,"open_issues_count":2,"forks_count":24,"subscribers_count":6,"default_branch":"master","last_synced_at":"2026-02-03T11:38:34.192Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jbowyers.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-20T00:58:30.000Z","updated_at":"2026-02-02T22:19:21.000Z","dependencies_parsed_at":"2022-08-31T00:22:21.863Z","dependency_job_id":null,"html_url":"https://github.com/jbowyers/chartinator","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/jbowyers/chartinator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbowyers%2Fchartinator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbowyers%2Fchartinator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbowyers%2Fchartinator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbowyers%2Fchartinator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jbowyers","download_url":"https://codeload.github.com/jbowyers/chartinator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jbowyers%2Fchartinator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29609524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T06:47:36.664Z","status":"ssl_error","status_checked_at":"2026-02-19T06:45:47.551Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T16:02:12.210Z","updated_at":"2026-02-19T09:07:01.911Z","avatar_url":"https://github.com/jbowyers.png","language":"JavaScript","funding_links":[],"categories":["HTML","JavaScript"],"sub_categories":[],"readme":"\u003ch1 id=\"about-chartinator\"\u003eAbout Chartinator\u003c/h1\u003e\n\u003cp\u003e\u003cstrong\u003eChartinator\u003c/strong\u003e - Google Charts made easier and accessible.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eDescription\u003c/strong\u003e: A jQuery plugin for transforming HTML tables, Google Sheets and js arrays into charts using Google Charts\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eRepository\u003c/strong\u003e: \u003ca href=\"https://github.com/jbowyers/chartinator\"\u003ehttps://github.com/jbowyers/chartinator\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDemo\u003c/strong\u003e: \u003ca href=\"http://chartinator.com\"\u003ehttp://chartinator.com\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eBower\u003c/strong\u003e: chartinator\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eRequires\u003c/strong\u003e: jQuery, Google Charts\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAuthor\u003c/strong\u003e: jbowyers\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCopyright\u003c/strong\u003e: 2015 jbowyers\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eLicense\u003c/strong\u003e: GPLv3\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eVersion: 0.3.10\u003c/strong\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"demo\"\u003eDemo\u003c/h2\u003e\n\u003cp\u003eVisit \u003ca href=\"http://chartinator.com\"\u003ehttp://chartinator.com\u003c/a\u003e to view a demo\u003c/p\u003e\n\u003ch3 id=\"what-is-this-repository-for-\"\u003eWhat is this repository for?\u003c/h3\u003e\n\u003cp\u003eTransforming HTML tables, Google Sheets and js arrays into charts using Google Chart ( \u003ca href=\"https://developers.google.com/chart/\"\u003ehttps://developers.google.com/chart/\u003c/a\u003e ).\u003c/p\u003e\n\u003ch3 id=\"what-are-the-current-features-\"\u003eWhat are the current features?\u003c/h3\u003e\n\u003cp\u003eChartinator currently supports the following:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eCreation of all chart types using Google Charts - Visit \u003ca href=\"https://developers.google.com/chart/interactive/docs/gallery\"\u003ehttps://developers.google.com/chart/interactive/docs/gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003eExtraction of data from HTML tables, Google spreadsheets, and JavaScript arrays\u003c/li\u003e\n\u003cli\u003eAccessible data - Using HTML tables as data sources makes data accessible to screen readers and searchbots\u003c/li\u003e\n\u003cli\u003eGeneration of HTML tables from other data sources - Makes data extracted from JS arrays and Google Sheets accessible\u003c/li\u003e\n\u003cli\u003eShowing and hiding of HTML tables accessibly\u003c/li\u003e\n\u003cli\u003eManipulation of data extracted from HTML tables and Google Sheets using JavaScript arrays\u003c/li\u003e\n\u003cli\u003eTransposition of data - swapping of rows and columns\u003c/li\u003e\n\u003cli\u003eResizing of charts on screen resize - Responsive Web Design\u003c/li\u003e\n\u003cli\u003eChart aspect ratio control\u003c/li\u003e\n\u003cli\u003eArt direction - Zoom and offset of chart - Useful for refining the region displayed in geoCharts\u003c/li\u003e\n\u003cli\u003eCustomization of chart tooltips and annotations\u003c/li\u003e\n\u003cli\u003eCustomization of all Google Chart options - Fonts, colors, chart formatting, etc.\u003c/li\u003e\n\u003cli\u003eAdding Google Chart event handlers - Event handlers can be defined in the options\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"how-do-i-get-set-up-\"\u003eHow do I get set up?\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eDownload\u003c/strong\u003e - Download and extract the Chartinator zip files - \u003ca href=\"https://github.com/jbowyers/chartinator\"\u003ehttps://github.com/jbowyers/chartinator\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eCopy files\u003c/strong\u003e - Copy the chartinator.js file to your project\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSetup the HTML\u003c/strong\u003e - Open the chartinator.html sample file and copy and paste the desired html into the \nfiles in your project. Or, adapt your existing project files to work with chartinator (see Configuration).\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eLink to chartinator.js\u003c/strong\u003e - Add a script references in your HTML files\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eInitialize Chartinator\u003c/strong\u003e - Activate the plugin using jQuery (see Configuration)\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"using-bower-package-manager\"\u003eUsing Bower Package Manager\u003c/h3\u003e\n\u003cp\u003eThe Chartinator repo is registered as a bower package as \u0026#39;chartinator\u0026#39;.\u003c/p\u003e\n\u003ch2 id=\"configuration\"\u003eConfiguration\u003c/h2\u003e\n\u003cp\u003eThe Chartinator repo includes the chartinator.js plugin file as well as sample HTML. \nTo use the plugin you need to: \u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eReference the chartinator.js file in your html\u003c/li\u003e\n\u003cli\u003eadd/modify your HTML tables, Google Sheets or js arrays \u003c/li\u003e\n\u003cli\u003eUse jQuery to modify options\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"using-data-from-html-tables\"\u003eUsing Data from HTML Tables\u003c/h3\u003e\n\u003cp\u003eChartinator is designed to extract data from HTML tables. \nThe header cells (th elements) in HTML table must be in the first row (or first column if transposing table)\nand should have a \u0026#39;data-type\u0026#39; attribute with one of the following  values:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u0026#39;string\u0026#39; \u003c/li\u003e\n\u003cli\u003e\u0026#39;number\u0026#39; \u003c/li\u003e\n\u003cli\u003e\u0026#39;boolean\u0026#39; \u003c/li\u003e\n\u003cli\u003e\u0026#39;date\u0026#39; \u003c/li\u003e\n\u003cli\u003e\u0026#39;datetime\u0026#39; \u003c/li\u003e\n\u003cli\u003e\u0026#39;timeofday\u0026#39; \u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eor a \u0026#39;data-role\u0026#39; attribute with one of the following  values:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u0026#39;tooltip\u0026#39;\u003c/li\u003e\n\u003cli\u003e\u0026#39;annotation\u0026#39;\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eThe caption element\u0026#39;s text will be used as a title for the chart by default\u003c/p\u003e\n\u003cp\u003eYou can also restructure the data extracted from an HTML table by adding and replace data with data contained in js data arrays. \nFor example you can add column headers, columns of data and rows of data. You can also remove and replace headers \nand columns and transpose data.\u003c/p\u003e\n\u003ch4 id=\"sample-html\"\u003eSample HTML\u003c/h4\u003e\n\u003cpre\u003e\u003ccode class=\"lang-html\"\u003e\n    \u0026lt;div id=\u0026quot;chart_canvas\u0026quot;\u0026gt;\u0026lt;/div\u0026gt;\n    \u0026lt;table id=\u0026quot;chart_data\u0026quot;\u0026gt;\n        \u0026lt;caption\u0026gt;Chart Title\u0026lt;/caption\u0026gt;\n        \u0026lt;tr\u0026gt;\n            \u0026lt;th scope=\u0026quot;col\u0026quot; data-type=\u0026quot;string\u0026quot;\u0026gt;Domain Axis Name\u0026lt;/th\u0026gt;\n            \u0026lt;th scope=\u0026quot;col\u0026quot; data-type=\u0026quot;number\u0026quot;\u0026gt;Data Axis Name\u0026lt;/th\u0026gt;\n            \u0026lt;th scope=\u0026quot;col\u0026quot; data-role=\u0026quot;tooltip\u0026quot;\u0026gt;Tooltip\u0026lt;/th\u0026gt;\n        \u0026lt;/tr\u0026gt;\n        \u0026lt;tr\u0026gt;\n            \u0026lt;td\u0026gt;Data\u0026lt;/td\u0026gt;\n            \u0026lt;td\u0026gt;Data\u0026lt;/td\u0026gt;\n            \u0026lt;td\u0026gt;Tooltip text\u0026lt;/td\u0026gt;\n        \u0026lt;/tr\u0026gt; ...\u003c/code\u003e\u003c/pre\u003e\n\u003ch3 id=\"using-data-from-google-sheets\"\u003eUsing Data from Google Sheets\u003c/h3\u003e\n\u003cp\u003eYou can also use data from Google Sheets to define chart data. \nData extracted from a Google Sheet can be added to and replaced with data contained in js data arrays. \nFor example you can add column headers, columns of data and rows of data. You can also remove and replace headers \nand columns and transpose data.\u003c/p\u003e\n\u003cp\u003eTo use a Google Sheet as a data source you need to do the following:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eCreate the Google Sheet (visit: \u003ca href=\"https://docs.google.com/spreadsheets\"\u003ehttps://docs.google.com/spreadsheets\u003c/a\u003e)\u003c/li\u003e\n\u003cli\u003eMake sure your sheet is the only sheet in the Google Sheets document\u003c/li\u003e\n\u003cli\u003eMake the sheet public - Choose \u0026#39;Publish to the Web\u0026#39; from the \u0026#39;File\u0026#39; menu\u003c/li\u003e\n\u003cli\u003eGet the key id from the link url - Should look something like: \u0026#39;1kg6f4UVJPpT45D7ucAE8lhsVp8vIUl7bSMM442_DrhI\u0026#39;\u003c/li\u003e\n\u003cli\u003eSet the \u0026#39;googleSheetKey\u0026#39; option in the jQuery Chartinator options to be the key id\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eNote: Data is extracted from a Google Sheet as comma separated values (csv) so don\u0026#39;t use commas in data\u003c/p\u003e\n\u003ch3 id=\"using-data-from-javascript-arrays\"\u003eUsing Data from JavaScript Arrays\u003c/h3\u003e\n\u003cp\u003eYou can also use data from JavaScript arrays you create to completely define the chart data \nor to add to and replace data extracted from an HTML table or Google Sheet, including the column headers.\u003c/p\u003e\n\u003cp\u003eThe JS data arrays must adhere to the following syntax:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e\n    // Columns - The columns data-array\n    columns: [\n        {label: \u0026#39;Primary Column Title\u0026#39;, type: \u0026#39;string\u0026#39;},\n        {label: \u0026#39;Data Column Title\u0026#39;, type: \u0026#39;number\u0026#39;},\n        {role: \u0026#39;tooltip\u0026#39;, type: \u0026#39;string\u0026#39;}],\n\n    // Rows - The rows data-array\n    rows: [\n        [\u0026#39;China\u0026#39;, 18, \u0026#39;2015 - 18\u0026#39;],\n        [\u0026#39;Japan\u0026#39;, 12, \u0026#39;2015 - 12\u0026#39;],\n        [\u0026#39;Russia\u0026#39;, 10, \u0026#39;2015 - 10\u0026#39;],\n        [\u0026#39;Mexico\u0026#39;, 5, \u0026#39;2015 - 5\u0026#39;],\n        [\u0026#39;Brazil\u0026#39;, 6, \u0026#39;2015 - 6\u0026#39;],\n        [\u0026#39;Italy\u0026#39;, 4, \u0026#39;2015 - 4\u0026#39;]],\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eSee \u003ca href=\"https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable\"\u003ehttps://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable\u003c/a\u003e for more info.\u003c/p\u003e\n\u003ch3 id=\"sample-jquery\"\u003eSample jQuery\u003c/h3\u003e\n\u003cp\u003eThe Chart must be initialized using jQuery.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e\n    \u0026lt;script src=\u0026quot;js/chartinator.js\u0026quot; \u0026gt;\u0026lt;/script\u0026gt;\n    \u0026lt;script\u0026gt;\n        jQuery(function ($) {\n\n            //  Bar Chart Example\n            // Use any jQuery selector to select the chart canvas(es)\n            var chart1 = $(\u0026#39;#barChart\u0026#39;).chartinator({\n\n                // Custom Options ------------------------------------------------------\n\n                // The Google Sheet key\n                // The id of the Google sheet taken from the public url of the Sheet\n                // Default: false\n                googleSheetKey: \u0026#39;1kg6f4UVJPpT45D7ucAE8lhsVp8vIUl7bSMM442_DrhI\u0026#39;,\n\n                // The data columns js array\n                // An array of object literals that define each column\n                // Default: false\n                //columns: [\n                //    {label: \u0026#39;Country\u0026#39;, type: \u0026#39;string\u0026#39;},\n                //    {label: \u0026#39;Students\u0026#39;, type: \u0026#39;number\u0026#39;},\n                //    {role: \u0026#39;tooltip\u0026#39;, type: \u0026#39;string\u0026#39;}],\n\n                // Column indexes array - An array of column indexes defining where\n                // the data will be inserted into any existing data extracted \n                // from an HTML table or Google Sheet\n                // Default: false - js data array columns replace any existing columns\n                // Note: when inserting more than one column be sure to \n                // increment index number to account for previously inserted indexes\n                //colIndexes: [2],\n\n                // Rows - The rows data-array\n                // If colIndexes array has values the row data will be inserted \n                // into the columns defined in the colindexes array. Otherwise \n                // the row data will be appended to any existing row data extracted \n                // from an HTML table or Google Sheet\n                // Default: false\n                //rows: [\n                //  [\u0026#39;China\u0026#39;, 18, \u0026#39;2013 - 18\u0026#39;],\n                //  [\u0026#39;Japan\u0026#39;, 12, \u0026#39;2013 - 12\u0026#39;],\n                //  [\u0026#39;Russia\u0026#39;, 10, \u0026#39;2013 - 10\u0026#39;]],\n\n                // The jQuery selector of the HTML table to extract the data from.\n                // Default: false - Checks if the element this plugin \n                // is applied to is an HTML table\n                //tableSel: \u0026#39;.barChart\u0026#39;,\n\n                // Ignore row indexes array - An array of row index numbers to ignore\n                // Default: []\n                // Note: Only works on data extracted from HTML tables or Google Sheets\n                // The headings row is index 0\n                //ignoreRow: [6,8],\n\n                // Ignore column indexes array - An array of column indexes to ignore\n                // Default: []\n                // Note: Only works when extracting data from HTML tables or Google Sheets\n                //ignoreCol: [2],\n\n                // Transpose data Boolean - swap columns and rows\n                // Default: false\n                // Note: Only works on data extracted from HTML tables or Google Sheets\n                //transpose: false,\n\n                // The chart type - String\n                // Derived from the Google Charts visualization class name\n                // Default: \u0026#39;BarChart\u0026#39;\n                // Use TitleCase names. eg. BarChart, PieChart, ColumnChart, Calendar, GeoChart, Table.\n                // See Google Charts Gallery for a complete list of Chart types\n                // https://developers.google.com/chart/interactive/docs/gallery\n                chartType: \u0026#39;BarChart\u0026#39;,\n\n                // The annotation concatenation \n                // Defines a string for concatenating a custom annotation.\n                // Keywords: \u0026#39;domain\u0026#39;, \u0026#39;data\u0026#39;, \u0026#39;label\u0026#39; \n                // The keywords will be replaced with current values\n                // \u0026#39;domain\u0026#39;: the primary axis value, \n                // \u0026#39;data\u0026#39;: the data value, \n                // \u0026#39;label\u0026#39;: the column title\n                // Default: false - use Google Charts annotation defaults\n                // Note: Only works when extracting data from HTML tables or Google Sheets.\n                // Not supported on pie, geo, calendar charts\n                annotationConcat: \u0026#39;domain - label: data\u0026#39;,\n\n                // The chart aspect ratio custom option - width/height\n                // Used to calculate the chart dimensions relative to the width or height\n                // this is overridden if the Google Chart\u0026#39;s height and width options have values\n                // Suggested value: 1.25\n                // Default: false - not used\n                chartAspectRatio: 1.25,\n\n                // Google Bar Chart Options\n                barChart: {\n\n                    // Width of chart in pixels - Number\n                    // Default: automatic (unspecified)\n                    width: null,\n\n                    // Height of chart in pixels - Number\n                    // Default: automatic (unspecified)\n                    //height: 400,\n\n                    chartArea: {\n                        left: \u0026quot;20%\u0026quot;,\n                        top: 40,\n                        width: \u0026quot;74%\u0026quot;,\n                        height: \u0026quot;80%\u0026quot;\n                    },\n\n                    // The font size in pixels - Number\n                    // Default: false - Use Google Charts defaults\n                    fontSize: 14,\n\n                    // Font-family name - String\n                    // Default: The body font-family\n                    fontName: \u0026#39;Roboto\u0026#39;,\n\n                    // Chart Title - String\n                    // Default: Table caption.\n                    title: \u0026#39;Bar Chart Sample\u0026#39;,\n\n                    titleTextStyle: {\n\n                        // The font size in pixels - Number\n                        // Or use css selectors as keywords to assign font sizes from the page\n                        // For example: \u0026#39;body\u0026#39;\n                        // Default: false - Use Google Charts defaults\n                        fontSize: 20\n                    },\n                    legend: {\n\n                        // Legend position - String\n                        // Options: bottom, top, left, right, in, none.\n                        // Default: \u0026#39;bottom\u0026#39;\n                        position: \u0026#39;bottom\u0026#39;\n                    },\n\n                    // Array of colours\n                    colors: [\u0026#39;#3691ff\u0026#39;],\n\n                    // Stack values within a bar or column chart - Boolean\n                    // Default: false.\n                    isStacked: false,\n                    tooltip: {\n\n                        // Shows tooltip with values on hover - String\n                        // Options: focus, none.\n                        // Default: focus\n                        trigger: \u0026#39;focus\u0026#39;\n                    }\n                },\n\n                // Show table as well as chart - String\n                // Options: \u0026#39;show\u0026#39;, \u0026#39;hide\u0026#39;, \u0026#39;remove\u0026#39;\n                showTable: \u0026#39;show\u0026#39;\n            });\n        });\n    \u0026lt;/script\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003ch3 id=\"list-of-options\"\u003eList of Options\u003c/h3\u003e\n\u003cp\u003eThe following is a list of useful options with default values. For more information about Google Chart options visit\n\u003ca href=\"https://developers.google.com/chart/\"\u003ehttps://developers.google.com/chart/\u003c/a\u003e\u003c/p\u003e\n\u003ch4 id=\"all-chart-types-options\"\u003eAll chart types options\u003c/h4\u003e\n\u003cp\u003eThe following are options that are specific to Chartinator and apply to all chart types unless otherwise specified.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e\n    // URL - The path to the Google AJAX API. Default: \u0026#39;https://www.google.com/jsapi\u0026#39;\n    urlJSAPI: \u0026#39;https://www.google.com/jsapi\u0026#39;,\n\n    // The Google Sheet key\n    // The id code of the Google sheet taken from the public url of your Google Sheet\n    // Default: false\n    googleSheetKey: false,\n\n    // The data columns js array\n    // An array of object literals that define each column\n    // Default: false\n    columns: false,\n\n    // Column indexes array - An array of column indexes defining where\n    // the data will be inserted into any existing data extracted from an \n    // HTML table or Google Sheet\n    // Default: false - js data array columns replace any existing columns\n    // Note: when inserting more than one column be sure to increment index number\n    // to account for previously inserted indexes\n    colIndexes: false,\n\n    // Rows - The rows data-array\n    // If colIndexes array has values the row data will be inserted into the columns\n    // defined in the colindexes array. Otherwise the row data will be appended\n    // to any existing row data extracted from an HTML table or Google Sheet\n    // Default: false\n    rows: false,\n\n    // The jQuery selector of the HTML table element to extract the data from.\n    // Default: false - Checks if the element this plugin is applied to is an HTML table\n    tableSel: false,\n\n    // The data title\n    // A title used to identify the set of data\n    // Used as a caption when generating an HTML table\n    dataTitle: false,\n\n    // Create Table - String\n    // Create a basic HTML table or a Google Table Chart from chart data\n    // Options: false, \u0026#39;basic-table\u0026#39;, \u0026#39;table-chart\u0026#39;\n    // Note: This table will replace an existing HTML table\n    createTable: false,\n\n    // Ignore row indexes array - An array of row index numbers to ignore\n    // Default: []\n    // Note: Only works on data extracted from HTML tables or Google Sheets\n    // The headings row is index 0\n    ignoreRow: [],\n\n    // Ignore column indexes array\n    // An array of column indexes to ignore in the HTML table or Google Sheet\n    // Default: []\n    // Note: Only works on data extracted from HTML tables or Google Sheets\n    ignoreCol: [],\n\n    // Transpose data Boolean - swap columns and rows\n    // Default: false\n    // Note: Only works on data extracted from HTML tables or Google Sheets\n    transpose: false,\n\n    // The tooltip concatenation - Defines a string for concatenating a custom tooltip.\n    // Keywords: \u0026#39;domain\u0026#39;, \u0026#39;data\u0026#39;, \u0026#39;label\u0026#39; - these will be replaced with current values\n    // \u0026#39;domain\u0026#39;: the primary axis value, \u0026#39;data\u0026#39;: the data value, \u0026#39;label\u0026#39;: the column title\n    // Default: false - use Google Charts tooltip defaults\n    // Note: Only works when extracting data from HTML tables or Google Sheets\n    // Not supported on pie, calendar charts\n    tooltipConcat: false,\n\n    // The annotation concatenation - Defines a string for concatenating a custom annotation.\n    // Keywords: \u0026#39;domain\u0026#39;, \u0026#39;data\u0026#39;, \u0026#39;label\u0026#39; - these will be replaced with current values\n    // \u0026#39;domain\u0026#39;: the primary axis value, \u0026#39;data\u0026#39;: the data value, \u0026#39;label\u0026#39;: the column title\n    // Default: false - use Google Charts annotation defaults\n    // Note: Only works when extracting data from HTML tables or Google Sheets.\n    // Not supported on pie, geo, calendar charts\n    annotationConcat: false,\n\n    // The chart type - String\n    // Derived from the Google Charts visualization class name\n    // Default: \u0026#39;BarChart\u0026#39;\n    // Use TitleCase names. eg. BarChart, PieChart, ColumnChart, Calendar, GeoChart, Table.\n    // See Google Charts Gallery for a complete list of Chart types\n    // https://developers.google.com/chart/interactive/docs/gallery\n    chartType: \u0026#39;BarChart\u0026#39;,\n\n    // Chart Id - The id applied to the chart container element as an id and a class\n    // This is overridden if the chart element has an id or the id is user defined\n    chartId: \u0026#39;c24_\u0026#39; + Math.random().toString(36).substr(2, 9),\n\n    // The class to apply to the dynamically created chart container element\n    chartClass: \u0026#39;chtr-chart\u0026#39;,\n\n    // Table Id - The id applied to the table element as an id and a class\n    // This is overridden if the table element has an id or is user defined\n    tableId: \u0026#39;c24_table_\u0026#39; + Math.random().toString(36).substr(2, 9),\n\n    // The class to apply to the table element\n    tableClass: \u0026#39;chtr-table\u0026#39;,\n\n    // The chart aspect ratio custom option - width/height\n    // Used to calculate the chart dimensions relative to the width or height\n    // this is overridden if the Google Chart\u0026#39;s height and width options have values\n    // Default: false - not used\n    chartAspectRatio: false,\n\n    // The chart zoom factor - number\n    // A scaling factor for the chart - uses CSS3 transform\n    // To prevent tooltips from displaying off canvas when zooming, set tooltip.isHtml: true\n    // Default: 0\n    chartZoom: 0,\n\n    // The chart offset - Array of numbers\n    // An array of x and y offset percentage values\n    // Used to offset the chart by percentages of the height and width - uses CSS3 transform\n    // To prevent tooltips from displaying off canvas when offsetting, set tooltip.isHtml: true\n    // Default: false\n    chartOffset: false,\n\n    // The chart event objects array\n    // An array of objects containing Google Chart event types and handlers\n    // Each object must contain an \u0026#39;event\u0026#39; and a \u0026#39;handler\u0026#39; name value pair\n    // Example: [{ \u0026#39;event\u0026#39;: \u0026#39;select\u0026#39;, \u0026#39;handler\u0026#39;: function (e) { ... }}]\n    // Default: false\n    chartEvents: false,\n\n    // The Google Chart Options\n    // This option can be used with any chart type\n    // Some chart types have default options defined within Chartinator by the following objects:\n    // barChart, pieChart, columnChart, calendar, table, areaChart, lineChart\n    // These objects should be used instead of this one when using those chart types\n    // Default: no default - not defined\n    chartOptions: {},\n\n    // Google Bar Chart Options - Object Literal\n    // This should be used instead of the chartOptions object when creating a bar chart\n    //barChart: {},\n\n    // Google Pie Chart Options - Object Literal\n    // This should be used instead of the chartOptions object when creating a pie chart\n    //pieChart: {},\n\n    // Google Column Chart Options - Object Literal\n    // This should be used instead of the chartOptions object when creating a column chart\n    //columnChart: {},\n\n    // Google Line Chart Options - Object Literal\n    // This should be used instead of the chartOptions object when creating a line chart\n    //lineChart: {},\n\n    // Google Area Chart Options - Object Literal\n    // This should be used instead of the chartOptions object when creating a area chart\n    //areaChart: {},\n\n    // Google Geo Chart Options - Object Literal\n    // This should be used instead of the chartOptions object when creating a area chart\n    //geoChart: {},\n\n    // Google Calendar Chart Options - Object Literal\n    // This should be used instead of the chartOptions object when creating a calendar chart\n    //calendar: {},\n\n    // Google Table Chart Options - Object Literal\n    // This should be used instead of the chartOptions object when creating a table chart\n    //table: {},\n\n    // Show table along with chart - String\n    // Options: \u0026#39;show\u0026#39;, \u0026#39;hide\u0026#39;, \u0026#39;remove\u0026#39;. Default: \u0026#39;hide\u0026#39;\n    showTable: \u0026#39;hide\u0026#39;,  \n\n    // The CSS literal used to show the table.\n    showTableCSS: { \u0026#39;position\u0026#39;: \u0026#39;static\u0026#39;, \u0026#39;top\u0026#39;: 0 }, \n\n    // The CSS literal used to hide the table.\n    hideTableCSS: { \u0026#39;position\u0026#39;: \u0026#39;absolute\u0026#39;, \u0026#39;top\u0026#39;: \u0026#39;-9999px\u0026#39;, \u0026#39;width\u0026#39;: $tableS.width() },\n\n    // The CSS literal used to show the chart.\n    showChartCSS: { }, \n\n    // The CSS literal used to hide the chart.\n    hideChartCSS: { \u0026#39;opacity\u0026#39;: 0}\u003c/code\u003e\u003c/pre\u003e\n\u003ch4 id=\"google-bar-chart-options\"\u003eGoogle Bar Chart Options\u003c/h4\u003e\n\u003cp\u003eThe following are some of the Google Charts Bar Chart options, unless otherwise specified.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e\n    // Google Bar Chart Options - Object Literal\n    barChart: {\n\n        // Width of chart in pixels - Number\n        // Default: automatic (unspecified)\n        width: null,\n\n        // Height of chart in pixels - Number\n        // Default: automatic (unspecified)\n        height: 200,\n\n        chartArea: {\n            left: \u0026quot;20%\u0026quot;, \n            top: 40, \n            width: \u0026quot;75%\u0026quot;, \n            height: \u0026quot;85%\u0026quot;\n        },\n\n        // The font size in pixels - Number\n        // Or use css selectors as keywords to assign font sizes from the page\n        // For example: \u0026#39;body\u0026#39;\n        // Default: false - Use Google Charts defaults\n        fontSize: \u0026#39;body\u0026#39;,\n\n        // Font-family name - String\n        // Default: The body font-family\n        fontName: \u0026#39;Arial\u0026#39;,\n\n        // Chart Title - String\n        // Default: Table caption.\n        title: \u0026#39;Bar Chart Sample\u0026#39;,\n\n        titleTextStyle: {\n\n            // The font size in pixels - Number\n            // Or use css selectors as keywords to assign font sizes from the page\n            // For example: \u0026#39;body\u0026#39;\n            // Default: Google Charts defaults\n            fontSize: \u0026#39;h3\u0026#39;,\n        },\n        legend: {\n\n            // Legend position - String\n            // Options: bottom, top, left, right, in, none.\n            // Default: \u0026#39;bottom\u0026#39;\n            position: \u0026#39;right\u0026#39;\n        },\n\n        // Array of colours\n        colors: [\u0026#39;#3691ff\u0026#39;],\n\n        // Stack values within a bar or column chart - Boolean\n        // Default: false.\n        isStacked: false,\n\n        tooltip: {\n\n            // Shows tooltip with values on hover - String\n            // Options: focus, none.\n            // Default: focus\n            trigger: \u0026#39;focus\u0026#39;\n        }\n    },\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eFor a complete list of Bar chart options visit \n\u003ca href=\"https://developers.google.com/chart/interactive/docs/gallery/barchart#Configuration_Options\"\u003eGoogle Bar Charts\u003c/a\u003e\u003c/p\u003e\n\u003ch4 id=\"google-pie-chart-options\"\u003eGoogle Pie Chart Options\u003c/h4\u003e\n\u003cp\u003eThe following are some of the Google Charts Pie Chart options, unless otherwise specified.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e\n    // Google Pie Chart Options\n    pieChart: {\n\n        // Width of chart in pixels - Number\n        // Default: automatic (unspecified)\n        width: null,\n\n        // Height of chart in pixels - Number\n        // Default: automatic (unspecified)\n        height: 200,\n\n        chartArea: { // The chart proportions\n            left: \u0026quot;20%\u0026quot;,\n            top: 40,\n            width: \u0026quot;60%\u0026quot;,\n            height: \u0026quot;85%\u0026quot;\n        },\n\n        // The font size in pixels - Number\n        // Or use css selectors as keywords to assign font sizes from the page\n        // For example: \u0026#39;body\u0026#39;\n        // Default: false - Use Google Charts defaults\n        fontSize: \u0026#39;body\u0026#39;,\n\n        // The font family name. String\n        // Default: body font family\n        fontName: \u0026#39;Arial\u0026#39;,\n\n        // Chart Title. String\n        // Default: The table caption text.\n        title: \u0026#39;Chart Title\u0026#39;,\n\n        titleTextStyle: {\n\n            // The font size in pixels - Number\n            // Or use css selectors as keywords to assign font sizes from the page\n            // For example: \u0026#39;body\u0026#39;\n            // Default: false - Use Google Charts defaults\n            fontSize: \u0026#39;h3\u0026#39;, \n        },\n\n        legend: {\n\n            // Legend position - Controls display of legend. String \n            // Options: \u0026#39;bottom\u0026#39;, \u0026#39;top\u0026#39;, \u0026#39;left\u0026#39;, \u0026#39;right\u0026#39;, \u0026#39;in\u0026#39;, \u0026#39;none\u0026#39;.\n            position: \u0026#39;right\u0026#39; \n        },\n\n        // Array of colours\n        colors: [\u0026#39;#90A046\u0026#39;, \u0026#39;#90A046\u0026#39;],\n\n        // Makes chart 3D. Boolean, Default: false.\n        is3D: false, \n\n        tooltip: {\n\n            // String - Shows tooltip with values on hover. \n            // Options: \u0026#39;focus\u0026#39;, \u0026#39;none\u0026#39;. Default: focus\n            trigger: \u0026#39;focus\u0026#39;,\n        }\n    },\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eFor a complete list of Pie Chart options visit \n\u003ca href=\"https://developers.google.com/chart/interactive/docs/gallery/piechart#Configuration_Options\"\u003eGoogle Pie Charts\u003c/a\u003e\u003c/p\u003e\n\u003ch4 id=\"google-column-chart-options\"\u003eGoogle Column Chart Options\u003c/h4\u003e\n\u003cp\u003eThe following are some of the Google Charts Column Chart options, unless otherwise specified.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e\n    // Google Column Chart Options\n    columnChart: { \n\n        // Width of chart in pixels - Number\n        // Default: automatic (unspecified)\n        width: null,\n\n        // Height of chart in pixels - Number\n        // Default: automatic (unspecified)\n        height: 200,\n\n        chartArea: { // The chart proportions\n            left: \u0026quot;20%\u0026quot;,\n            top: 40,\n            width: \u0026quot;60%\u0026quot;,\n            height: \u0026quot;85%\u0026quot;\n        },\n\n        // The font size in pixels - Number\n        // Or use css selectors as keywords to assign font sizes from the page\n        // For example: \u0026#39;body\u0026#39;\n        // Default: false - Use Google Charts defaults\n        fontSize: \u0026#39;body\u0026#39;,\n\n        // The font family name - String\n        // Default: body font family\n        fontName: \u0026#39;Arial\u0026#39;,\n\n        // Chart Title - String\n        // Default: The table caption text.\n        title: \u0026#39;Chart Title\u0026#39;,\n\n        titleTextStyle: {\n\n            // The font size in pixels - Number\n            // Or use css selectors as keywords to assign font sizes from the page\n            // For example: \u0026#39;body\u0026#39;\n            // Default: false - Use Google Charts defaults\n            fontSize: \u0026#39;h3\u0026#39;,  \n        },\n\n        legend: {\n\n            // Legend position - Controls display of legend. String \n            // Options: \u0026#39;bottom\u0026#39;, \u0026#39;top\u0026#39;, \u0026#39;left\u0026#39;, \u0026#39;right\u0026#39;, \u0026#39;in\u0026#39;, \u0026#39;none\u0026#39;. \n            Default: \u0026#39;bottom\u0026#39;\n            position: \u0026#39;right\u0026#39; \n        },\n\n        // Array of colours\n        colors: [\u0026#39;#90A046\u0026#39;, \u0026#39;#90A046\u0026#39;],\n\n        // Stack values within a bar or column chart. Boolean, Default: false.\n        isStacked: false,\n\n        tooltip: {\n\n            // String - Shows tooltip with values on hover. \n            // Options: \u0026#39;focus\u0026#39;, \u0026#39;none\u0026#39;. Default: focus\n            trigger: \u0026#39;focus\u0026#39;,\n        }\n    },\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eFor a complete list of Column Chart options visit \n\u003ca href=\"https://developers.google.com/chart/interactive/docs/gallery/columnchart#Configuration_Options\"\u003eGoogle Column Charts\u003c/a\u003e\u003c/p\u003e\n\u003ch4 id=\"google-geo-chart-options\"\u003eGoogle Geo Chart Options\u003c/h4\u003e\n\u003cp\u003eThe following are some of the Google Charts Geo Chart options, unless otherwise specified.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e\n    // Google Geo Chart Options\n    geoChart: { \n\n        // Width of chart in pixels - Number\n        // Default: automatic (unspecified)\n        width: null,\n\n        // Height of chart in pixels - Number\n        // Default: automatic (unspecified)\n        height: 200,\n\n        // The chart title - not a Google Geo Chart option\n        // This option is supported by Chartinator only\n        title: \u0026#39;Geo Chart\u0026#39;,\n\n        titleTextStyle: {\n            // Note: Support for this option has been added by Chartinator\n            // but is not supported by Google Charts for this chart type\n\n            // The html tag that contains the title Chartinator adds to the top of the chart\n            // This is supported by Chartinator only\n            tag: \u0026#39;h3\u0026#39;\n        }\n\n        // Background Color - Default: \u0026#39;white\u0026#39;\n        backgroundColor: \u0026#39;#fff\u0026#39;,\n\n        // Dataless Region Color - Default: \u0026#39;#F5F5F5\u0026#39;\n        datalessRegionColor: \u0026#39;#F5F5F5\u0026#39;,\n\n        // Map Region - String, Options: \u0026#39;world\u0026#39;, continent, region, country, states. \n        // Default: \u0026#39;world\u0026#39;\n        region: \u0026#39;world\u0026#39;,\n\n        // Resolution - String\n        // Options: \u0026#39;countries\u0026#39;, \u0026#39;provinces\u0026#39;, \u0026#39;metros\u0026#39;. Default: \u0026#39;countries\u0026#39;\n        resolution: \u0026#39;countries\u0026#39;,\n\n        legend: {\n\n            // Legend position - Controls display of legend. String \n            // Options: \u0026#39;bottom\u0026#39;, \u0026#39;top\u0026#39;, \u0026#39;left\u0026#39;, \u0026#39;right\u0026#39;, \u0026#39;in\u0026#39;, \u0026#39;none\u0026#39;. Default: right\n            position: \u0026#39;right\u0026#39; \n        },\n\n        colorAxis: {\n\n            // Start and end colour gradient values. Default: null\n            colors: [] \n        },\n\n        tooltip: {\n\n            // String - Shows tooltip with values on hover. \n            // Options: \u0026#39;focus\u0026#39;, \u0026#39;none\u0026#39;. Default: focus\n            trigger: \u0026#39;focus\u0026#39;,\n        }\n    },\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eNote: Google Charts does not apply a heading to this chart type.\nChartinator adds a heading using either the caption from the HTMl data table or the chartTitle option.\nFor a complete list of Geo Chart options visit \n\u003ca href=\"https://developers.google.com/chart/interactive/docs/gallery/geochart#Configuration_Options\"\u003eGoogle Geo Charts\u003c/a\u003e\u003c/p\u003e\n\u003ch4 id=\"google-calendar-chart-options\"\u003eGoogle Calendar Chart Options\u003c/h4\u003e\n\u003cp\u003eThe following are some of the Google Charts Calendar Chart options, unless otherwise specified.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e\n    // Google Calendar Chart Options\n    calendar: { \n\n        // The cell scaling factor custom option - Not a Google Chart option\n        // Used to refactor the cell size in responsive designs\n        // this is overridden if the calendar.cellSize option has a value\n        cellScaleFactor: 0.017,\n\n        // Width of chart in pixels - Number\n        // Default: automatic (unspecified)\n        width: null,\n\n        // Height of chart in pixels - Number\n        // Default: automatic (unspecified)\n        height: 200,\n\n        titleTextStyle: {\n            // Note: Support for this option has been added by Chartinator\n            // but is not supported by Google Charts for this chart type\n\n            color: \u0026#39;#000\u0026#39;,\n            fontWeight: \u0026#39;bold\u0026#39;,\n            fontName: \u0026#39;Arial\u0026#39;, // Default is body font-family\n\n            // The font size in pixels - Number\n            // Or use css selectors as keywords to assign font sizes from the page\n            // For example: \u0026#39;body\u0026#39;\n            // Default: \u0026#39;\u0026#39; - Use Google Charts defaults\n            fontSize: \u0026#39;h3\u0026#39;\n        },\n\n        calendar: {\n\n            // Cell size in pixels. Number, \n            // Default: use cellScaleFactor\n            cellSize: 16, \n\n            monthLabel: {\n\n                // Font-family name - String\n                // Default: the body font-family\n                fontName: \u0026#39;Times-Roman\u0026#39;, \n\n                // The font size in pixels - Number\n                // Or use css selectors as keywords to assign font sizes from the page\n                // For example: \u0026#39;body\u0026#39;\n                // Default: false - Use Google Charts defaults\n                fontSize: \u0026#39;body\u0026#39;,\n            },\n            dayOfWeekLabel: {\n\n                // Font-family name - String\n                // Default: the body font-family\n                fontName: \u0026#39;Arial\u0026#39;\n\n                // The font size in pixels - Number\n                // Or use css selectors as keywords to assign font sizes from the page\n                // For example: \u0026#39;body\u0026#39;\n                // Default: false - Use Google Charts defaults\n                fontSize: 12,\n            },\n            monthOutlineColor: {\n\n                // The active month outline stroke colour. String, Default: #000\n                stroke: \u0026#39;#000\u0026#39;, \n            }\n        },\n        colorAxis: {\n\n            // The colour gradient start and end values\n            colors: [\u0026#39;#FF0000\u0026#39;, \u0026#39;#00FF00\u0026#39;]\n        },\n        tooltip: {\n\n            // Note: Support for this option has been added by Chartinator\n            // but is not supported by Google Charts for this chart type\n            textStyle: {\n                color: \u0026#39;#000\u0026#39;,\n                fontName: \u0026#39;Arial\u0026#39;, // Default: body font-family\n                fontSize: 16\n            }\n        }\n    },\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eFor a complete list of Calendar Chart options visit \n\u003ca href=\"https://developers.google.com/chart/interactive/docs/gallery/calendar#Configuration_Options\"\u003eGoogle Calendar Charts\u003c/a\u003e\u003c/p\u003e\n\u003ch4 id=\"google-table-chart-options\"\u003eGoogle Table Chart Options\u003c/h4\u003e\n\u003cp\u003eThe following are some of the Google Charts Table Chart options, unless otherwise specified.\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"lang-javascript\"\u003e\n    // Google Table Chart Options\n    table: { \n\n        // The table caption - not a Google Charts option for this chart type\n        // Chartinator option only\n        title: \u0026#39;Table Chart\u0026#39;,\n\n        // The font size in pixels - Number\n        // Or use css selectors as keywords to assign font sizes from the page\n        // For example: \u0026#39;body\u0026#39;\n        // Not a Google Charts option for this chart type\n        fontSize: 16,\n\n        // The table caption - not a Google Charts option for this chart type\n        // Chartinator option only\n        // Default: the body font-family\n        fontName: \u0026#39;Roboto\u0026#39;,\n\n        // Format a data column in a Table Chart\n        formatter: { \n\n            // Formatter type - String, Options: \u0026#39;none\u0026#39;, \u0026#39;BarFormat\u0026#39;. Default: \u0026#39;none\u0026#39;\n            type: \u0026#39;none\u0026#39;,\n\n            // The index number of the column to format - Integer\n            // Options: 0, 1, 2, etc. Default: 1\n            column: 1, \n\n            // Base value number to compare the cell value against. Default: 0\n            base: 0, \n\n            // Negative bar color - String \n            // Options: \u0026#39;red\u0026#39;, \u0026#39;green\u0026#39;, \u0026#39;blue\u0026#39;. Default: \u0026#39;red\u0026#39;\n            colorNegative: \u0026#39;red\u0026#39;,\n\n            // Positive bar color - String \n            // Options:\u0026#39;red\u0026#39;, \u0026#39;green\u0026#39;, \u0026#39;blue\u0026#39;. Default: \u0026#39;blue\u0026#39;\n            colorPositive: \u0026#39;green\u0026#39;, \n\n            // Dark base line when negative values are present. \n            // Default value is \u0026#39;false\u0026#39;\n            drawZeroLine: false, \n\n            // Maximum  bar value. Number, Default: highest value in table\n            max: , \n\n            // Minimum bar value. Number, Default; lowest value in the table\n            min: ,\n\n            // Show number values. Boolean, Default: true\n            showValue: true, \n\n            // Thickness of each bar in pixels. Number, Default: 100\n            width: 100 \n        },\n\n        // Allow HTML in cells. Boolean, default: true\n        allowHtml: true,\n\n        // Alternating row styling - Boolean, Default: true\n        alternatingRowStyle: true,\n\n        // Width of chart in pixels. Number, Default: automatic (unspecified)\n        width: ,\n\n        // Height of chart in pixels. Number, Default: automatic (unspecified)\n        height: ,\n\n        // Enable paging - String, Options: enable, event, disable. Default: disable\n        page: \u0026#39;disable\u0026#39;, \n\n        // Rows per page. Integer, Default 10\n        pageSize: 10, \n\n        // Enable row numbers. Boolean, Default: false\n        showRowNumber: false, \n\n        // Enables sorting. String, Options: enable, event, disable. Default: enable\n        sort: \u0026#39;enable\u0026#39;, \n\n        // Sort order. Boolean, Default: true\n        sortAscending: true, \n\n        // The index of a column to sort. Integer, Default: -1\n        sortColumn: -1, \n\n        // CSS class names - Default: no classes\n        cssClassNames: { \n            headerRow: \u0026#39;headerRow\u0026#39;,\n            tableRow: \u0026#39;tableRow\u0026#39;,\n            oddTableRow: \u0026#39;oddTableRow\u0026#39;,\n            selectedTableRow: \u0026#39;selectedTableRow\u0026#39;,\n            hoverTableRow: \u0026#39;hoverTableRow\u0026#39;,\n            headerCell: \u0026#39;headerCell\u0026#39;,\n            tableCell: \u0026#39;tableCell\u0026#39;,\n            rowNumberCell: \u0026#39;rowNumberCell\u0026#39;\n        }\n    },\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eNote: Google Charts does not apply a table caption to this chart.\nChartinator adds a caption to the table taken from either the HTML data table or the chartTitle option.\nFor a complete list of Table Chart options visit \n\u003ca href=\"https://developers.google.com/chart/interactive/docs/gallery/table#Configuration_Options\"\u003eGoogle Table Charts\u003c/a\u003e\u003c/p\u003e\n\u003ch3 id=\"styling-tooltips\"\u003eStyling Tooltips\u003c/h3\u003e\n\u003cp\u003eGoogle Charts HTML enabled tooltips can be styled using the relevant CSS classes. \nChartinator adds a style element to the head of the document to apply custom styles to tooltips for for certain chart types.\nThe default Google Charts tooltip CSS is located at: \u003ca href=\"https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/core/tooltip.css\"\u003ehttps://ajax.googleapis.com/ajax/static/modules/gviz/1.0/core/tooltip.css\u003c/a\u003e\u003c/p\u003e\n\u003ch3 id=\"dependencies\"\u003eDependencies\u003c/h3\u003e\n\u003cp\u003ejQuery, Google Charts\u003c/p\u003e\n\u003ch3 id=\"how-to-run-tests\"\u003eHow to run tests\u003c/h3\u003e\n\u003cp\u003eNo testing framework at this time\u003c/p\u003e\n\u003ch3 id=\"task-managers\"\u003eTask Managers\u003c/h3\u003e\n\u003cp\u003eGruntfile.js and package.json files are included if you want to manage tasks using Grunt.\u003cbr\u003eNote: The Grunt file uses configuration information contained in the package.json\u003c/p\u003e\n\u003ch3 id=\"deployment-instructions\"\u003eDeployment instructions\u003c/h3\u003e\n\u003cp\u003eThe git repo is versioned and includes a Bower configuration file so the repo can be easily included in your project as a dependency.\u003c/p\u003e\n\u003ch2 id=\"contribution-guidelines\"\u003eContribution guidelines\u003c/h2\u003e\n\u003cp\u003eContributions are much appreciated and welcomed.\u003c/p\u003e\n\u003ch3 id=\"who-do-i-talk-to-\"\u003eWho do I talk to?\u003c/h3\u003e\n\u003cp\u003ejbowyers\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbowyers%2Fchartinator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjbowyers%2Fchartinator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjbowyers%2Fchartinator/lists"}