Introduction

This article demonstrates how to create an interactive business report with data visualization widgets using Klipse add Google Charts.

Google chart is a solid and rich javascript library for visualization widgets. Be sure to check out the Google chart Gallery.

We will visualize simulated data for a website conversion funnel.

The data of the funnel is in this Google drive spreadsheet.

Raw data grouped by month

{
  chartType:'ColumnChart',
  dataSourceUrl:'https://docs.google.com/spreadsheets/d/1kB4B4c0x11SNagYKmjI1ZpHYP-pQn1Hq_N6tlWaWg10/edit?usp=sharing',
  query: 'select A, sum(B), sum(C), sum(D), sum(E) group by A',
  refreshInterval: 5,
  options: {
    height: 400,
  }
}

Modify the query parameter and the chart will update automagically…

You can also modify the options.

Check out the Bar chart guide for more visulization options.

Revenue by Geography for January 2016

{
  chartType:'PieChart',
  dataSourceUrl:'https://docs.google.com/spreadsheets/d/1kB4B4c0x11SNagYKmjI1ZpHYP-pQn1Hq_N6tlWaWg10/edit?usp=sharing',
  query: "select F, sum(E) where A = 'Jan 2016' group by F ",
  refreshInterval: 5,  
  options: {
    title: "Revenue by Geography",
    height: 400, 
  },
}  

Modify the query parameter and the chart will update automagically…

You can also modify the options.

Check out the Pie chart guide for more visulization options.

Conversion rate by region

{
  chartType:'ColumnChart',
  dataSourceUrl:'https://docs.google.com/spreadsheets/d/1kB4B4c0x11SNagYKmjI1ZpHYP-pQn1Hq_N6tlWaWg10/edit?usp=sharing',
  query: "select F, sum(D)/sum(B)  where A = 'Jan 2016' group by F ",
  refreshInterval: 5,  
  options: {
    title: 'Conversion rate by Region',
    series: [
      {color: 'orange', visibleInLegend: false,},
    ],
    height: 400,
    vAxis: {
      format: "#,##0.00%",
      title: 'conversion rate'
    },
    xAxis: {
      title: 'Region'
    }
  } 
}

Modify the query parameter and the chart will update automagically…

You can also modify the options.

Check out the Bar chart guide for more visulization options.