Uncategorized

jQuery Responsive Google Charts Plugin (Ratings and Charts)

By Acty, November 13, 2013

Responsive jQuery Google Charts Plugin

Its now easier than ever to use Google charts in your website. No javascript knowledge or jQuery knowledge is required.

You can easily set up nice, SVG, responsive charts on your websites by setting a few HTML data- properties. Here’s all the HTML you need to set up one of six charts.

<!--Chart HTML-->
    <div id="mybarchart" data-gchart
         data-chartsize="med-chart" 
         data-charttitle="My Cool Bar Chart" 
         data-horizontalcharttitle="Some data on horizontal axis" 
         data-verticalcharttitle="Some data on vertical axis" 
         data-containername="mybarchart" 
         data-datasource="https://docs.google.com/spreadsheet...
         data-gcharttype="bar">
    </div>

Yes, its that simple. Add an unlimited number of charts by simply repeating the HTML code snippet above. Here are the different chart types in version 1:

  • Bar Chart
  • Column Chart
  • Bubble Chart
  • Candlestick Chart
  • Line Chart
  • Pie Chart

Customization

Easily change the global color scheme and even the font applied to the charts.