This document introduces Google Chart Tools, which allows users to create interactive charts and maps from various data sources. It has several advantages, including customization to fit website designs, cross-browser compatibility, and connection to real-time dynamic data. The tool uses HTML5/SVG technology and has a library of chart types. Charts can be created by loading libraries, populating data tables from sources, customizing options, and drawing the chart. Various chart types are demonstrated, including area, bar, gauge, geo, table, tree, combo, line, scatter, candlestick, and organizational charts. Examples show how to query external data and customize visualizations.
A brief run through of the various APIs Google offers for creating free interactive and static data visualizations.
Links mentioned in this presentation: http://dev.kingkool68.com/google-charting-api/list-o-links.html
Quick & Easy Data Visualization with Google Visualization API + Google Char...Bohyun Kim
Presentation given at the 2014 CODE4LIB Conference, Raleigh, NC. Mar. 25, 2014.
Conference Info: http://code4lib.org/conference/2014/schedule
Example code: http://github.com/bohyunkim/examples
D3.js - A picture is worth a thousand wordsApptension
Here's a short introduction to D3 - a JavaScript library for visualizing data using web standards. This presentation was prepared by our Junior Frontend Developer for our monthly devtalk.
In this presentation we will have a look at the Dynamic Data functionality introduced in ASP 3.5 SP1. We will examine the architecture, concepts and main components of this framework such as Page Modes, Page Templates, Field Templates and Validation. We will discuss customization options for this type of projects. We will also have a look at the Dynamic Data Wizard tool that did not make into the RTM but may assist you in creation of Dynamic Data web sites.
A brief run through of the various APIs Google offers for creating free interactive and static data visualizations.
Links mentioned in this presentation: http://dev.kingkool68.com/google-charting-api/list-o-links.html
Quick & Easy Data Visualization with Google Visualization API + Google Char...Bohyun Kim
Presentation given at the 2014 CODE4LIB Conference, Raleigh, NC. Mar. 25, 2014.
Conference Info: http://code4lib.org/conference/2014/schedule
Example code: http://github.com/bohyunkim/examples
D3.js - A picture is worth a thousand wordsApptension
Here's a short introduction to D3 - a JavaScript library for visualizing data using web standards. This presentation was prepared by our Junior Frontend Developer for our monthly devtalk.
In this presentation we will have a look at the Dynamic Data functionality introduced in ASP 3.5 SP1. We will examine the architecture, concepts and main components of this framework such as Page Modes, Page Templates, Field Templates and Validation. We will discuss customization options for this type of projects. We will also have a look at the Dynamic Data Wizard tool that did not make into the RTM but may assist you in creation of Dynamic Data web sites.
Luca Passani - Essential Tools for Mobile-Aware Web Professionals | Codemoti...Codemotion
Ora che il Web e il Mobile Web sono Uno e Bino, come costruiamo siti e servizi che funzionano bene per tutti? Detta in un altro modo, perchè mi avete portato a CodeMotion se basta e avanza usare un template Responsive per essere Mobile? ScientiaMobile presenta tre fantastici servizi, utilizzabili anche in versione gratuita, che non possono essere ignorati da chi produce siti web professionali. #PictureElement #ResponsiveImages #ResponsiveWebDesign #ImageEngine #WebPerf #MobileWeb #ImageOptimization #InGodWeTrustEveryoneElseBringData #MOVR #MobileAwareAnalytics #OggiCèilSole
Understanding Connected Data through VisualizationSebastian Müller
These are the (static) slides of my talk at Connected Data London 2019. The talk is about the kind of tools that are available for the visualization of connected data as in graphs, diagrams, networks, graph-databases and triple-stores.
The focus of the talk is about how you can get better results with the help of software programming libraries for visualization.
There is no audio track or speaker notes available, currently.
The technical aspects of the talk will also be covered in greater detail in the upcoming yWorks webinar on October 16th 2019: https://yworks.com/webinars
Visual Exploration of Large Data sets with D3, crossfilter and dc.jsFlorian Georg
My talk at this year's Jazoon about data visualization and exploration with D3, crossfilter and dc.js
It should give you a good introduction on how/when to use these frameworks and how they relate to each other.
More info on http://datavisual.mybluemix.net
How to grow GraphQL and remove SQLAlchemy and REST API from a high-load Pytho...Oleksandr Tarasenko
GraphQL is a new black, a hype over the Internet with a very few real-life examples of how to use it in big in-house projects. I’d like to show the real example of GraphQL Evolution from a small mobile API to a cross-services integration in a high-load Python project that took us 3 years to develop.
Description:
Intro to GraphQL in the Python world.
Step-by-step GraphQL evolution in a big high-load python project:
Step 1. Mobile App API with GraphQL
Step 2. Separate Frontend from Backend in high-load python project using GraphQL
Step 3. Graph services as Proxy via different Graph APIs
Step 4. Replace SqlAlchemy models via Graph
Step 5. Mutations in Graph API
Step 6. A brave new world with GraphQL
For every step, I will provide real examples (metrics, graphics, numbers), problems and solutions that we had during the years 2015 - 2019.
Dynamic Data Visualization With ChartkickDax Murray
Learn how to easily add dynamic data visualization to your Ruby on Rails web application with the Ruby gem Chartkick. Chartkick accesses the Google Charts and the Highcharts library so you can add add data visualization with one line or Ruby code.
Move your data (Hans Rosling style) with googleVis + 1 line of R codeJeffrey Breen
R's googleVis package makes it easy to use the Google Visualization API with your data. Here we demonstrate how to create a Hans Rosling-style motion chart with some sample data. Just one line of R code automatically generates 165 lines of HTML and JavaScript for us. This "lightning talk" was presented at the July 2011 meeting of the Greater Boston useR meeting.
bbyopen/App_Code/.DS_Store
bbyopen/App_Code/VBCode/GoogleMapsAPIHelpers.vb
Imports Microsoft.VisualBasic
Imports System.Xml.Linq
Public Class GoogleMapsAPIHelpers
Public Shared Function GetGeocodingSearchResults(ByVal address As String) As XElement
'Use the Google Geocoding service to get information about the user-entered address
'See http://code.google.com/apis/maps/documentation/geocoding/index.html for more info...
Dim url = String.Format("http://maps.google.com/maps/api/geocode/xml?address={0}&sensor=false", HttpContext.Current.Server.UrlEncode(address))
'Load the XML into an XElement object (whee, LINQ to XML!)
Dim results = XElement.Load(url)
'Check the status
Dim status = results.Element("status").Value
If status <> "OK" AndAlso status <> "ZERO_RESULTS" Then
'Whoops, something else was wrong with the request...
Throw New ApplicationException("There was an error with Google's Geocoding Service: " & status)
End If
Return results
End Function
End Class
bbyopen/App_Data/StoreLocations.mdf
bbyopen/App_Data/StoreLocations_log.LDF
bbyopen/Bin/Microsoft.Web.GeneratedImage.dll
bbyopen/Default.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content runat="server" ID="myHeadContent" ContentPlaceHolderID="head">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
function init_map(map_canvas_id, lat, lng, zoomLevel) {
var myLatLng = new google.maps.LatLng(lat, lng);
var options = {
zoom: zoomLevel,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map_canvas = document.getElementById(map_canvas_id);
var map = new google.maps.Map(map_canvas, options);
var marker=new google.maps.Marker({
position:myLatLng,
});
marker.setMap(map);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h2>Welcome!</h2>
<p>
This demo shows how to use the <a href="http://code.google.com/apis/maps/">Google Maps API</a> to build a simple store locator
web application.
</p>
<p>
This demo site is powered by the <code>StoreLocations.mdf</code> database in the <code>App_Data</code> folder, which contains a single
table, <code>Stores</code>. This table has one record for each store, specifying the StoreId, address, city, , zip code, phone, hours,
and latitude and longitude coordinates. From the <a href="FindAStore.aspx">Find a Store ...
GraphQL Summit 2019 - Configuration Driven Data as a Service Gateway with Gra...Noriaki Tatsumi
In this talk, you’ll learn about techniques used to build a scalable GraphQL based data gateway with the capability to dynamically on-board various new data sources. They include runtime schema evolution and resolver wiring, abstract resolvers, auto GraphQL schema generation from other schema types, and construction of appropriate cache key-values.
Using the SharePoint Framework as a surface to express yourself through client side solutions is great but at some point in time, you will require that this beauty you built interacts with APIs holding data that lives within the Office 365 environment. In this session, you will learn how to utilize and optimize your calls to SharePoint via its REST APIs, to the Microsoft Graph and to external services that you might find useful to deliver a rich experience in your solution. You will also learn about how to simplify those calls using the Community-Driven library PnP JS Core that aims to save your time (and sanity) by simplifying the access to the SharePoint REST APIs and to the Microsoft Graph. Goodbye URLs, hello intellisense!
Using the SharePoint Framework as a surface to express yourself through client side solutions is great but at some point in time, you will require that this beauty you built interacts with APIs holding data that lives within the Office 365 environment. In this session, you will learn how to utilize and optimize your calls to SharePoint via its REST APIs, to the Microsoft Graph and to external services that you might find useful to deliver a rich experience in your solution. You will also learn about how to simplify those calls using the Community-Driven library PnP JS Core that aims to save your time (and sanity) by simplifying the access to the SharePoint REST APIs and to the Microsoft Graph. Goodbye URLs, hello intellisense!
PyCon SG x Jublia - Building a simple-to-use Database Management toolCrea Very
Jublia is a business matching SaaS solution for the events industry. A common challenge faced by us and this industry is managing different dynamic datasets of participant databases. That’s why we built Jublia DATASYNC - an easy-to-use data management tool via Google Sheets. I will be sharing how you can also build a simple-to-use tools for both techies and non-techies alike to manage databases.
Running Intelligent Applications inside a Database: Deep Learning with Python...Miguel González-Fierro
In this talk we present a new paradigm of computation where the intelligence is computed inside the database. Standard software systems must get the data from the database to execute a routine. If the size of the data is big, there are inefficiencies due to the data movement. Store procedures tried to solve this issue in the past, allowing for computing simple functions inside the database. However, only simple routines can be executed.
To showcase the capabilities of our new system, we created a lung cancer detection algorithm using Microsoft’s Cognitive Toolkit, also known as CNTK. We used transfer learning between ImageNet dataset, which contains natural images, and a lung cancer dataset, which contains scans of horizontal sections of the lung for healthy and sick patients. Specifically, a pretrained Convolutional Neural Network on ImageNet is used on the lung cancer dataset to generate features. Once the features are computed, a boosted tree is applied to predict whether the patient has cancer or not.
All this process is computed inside the database, so the data movement is minimized. We are even able to execute the algorithm using the GPU of the virtual machine that hosts the database. Using a GPU, we can compute the featurization in less than 1h, in contrast to using a CPU, that would take up to 32h. Finally, we set up an API to connect the solution to a web app, where a doctor can analyze the images and get a prediction of a patient.
Luca Passani - Essential Tools for Mobile-Aware Web Professionals | Codemoti...Codemotion
Ora che il Web e il Mobile Web sono Uno e Bino, come costruiamo siti e servizi che funzionano bene per tutti? Detta in un altro modo, perchè mi avete portato a CodeMotion se basta e avanza usare un template Responsive per essere Mobile? ScientiaMobile presenta tre fantastici servizi, utilizzabili anche in versione gratuita, che non possono essere ignorati da chi produce siti web professionali. #PictureElement #ResponsiveImages #ResponsiveWebDesign #ImageEngine #WebPerf #MobileWeb #ImageOptimization #InGodWeTrustEveryoneElseBringData #MOVR #MobileAwareAnalytics #OggiCèilSole
Understanding Connected Data through VisualizationSebastian Müller
These are the (static) slides of my talk at Connected Data London 2019. The talk is about the kind of tools that are available for the visualization of connected data as in graphs, diagrams, networks, graph-databases and triple-stores.
The focus of the talk is about how you can get better results with the help of software programming libraries for visualization.
There is no audio track or speaker notes available, currently.
The technical aspects of the talk will also be covered in greater detail in the upcoming yWorks webinar on October 16th 2019: https://yworks.com/webinars
Visual Exploration of Large Data sets with D3, crossfilter and dc.jsFlorian Georg
My talk at this year's Jazoon about data visualization and exploration with D3, crossfilter and dc.js
It should give you a good introduction on how/when to use these frameworks and how they relate to each other.
More info on http://datavisual.mybluemix.net
How to grow GraphQL and remove SQLAlchemy and REST API from a high-load Pytho...Oleksandr Tarasenko
GraphQL is a new black, a hype over the Internet with a very few real-life examples of how to use it in big in-house projects. I’d like to show the real example of GraphQL Evolution from a small mobile API to a cross-services integration in a high-load Python project that took us 3 years to develop.
Description:
Intro to GraphQL in the Python world.
Step-by-step GraphQL evolution in a big high-load python project:
Step 1. Mobile App API with GraphQL
Step 2. Separate Frontend from Backend in high-load python project using GraphQL
Step 3. Graph services as Proxy via different Graph APIs
Step 4. Replace SqlAlchemy models via Graph
Step 5. Mutations in Graph API
Step 6. A brave new world with GraphQL
For every step, I will provide real examples (metrics, graphics, numbers), problems and solutions that we had during the years 2015 - 2019.
Dynamic Data Visualization With ChartkickDax Murray
Learn how to easily add dynamic data visualization to your Ruby on Rails web application with the Ruby gem Chartkick. Chartkick accesses the Google Charts and the Highcharts library so you can add add data visualization with one line or Ruby code.
Move your data (Hans Rosling style) with googleVis + 1 line of R codeJeffrey Breen
R's googleVis package makes it easy to use the Google Visualization API with your data. Here we demonstrate how to create a Hans Rosling-style motion chart with some sample data. Just one line of R code automatically generates 165 lines of HTML and JavaScript for us. This "lightning talk" was presented at the July 2011 meeting of the Greater Boston useR meeting.
bbyopen/App_Code/.DS_Store
bbyopen/App_Code/VBCode/GoogleMapsAPIHelpers.vb
Imports Microsoft.VisualBasic
Imports System.Xml.Linq
Public Class GoogleMapsAPIHelpers
Public Shared Function GetGeocodingSearchResults(ByVal address As String) As XElement
'Use the Google Geocoding service to get information about the user-entered address
'See http://code.google.com/apis/maps/documentation/geocoding/index.html for more info...
Dim url = String.Format("http://maps.google.com/maps/api/geocode/xml?address={0}&sensor=false", HttpContext.Current.Server.UrlEncode(address))
'Load the XML into an XElement object (whee, LINQ to XML!)
Dim results = XElement.Load(url)
'Check the status
Dim status = results.Element("status").Value
If status <> "OK" AndAlso status <> "ZERO_RESULTS" Then
'Whoops, something else was wrong with the request...
Throw New ApplicationException("There was an error with Google's Geocoding Service: " & status)
End If
Return results
End Function
End Class
bbyopen/App_Data/StoreLocations.mdf
bbyopen/App_Data/StoreLocations_log.LDF
bbyopen/Bin/Microsoft.Web.GeneratedImage.dll
bbyopen/Default.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content runat="server" ID="myHeadContent" ContentPlaceHolderID="head">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
function init_map(map_canvas_id, lat, lng, zoomLevel) {
var myLatLng = new google.maps.LatLng(lat, lng);
var options = {
zoom: zoomLevel,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map_canvas = document.getElementById(map_canvas_id);
var map = new google.maps.Map(map_canvas, options);
var marker=new google.maps.Marker({
position:myLatLng,
});
marker.setMap(map);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h2>Welcome!</h2>
<p>
This demo shows how to use the <a href="http://code.google.com/apis/maps/">Google Maps API</a> to build a simple store locator
web application.
</p>
<p>
This demo site is powered by the <code>StoreLocations.mdf</code> database in the <code>App_Data</code> folder, which contains a single
table, <code>Stores</code>. This table has one record for each store, specifying the StoreId, address, city, , zip code, phone, hours,
and latitude and longitude coordinates. From the <a href="FindAStore.aspx">Find a Store ...
GraphQL Summit 2019 - Configuration Driven Data as a Service Gateway with Gra...Noriaki Tatsumi
In this talk, you’ll learn about techniques used to build a scalable GraphQL based data gateway with the capability to dynamically on-board various new data sources. They include runtime schema evolution and resolver wiring, abstract resolvers, auto GraphQL schema generation from other schema types, and construction of appropriate cache key-values.
Using the SharePoint Framework as a surface to express yourself through client side solutions is great but at some point in time, you will require that this beauty you built interacts with APIs holding data that lives within the Office 365 environment. In this session, you will learn how to utilize and optimize your calls to SharePoint via its REST APIs, to the Microsoft Graph and to external services that you might find useful to deliver a rich experience in your solution. You will also learn about how to simplify those calls using the Community-Driven library PnP JS Core that aims to save your time (and sanity) by simplifying the access to the SharePoint REST APIs and to the Microsoft Graph. Goodbye URLs, hello intellisense!
Using the SharePoint Framework as a surface to express yourself through client side solutions is great but at some point in time, you will require that this beauty you built interacts with APIs holding data that lives within the Office 365 environment. In this session, you will learn how to utilize and optimize your calls to SharePoint via its REST APIs, to the Microsoft Graph and to external services that you might find useful to deliver a rich experience in your solution. You will also learn about how to simplify those calls using the Community-Driven library PnP JS Core that aims to save your time (and sanity) by simplifying the access to the SharePoint REST APIs and to the Microsoft Graph. Goodbye URLs, hello intellisense!
PyCon SG x Jublia - Building a simple-to-use Database Management toolCrea Very
Jublia is a business matching SaaS solution for the events industry. A common challenge faced by us and this industry is managing different dynamic datasets of participant databases. That’s why we built Jublia DATASYNC - an easy-to-use data management tool via Google Sheets. I will be sharing how you can also build a simple-to-use tools for both techies and non-techies alike to manage databases.
Running Intelligent Applications inside a Database: Deep Learning with Python...Miguel González-Fierro
In this talk we present a new paradigm of computation where the intelligence is computed inside the database. Standard software systems must get the data from the database to execute a routine. If the size of the data is big, there are inefficiencies due to the data movement. Store procedures tried to solve this issue in the past, allowing for computing simple functions inside the database. However, only simple routines can be executed.
To showcase the capabilities of our new system, we created a lung cancer detection algorithm using Microsoft’s Cognitive Toolkit, also known as CNTK. We used transfer learning between ImageNet dataset, which contains natural images, and a lung cancer dataset, which contains scans of horizontal sections of the lung for healthy and sick patients. Specifically, a pretrained Convolutional Neural Network on ImageNet is used on the lung cancer dataset to generate features. Once the features are computed, a boosted tree is applied to predict whether the patient has cancer or not.
All this process is computed inside the database, so the data movement is minimized. We are even able to execute the algorithm using the GPU of the virtual machine that hosts the database. Using a GPU, we can compute the featurization in less than 1h, in contrast to using a CPU, that would take up to 32h. Finally, we set up an API to connect the solution to a web app, where a doctor can analyze the images and get a prediction of a patient.
Joining the Club: Using Spark to Accelerate Big Data at Dollar Shave ClubData Con LA
Abstract:-
Data engineering at Dollar Shave Club has grown significantly over the last year. In that time, it has expanded in scope from conventional web-analytics and business intelligence to include real-time, big data and machine learning applications. We have bootstrapped a dedicated data engineering team in parallel with developing a new category of capabilities. And the business value that we delivered early on has allowed us to forge new roles for our data products and services in developing and carrying out business strategy. This progress was made possible, in large part, by adopting Apache Spark as an application framework. This talk describes what we have been able to accomplish using Spark at Dollar Shave Club.
Bio:-
Brett Bevers, Ph.D. Brett is a backend engineer and leads the data engineering team at Dollar Shave Club. More importantly, he is an ex-academic who is driven to understand and tackle hard problems. His latest challenge has been to develop tools powerful enough to support data-driven decision making in high value projects.
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
The Art Pastor's Guide to Sabbath | Steve ThomasonSteve Thomason
What is the purpose of the Sabbath Law in the Torah. It is interesting to compare how the context of the law shifts from Exodus to Deuteronomy. Who gets to rest, and why?
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxEduSkills OECD
Andreas Schleicher presents at the OECD webinar ‘Digital devices in schools: detrimental distraction or secret to success?’ on 27 May 2024. The presentation was based on findings from PISA 2022 results and the webinar helped launch the PISA in Focus ‘Managing screen time: How to protect and equip students against distraction’ https://www.oecd-ilibrary.org/education/managing-screen-time_7c225af4-en and the OECD Education Policy Perspective ‘Students, digital devices and success’ can be found here - https://oe.cd/il/5yV
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
How to Create Map Views in the Odoo 17 ERPCeline George
The map views are useful for providing a geographical representation of data. They allow users to visualize and analyze the data in a more intuitive manner.
We all have good and bad thoughts from time to time and situation to situation. We are bombarded daily with spiraling thoughts(both negative and positive) creating all-consuming feel , making us difficult to manage with associated suffering. Good thoughts are like our Mob Signal (Positive thought) amidst noise(negative thought) in the atmosphere. Negative thoughts like noise outweigh positive thoughts. These thoughts often create unwanted confusion, trouble, stress and frustration in our mind as well as chaos in our physical world. Negative thoughts are also known as “distorted thinking”.
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
2. Introduction
GCT is a tool for creating charts and maps from data available
Any data source which uses the “Chart Tools Data Source” Protocol
can be used to pick up data to create these charts.
Various Data sources:
Google Spreadsheets
Google Fusion Tables and
Some third party data providers like ‘Salesforce’
If you own a website and implement this protocol, you can also
become a data provider for Google Chart Tools.
3. Advantages of the tool
With this tool, you can customize your charts to fit the look and feel
of your website. Charts are highly interactive.
HTML5/SVG technology is used to create these charts and it
provides cross-browser compatibility and cross platform
portability to iPhones, iPads and Android. No plugins are needed.
It is a Free Tool which can connect to your real time data (Dynamic
Data)
Rich Gallery: It has a vast library of charts, maps and tables which
can be used to visualize and customize your data according to your
requirements
4. Building Blocks
Chart Library - Charts are exposed as JavaScript classes. The charts
can be customized easily according to the look and feel of your
website.
Data Tables - The charts are populated with the data from the
JavaScript DataTable class. The common data structure facilitates
easily switching between different types
Data Sources - The data can be queried from the websites that
implement the Chart Tools Datasource.
5.
6. Chart Creation
The charts can be rendered in your webpage by coding the charts and
customizing it according to your needs.
Important Parts of the Script :
Loading the chart libraries
The Google JSAPI API
The Google Visualization library and
The library for the chart itself
7. Data for charts
Data should be wrapped in a JavaScript class called google.
visualization.DataTable.
DataTable is two-dimensional table with rows and columns. Each
column has a datatype, an optional ID and an optional Label.
Various Ways To Create and Populate the Data Tables:
Create a new DataTable, then call
addColumn()/addRows()/addRow()/setCell()
arrayToDataTable()
JavaScript literal initializer
Sending a Datasource Query
8. Customizing the chart
Each chart has options including title, colours, line
thickness, backgroundfill, and so on that are customizable to
your needs.
Specify custom options for your chart by defining a JavaScript
object with option_name/option_value properties.
Every chart has its own list of options and a default value for the
option.
9. Draw the Chart
The final step is to draw the chart and for that you must first
instantiate an instance the chart followed by calling the draw().
The chart type is based on a class and the appropriate package of
the base class should have been included in the library. The
instance would look like:
var chart =
new google.visualization.Piechart(document.getElementById(‘c
hart_div’));
Data and the options for the chart should be prepared before the
chart is drawn. Along with this the <div> element of the HTML
page should also be ready to place the chart you are about to
draw.
13. Gauge Chart
Gauge chart(dial chart) reperesents one or more values as needles on
a circular or semi-circular surface. This is rendered using 'Gauge'
which is in the package 'gauge'.
new google.visualization.Gauge(document.getElementById('visualiz
ation')).
draw(data);
14. var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(3);
data.setValue(0, 0, 'Speed');
data.setValue(0, 1, 80);
data.setValue(1, 0, 'Petrol');
data.setValue(1, 1, 8);
data.setValue(2, 0, 'Temperature');
data.setValue(2, 1, 25);
15. Geo Chart
var chart = new
google.visualization.GeoChart(document.getElement
ById('chart_div'));
16. Table Chart
Boolean values are displayed as check marks.
var table = new
google.visualization.Table(document.getElementById('table_div'));
18. Tree Map Chart
Here each node can have zero or more children, and one parent (except for the
root, which has no parents). Each node is displayed as a rectangle, sized and
colored according to values that you assign. Sizes and colors are valued relative
to all other nodes in the graph. You can specify how many levels to display
simultaneously
19.
20. Combo Chart
var chart = new
google.visualization.ComboChart(document.getElementById('chart_div'));
21. Line Chart
var chart = new
google.visualization.LineChart(document.getElementById('chart
_div'));
28. Example 2:
function drawVisualization() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=0AsVUeZINdWEmdGl4R2dCMVhFbGhGWGxISEJB
RFBCNmc#gid=0');
query.setQuery('SELECT A,D WHERE D > 5000 ORDER BY A');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
visualization = new google.visualization.LineChart(document.getElementById('visualization'));
visualization.draw(data, {legend: 'bottom'});
}
30. Business Value Added
It’s a powerful Visualisation tool with Interactivity feature
which gives data a meaningful look and helps easy analysis of
the data.
It reduces time spent on analysis of big data tables by
converting these into easy to analyze charts
The charts are created in an easy to use URLs which can be
embedded anywhere in your webpage.
Managers and Decision makers have less time to look at big
data tables and do number crunching to come to decisions.
They need data visualisation tools like charts to have an overall
look at the data and compare them to arrive at decisions.