Chartinator is a jQuery plugin for converting HTML tables, Google Sheets, and js arrays into charts using Google Charts.
jquery charts free, jquery bar chart, best jquery charts, jquery chart plugin
Features
Chartinator currently supports the following:
- Create all kinds of charts using Google Charts.
- Extract data from HTML tables, Google Sheets, and JavaScript arrays.
- Accessible Data – Using HTML tables as data sources make data accessible for screen readers and search bots.
- Create HTML tables from other data sources – Makes data extracted from JS arrays and Google Sheets accessible.
- Easily show and hide HTML tables.
- Process data extracted from HTML tables and Google Sheets using JavaScript arrays.
- Data switch – switch rows and columns.
- Resizing charts on the screen – Responsive web design.
- Control the aspect ratio of the graph.
- Technical Orientation – graph zooming and shifting – is useful for optimizing the area displayed in geographical charts.
- Customizable graph hints and annotations.
- Customize all Google Chart options – fonts, colors, graph format, etc.
- Add Google Schema event handlers – Event handlers can be specified in the options.
How to make use of it:
1. Include the jQuery Chartinator plug-in after loading the jQuery library.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/chartinator.js" ></script>
2. The th
elements in the HTML table must have one of the following Data Type attributes:
<table id="myTable" class="barChart data-table"> <caption>Student Nationalities Table</caption> <tr> <th scope="col" data-type="string">Country</th> <th scope="col" data-type="number">Number of Students</th> </tr> <tr> <td>Bulgaria</td> <td align="right">1</td> </tr> <tr> <td>China</td> <td align="right">19</td> </tr> <tr> <td>Colombia</td> <td align="right">5</td> </tr> <tr> <td>France</td> <td align="right">3</td> </tr> ... </table>
3. Connect to the plugin to create a bar chart with Google Charts.
var chart1 = $('#barChart').chartinator({ // The jQuery selector of the HTML table element to extract the data from - String // Default: false // If unspecified, the element this plugin is applied to must be the HTML table tableSel: '.barChart', // The chart type - String // Default: 'BarChart' // Options: BarChart, PieChart, ColumnChart, Calendar, GeoChart, Table. chartType: 'BarChart', // Google Bar Chart Options barChart: { ... }, // Show table as well as chart - String // Options: 'show', 'hide', 'remove' showTable: 'show' });
4. Full plugin options.
// The path to the Google AJAX API urlJSAPI: 'https://www.google.com/jsapi', // The data columns js array // Default: false columns: false, // Column indexes array - An array of column indexes defining where // the data will be inserted into any existing data extracted from an HTML table // Default: false - js data array columns replace any existing columns // Note: when inserting more than one column be sure to increment index number // to account for previously inserted indexes colIndexes: false, // Rows - The rows data-array // If colIndexes array has values the row data will be inserted into the columns // defined in the colindexes array. Otherwise the row data will be appended // to any existing row data extracted from an HTML table // Default: false rows: false, // The jQuery selector of the HTML table element to extract the data from. // Default: false - Chart extracts data and replaces the HTML table(s) selected above tableSel: false, // Ignore column indexes array - An array of column indexes to ignore in the HTML table // Default: [] // Note: Only works when extracting data from HTML tables ignoreCol: [], // The tooltip concatenation - Defines a string for concatenating a custom tooltip. // Keywords: 'domain', 'data', 'label' - these will be replaced with current values // 'domain': the primary axis value, 'data': the data value, 'label': the column title // Default: false - use Google Charts tooltip defaults // Note: Only works when extracting data from HTML tables // Not supported on pie, calendar charts tooltipConcat: false, // The annotation concatenation - Defines a string for concatenating a custom annotation. // Keywords: 'domain', 'data', 'label' - these will be replaced with current values // 'domain': the primary axis value, 'data': the data value, 'label': the column title // Default: false - use Google Charts annotation defaults // Note: Only works when extracting data from HTML tables. // Not supported on pie, geo, calendar charts annotationConcat: false, // The chart type - Options: BarChart, PieChart, ColumnChart, Calendar, GeoChart, Table. // Default: 'BarChart' chartType: 'BarChart', // The class to apply to the dynamically created chart container element chartClass: 'chtr-chart', // The chart height aspect ratio custom option // Used to refactor the chart height relative to the width in responsive designs // this is overridden if the Google Charts height option has a value // Default: false - not used chartHeightRatio: false, // Google Bar Chart Options barChart: { // The font size in pixels - Number // Or use css selectors as keywords to assign font sizes from the page // For example: 'body' // Default: false - Use Google Charts defaults fontSize: false, chartArea: { left: "20%", top: 40, width: "75%", height: "85%" }, fontName: o.fontFamily, legend: { position: 'bottom' } }, // Google Pie Chart Options pieChart: { // The font size in pixels - Number // Or use css selectors as keywords to assign font sizes from the page // For example: 'body' // Default: false - Use Google Charts defaults fontSize: false, chartArea: { left: 0, top: 0, width: "100%", height: "100%" }, fontName: o.fontFamily }, // Google Column Chart Options columnChart: { // The font size in pixels - Number // Or use css selectors as keywords to assign font sizes from the page // For example: 'body' // Default: false - Use Google Charts defaults fontSize: false, fontName: o.fontFamily, legend: { position: 'bottom' } }, // Google Geo Chart Options geoChart: { }, // Google Calendar Chart Options calendarChart: { // The cell scaling factor custom option - Not a Google Chart option // Used to refactor the cell size in responsive designs // this is overridden if the calendar.cellSize option has a value cellScaleFactor: 0.017, calendar: { monthLabel: { // The font size in pixels - Number // Or use css selectors as keywords to assign font sizes from the page // For example: 'body' // Default: false - Use Google Charts defaults fontSize: false, fontName: o.fontFamily }, dayOfWeekLabel: { // The font size in pixels - Number // Or use css selectors as keywords to assign font sizes from the page // For example: 'body' // Default: false - Use Google Charts defaults fontSize: false, fontName: o.fontFamily } } }, // Google Table Chart Options tableChart: { // Format a data column in a Table Chart formatter: { // Formatter type - Options: 'none', 'BarFormat' type: 'none', // The index number of the column to format. Options: 0, 1, 2, etc. column: 1 }, // Allow HTML in cells. default: false allowHtml: true, cssClassNames: { headerRow: 'headerRow', tableRow: 'tableRow', oddTableRow: 'oddTableRow', selectedTableRow: 'selectedTableRow', hoverTableRow: 'hoverTableRow', headerCell: 'headerCell', tableCell: 'tableCell', rowNumberCell: 'rowNumberCell' } }, // Show table along with chart. String, Options: 'show', 'hide', 'remove' showTable: 'hide', // The CSS to apply to show or hide the table and chart showTableCSS: { 'position': 'static', 'top': 0, 'width': '' }, hideTableCSS: { 'position': 'absolute', 'top': '-9999px', 'width': $tableS.width() }, showChartCSS: { }, hideChartCSS: { 'opacity': 0 }
jquery plugin for charts and graphs, Chartinator Plugin/Github
See Demo And Download
Official Website(jbowyers): Click Here
This superior jQuery/javascript plugin is developed by jbowyers. For extra advanced usage, please go to the official website.
Be First to Comment