// 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']],

    <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>

    // 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 - 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'         }     },

    // 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',         }     },

    // 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',         }     },

    // 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',         }     },

    // 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             }         }     },

    // 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'         }     },