Google Charts - Google Charts tutorial - Learn Google Charts - chart js - google graphs - google charts examples




Learn Google Charts - How google charts works ?

Google charts can be created with the following below things
  • DataTable Object
  • Interactive Charts (Visualization API)
  • Image Charts (Chart API)
  • Step 1: Initial Libraries to load

     <!--Load the AJAX API-->
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});
    // Set a callback to run when everything is loaded.
    google.setOnLoadCallback(drawChart);
    function drawChart() {
    // MAGIC!
    }
    </script>
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
    The libraries can be added as below,
     <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    ...
    </script> 
    
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

    What is a DataTable ?

  • Representation of your data in JavaScript
  • Query just like SQL
  • Sortable, Filterable, Cloneable, Manipulatable
  • Easy to pass along to different visualizations
  • Step 2 : Making a DataTable - Prepare the data and populate the DataTable

  • Google Chart Tools charts require data to be wrapped in a JavaScript class called Google.visualization.DataTable
  • A DataTable is a two-dimensional table with rows and columns, where each column has a datatype, an optional ID, and an optional label.
  • There are different ways to create a datatable
    • Create Empty Data Table and add columns and rows to it
    • Use a JavaScript Literal Initializer
  • var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours');
    data.addRows([
    ['Work', 11],
    ['Eat', 1],
    ['Commute', 2],
    ['Watch TV', 3]
    ]);
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

    More Ways To Populate Data

    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows(4);
    data.setValue(0, 0, 'Work'); //row index, cell index, value
    data.setValue(0, 1, 11);
    data.setValue(1, 0, 'Eat');
    data.setValue(1, 1, 1);
    data.setValue(2, 0, 'Commute');
    data.setValue(2, 1, 2);
    data.setValue(3, 0, 'Watch TV');
    data.setValue(3, 1, 3);
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
    learn google charts - google charts tutorial -  google charts examples -  google visualization chart - chart on the web    - google charts code - google charts program - google charts download - google charts example

    More ways - Populate the Data Table with Javascript

  • Use a JavaScript Literal Initializer
    • You can pass a JavaScript literal object into your table constructor, defining the table schema and optionally data as well.
  • Advantages:
    • Useful when generating data on your web server.
    • Processes faster than other methods for larger tables (about 1,000+ cells)
  • Disadvantages:
    • Syntax is tricky to get right, and prone to typos.
    • Not very readable code.
    • Temptingly similar, but not identical, to JSON.
  •  var data = new google.visualization.DataTable(
    {
    cols: [ {id: 'x', label: 'x', type: 'number' },
    {id: 'Dogs', label: 'Dogs', type: 'number' } ],
    rows: [ { c: [ {v: 0} , {v: 0} ] },
    { c: [ {v: 1} , {v: 10} ] },
    { c: [ {v: 2} , {v: 23} ] },
    { c: [ {v: 3} , {v: 17} ] },
    { c: [ {v: 4} , {v: 18} ] },
    ]
    }
    );
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

    DataViews in google charts

  • Subset of data from a DataTable
  • Remove or duplicate rows or columns
  • Original DataTable stays intact
  • Live view of the underlying data, not a copy
  • Step 3 : Making A DataView

    var view = new google.visualization.DataView(data);
    view.setRows(
    view.getFilteredRows([{
    column:1,
    maxValue:5
    }])
    );    
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
    learn google charts - google charts tutorial -  google charts examples -  google visualization chart - chart on the web    - google charts code - google charts program - google charts download - google charts example

    Step 4 : Customize the chart by specifying options

  • Every chart has many customizable options, including title, colors, line thickness, background fill, and so on.
  • Specify custom options for your chart by defining a JavaScript object with option_name/option_value properties.
  • var options = {
    chart: {
    title: 'Box Office Earnings in First Two Weeks of Opening',
    subtitle: 'in millions of dollars (USD)'
    },
    width: 900,
    height: 500,
    vAxis: {
    title: 'Amount Collected },
    hAxis: {
    title: 'Day' }
    }; 
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

    Step 5 : Draw the Chart - Instantiate the chart:

    Each chart type is based on a different class, listed in the chart's documentation.Create instance of your chart with single parameter
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

    Step 6 : Finally Draw your chart:

    Once you have prepared your data and options, you can draw chart by following call
    chart.draw(myData, options);
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

    Step 7 : Pie Chart example

    // Create and draw the visualization.
    var target = document.getElementById('visualization');
    new google.visualization.PieChart(target).draw(
    view,
    {title: ‘So, how was your day?’}
    ); 
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
    learn google charts - google charts tutorial -  google charts examples -  google visualization chart - chart on the web    - google charts code - google charts program - google charts download - google charts example

    Step 5 : Pie Chart example - Add Properties

    new google.visualization.PieChart(target).draw(
    view,
    {
    title: ‘So, how was your day?’,
    is3D: true,
    colors: ['#0099ff', '#00ff99', '#9900ff']
    }
    ); 
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
    learn google charts - google charts tutorial -  google charts examples -  google visualization chart - chart on the web    - google charts code - google charts program - google charts download - google charts example

    Data Formats supported by google charts

  • Basic Text Format (chd=t:)
  • Simple Encoding (chd=s:)
  • Extended Encoding (chd=e:)
  • Some formats use less characters than others
  • Basic Text Data Format

  • Floating Point Values From 0-100
  • Values less than 0 are considered NULL
  • Values higher than 100 are truncated to 100
  • What you see is what you get
  • Ideal for smaller datasets
  • Produces the largest number of characters
  • Google Charts - Basic Text Data Example

  • chd=t:_30,-30,50,80,200
  • learn google charts - google charts tutorial -  google charts examples -  google visualization chart - chart on the web    - google charts code - google charts program - google charts download - google charts example

    Google Charts - Simple Encoding Data Format

  • Integer values 0-61
  • Relative Scaling
  • Low Granularity
  • Each value encoded as a single alphanumeric character
  • Produces the smallest number of characters
  • Simple Encoding Function

    var simpleEncoding =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
    //Scales submitted values so that maxVal becomes the highest.
    function simpleEncode(valueArray, maxValue) {
    var chartData = ['s:'];
    for (var i = 0; i < valueArray.length; i++) {
    var currentValue = valueArray[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
    chartData.push(simpleEncoding.charAt(
    Math.round((simpleEncoding.length-1) *
    currentValue / maxValue))
    ); }
    else { chartData.push('_'); }
    }
    return chartData.join('');
    }
    Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

    Google Charts - Simple Encoding Example

  • chd=t:1,19,27,53,61,-1|12,39,57,45,51,27
  • chd=s:BTb19_,Mn5tzb
  • learn google charts - google charts tutorial -  google charts examples -  google visualization chart - chart on the web    - google charts code - google charts program - google charts download - google charts example

    Extended Data Format

  • Integer values 0-4095
  • Relative scaling
  • High Granularity
  • Each value encoded as two alphanumeric characters
  • Extended Encoding Function in Google Charts

  • Similar to Simple Encoding Function but too big to show here.
  • Grab it at http://code.google.com/apis/chart/docs/ data_formats.html#encoding_data
  • Extended Encoding Example - Google Charts

  • chd=t:90,1000,2700,3500|3968,-1,1100,250
  • chd=e:BaPoqM2s,-A__RMD6
  • learn google charts - google charts tutorial -  google charts examples -  google visualization chart - chart on the web    - google charts code - google charts program - google charts download - google charts example

    Data Scaling in Google Charts

  • chds=<min-value>, <max-value>
  • learn google charts - google charts tutorial -  google charts examples -  google visualization chart - chart on the web - data scaling in google charts    - google charts code - google charts program - google charts download - google charts example

    Axis Scaling - Google Charts

  • chxr=<axis_index>,<start_val>,<end_val>, <opt_step>
  • Axis labels are not calculated to reflect chart data automatically!
  • If you’re data is 0-100, then you’re good!
  • Axis Scaling Example - Google Charts

    learn google charts - google charts tutorial -  google charts examples -  google visualization chart - chart on the web - data scaling in google charts    - google charts code - google charts program - google charts download - google charts example

    Related Searches to Learn Google Charts