{"id":4139,"date":"2018-07-10T13:05:24","date_gmt":"2018-07-10T13:05:24","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=4139"},"modified":"2021-08-23T07:14:04","modified_gmt":"2021-08-23T07:14:04","slug":"chartinator","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/chartinator\/","title":{"rendered":"CHARTINATOR"},"content":{"rendered":"<div class=\"info-box\">\n<div class=\"info info-author\"><em><span style=\"text-decoration: underline;\"><strong>Made by:<\/strong><\/span><\/em><\/p>\n<ul>\n<li>jbowyers<\/li>\n<li class=\".last-child\"><time>March 20, 2015<\/time><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><em><span style=\"text-decoration: underline;\"><strong><span class=\"about-the-item\">About the plugin:<\/span><\/strong><\/span><\/em><\/p>\n<p>This is an amazing and wonderful jQuery plugin for transforming HTML tables into charts using Google Charts.<\/p>\n<p><em><span style=\"text-decoration: underline;\"><strong><span class=\"about-the-item\">Features:<\/span><\/strong><\/span><\/em><\/p>\n<ul class=\"article-list\">\n<li>Creation of all chart types using Google Charts &#8211; Visit\u00a0<a href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\">https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery<\/a><\/li>\n<li>Extraction of data from HTML tables, Google spreadsheets, and JavaScript arrays<\/li>\n<li>Accessible data &#8211; Using HTML tables as data sources makes data accessible to screen readers and searchbots<\/li>\n<li>Generation of HTML tables from other data sources &#8211; Makes data extracted from JS arrays and Google Sheets accessible<\/li>\n<li>Showing and hiding of HTML tables accessibly<\/li>\n<li>Manipulation of data extracted from HTML tables and Google Sheets using JavaScript arrays<\/li>\n<li>Transposition of data &#8211; swapping of rows and columns<\/li>\n<li>Resizing of charts on screen resize &#8211; Responsive Web Design<\/li>\n<li>Chart aspect ratio control<\/li>\n<li>Art direction &#8211; Zoom and offset of chart &#8211; Useful for refining the region displayed in geoCharts<\/li>\n<li>Customization of chart tooltips and annotations<\/li>\n<li>Customization of all Google Chart options &#8211; Fonts, colors, chart formatting, etc.<\/li>\n<li class=\".last-child\">Adding Google Chart event handlers &#8211; Event handlers can be defined in the options<\/li>\n<\/ul>\n<a href=\"https:\/\/github.com\/jbowyers\/chartinator\/archive\/master.zip\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n<a href=\"http:\/\/chartinator.com\/\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo<\/span><\/a>\n<a href=\"https:\/\/github.com\/jbowyers\/chartinator\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Github Page<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Made by: jbowyers March 20, 2015 About the plugin: This is an amazing and wonderful jQuery plugin for transforming HTML tables into charts using Google Charts. Features: Creation of all chart types using Google Charts &#8211; Visit\u00a0https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery Extraction of data from HTML tables, Google spreadsheets, and JavaScript arrays Accessible data &#8211; Using HTML tables as data sources makes data accessible to screen readers and searchbots Generation of HTML tables from other data sources &#8211; 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 &#8211; swapping of rows and columns Resizing of charts on screen resize &#8211; <!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":4140,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[769],"tags":[785,771],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/4139"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=4139"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/4139\/revisions"}],"predecessor-version":[{"id":28527,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/4139\/revisions\/28527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/4140"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=4139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=4139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=4139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}