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

    Adblocker detected! Please consider reading this notice.

    We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

    We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

    We need money to operate the site, and almost all of it comes from our online advertising.

    Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

    ×