Google Chart API学习(二)

书接上回：

combo-charts:

<html>

  <head>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});

      google.setOnLoadCallback(drawVisualization);

      function drawVisualization() {

        // Some raw data (not necessarily accurate)

        var data = google.visualization.arrayToDataTable([

         ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],

         ['2004/05',  165,      938,         522,             998,           450,      614.6],

         ['2005/06',  135,      1120,        599,             1268,          288,      682],

         ['2006/07',  157,      1167,        587,             807,           397,      623],

         ['2007/08',  139,      1110,        615,             968,           215,      609.4],

         ['2008/09',  136,      691,         629,             1026,          366,      569.6]

      ]);

    var options = {

      title : 'Monthly Coffee Production by Country',

      vAxis: {title: 'Cups'},

      hAxis: {title: 'Month'},

      seriesType: 'bars',

      series: {5: {type: 'line'}}

    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    chart.draw(data, options);

  }

    </script>

  </head>

  <body>

    <div id="chart_div" style="width: 900px; height: 500px;"></div>

  </body>

</html>

效果图：

diff-charts:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

  google.load("visualization", '1.1', {packages:['corechart']});

  google.setOnLoadCallback(drawChart);

  function drawChart() {

    var oldData = google.visualization.arrayToDataTable([

      ['Name', 'Popularity'],

      ['Cesar', 250],

      ['Rachel', 4200],

      ['Patrick', 2900],

      ['Eric', 8200]

    ]);

    var newData = google.visualization.arrayToDataTable([

      ['Name', 'Popularity'],

      ['Cesar', 370],

      ['Rachel', 600],

      ['Patrick', 700],

      ['Eric', 1500]

    ]);

    var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before'));

    var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after'));

    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));

    var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff'));

    var options = { legend: { position: 'top' } };

    colChartBefore.draw(oldData, options);

    colChartAfter.draw(newData, options);

    var diffData = colChartDiff.computeDiff(oldData, newData);

    colChartDiff.draw(diffData, options);

    barChartDiff.draw(diffData, options);

  }

</script>

<span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span>

<span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span>

<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>

<span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>

效果图：

gantt-charts:

<html>

<head>

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>

  <script type="text/javascript">

    google.load("visualization", "1.1", {packages:["gantt"]});

    google.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {

      return days * 24 * 60 * 60 * 1000;

    }

    function drawChart() {

      var data = new google.visualization.DataTable();

      data.addColumn('string', 'Task ID');

      data.addColumn('string', 'Task Name');

      data.addColumn('date', 'Start Date');

      data.addColumn('date', 'End Date');

      data.addColumn('number', 'Duration');

      data.addColumn('number', 'Percent Complete');

      data.addColumn('string', 'Dependencies');

      data.addRows([

        ['Research', 'Find sources',

         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],

        ['Write', 'Write paper',

         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],

        ['Cite', 'Create bibliography',

         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],

        ['Complete', 'Hand in paper',

         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],

        ['Outline', 'Outline paper',

         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']

      ]);

      var options = {

        height: 275

      };

      var chart = new google.visualization.GanttChart(document.getElementById('chart_div'));

      chart.draw(data, options);

    }

  </script>

</head>

<body>

  <div id="chart_div"></div>

</body>

</html>

效果图：

gauge-charts:

<html>

  <head>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load("visualization", "1", {packages:["gauge"]});

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Label', 'Value'],

          ['Memory', 80],

          ['CPU', 55],

          ['Network', 68]

        ]);

        var options = {

          width: 400, height: 120,

          redFrom: 90, redTo: 100,

          yellowFrom:75, yellowTo: 90,

          minorTicks: 5

        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {

          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));

          chart.draw(data, options);

        }, 13000);

        setInterval(function() {

          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));

          chart.draw(data, options);

        }, 5000);

        setInterval(function() {

          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));

          chart.draw(data, options);

        }, 26000);

      }

    </script>

  </head>

  <body>

    <div id="chart_div" style="width: 400px; height: 120px;"></div>

  </body>

</html>

效果图：

geo-charts:

<html>

  <head>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load("visualization", "1", {packages:["geochart"]});

      google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([

          ['Country', 'Popularity'],

          ['Germany', 200],

          ['United States', 300],

          ['Brazil', 400],

          ['Canada', 500],

          ['France', 600],

          ['RU', 700]

        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id="regions_div" style="width: 900px; height: 500px;"></div>

  </body>

</html>

效果图：

histograms-charts:

<html>

  <head>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Dinosaur', 'Length'],

          ['Acrocanthosaurus (top-spined lizard)', 12.2],

          ['Albertosaurus (Alberta lizard)', 9.1],

          ['Allosaurus (other lizard)', 12.2],

          ['Apatosaurus (deceptive lizard)', 22.9],

          ['Archaeopteryx (ancient wing)', 0.9],

          ['Argentinosaurus (Argentina lizard)', 36.6],

          ['Baryonyx (heavy claws)', 9.1],

          ['Brachiosaurus (arm lizard)', 30.5],

          ['Ceratosaurus (horned lizard)', 6.1],

          ['Coelophysis (hollow form)', 2.7],

          ['Compsognathus (elegant jaw)', 0.9],

          ['Deinonychus (terrible claw)', 2.7],

          ['Diplodocus (double beam)', 27.1],

          ['Dromicelomimus (emu mimic)', 3.4],

          ['Gallimimus (fowl mimic)', 5.5],

          ['Mamenchisaurus (Mamenchi lizard)', 21.0],

          ['Megalosaurus (big lizard)', 7.9],

          ['Microvenator (small hunter)', 1.2],

          ['Ornithomimus (bird mimic)', 4.6],

          ['Oviraptor (egg robber)', 1.5],

          ['Plateosaurus (flat lizard)', 7.9],

          ['Sauronithoides (narrow-clawed lizard)', 2.0],

          ['Seismosaurus (tremor lizard)', 45.7],

          ['Spinosaurus (spiny lizard)', 12.2],

          ['Supersaurus (super lizard)', 30.5],

          ['Tyrannosaurus (tyrant lizard)', 15.2],

          ['Ultrasaurus (ultra lizard)', 30.5],

          ['Velociraptor (swift robber)', 1.8]]);

        var options = {

          title: 'Lengths of dinosaurs, in meters',

          legend: { position: 'none' },

        };

        var chart = new google.visualization.Histogram(document.getElementById('chart_div'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id="chart_div" style="width: 900px; height: 500px;"></div>

  </body>

</html>

效果图：

interval-charts:

<html>

  <head>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();

        data.addColumn('number', 'x');

        data.addColumn('number', 'values');

        data.addColumn({id:'i0', type:'number', role:'interval'});

        data.addColumn({id:'i1', type:'number', role:'interval'});

        data.addColumn({id:'i2', type:'number', role:'interval'});

        data.addColumn({id:'i2', type:'number', role:'interval'});

        data.addColumn({id:'i2', type:'number', role:'interval'});

        data.addColumn({id:'i2', type:'number', role:'interval'});

        data.addRows([

            [1, 100, 90, 110, 85, 96, 104, 120],

            [2, 120, 95, 130, 90, 113, 124, 140],

            [3, 130, 105, 140, 100, 117, 133, 139],

            [4, 90, 85, 95, 85, 88, 92, 95],

            [5, 70, 74, 63, 67, 69, 70, 72],

            [6, 30, 39, 22, 21, 28, 34, 40],

            [7, 80, 77, 83, 70, 77, 85, 90],

            [8, 100, 90, 110, 85, 95, 102, 110]]);

        // The intervals data as narrow lines (useful for showing raw source data)

        var options_lines = {

            title: 'Line intervals, default',

            curveType: 'function',

            lineWidth: 4,

            intervals: { 'style':'line' },

            legend: 'none'

        };

        var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));

        chart_lines.draw(data, options_lines);

      }

    </script>

  </head>

  <body>

    <div id="chart_lines" style="width: 900px; height: 500px;"></div>

  </body>

</html>

效果图：

line-charts:

  <html>

  <head>

    <script type="text/javascript"

          src="https://www.google.com/jsapi?autoload={

            'modules':[{

              'name':'visualization',

              'version':'1',

              'packages':['corechart']

            }]

          }"></script>

    <script type="text/javascript">

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Year', 'Sales', 'Expenses'],

          ['2004',  1000,      400],

          ['2005',  1170,      460],

          ['2006',  660,       1120],

          ['2007',  1030,      540]

        ]);

        var options = {

          title: 'Company Performance',

          curveType: 'function',

          legend: { position: 'bottom' }

        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id="curve_chart" style="width: 900px; height: 500px"></div>

  </body>

</html>

效果图：

Google Chart API学习(二)的更多相关文章

利用 Google Chart API 生成二维码大小不一致
大小不一致是由于 chl 参数内容不一样导致的,而 chs 参数只能指定生成图片的大小,不能指定生成具体二维码大小. 比如:https://chart.googleapis.com/chart?ch ...
在云平台上基于Go语言+Google图表API提供二维码生成应用
二维码能够说已经深深的融入了我们的生活其中.到处可见它的身影:但通常我们都是去扫二维码, 曾经我们分享给朋友一个网址直接把Url发过去,如今我们能够把自己的信息生成二维码再分享给他人. 这里就分享一下 ...
使用Google Chart API绘制组合图
Google Chart API 绘图组合图作者:方倍工作室地址: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN& ...
Google Chart API 参考中文版
Google Chart API 参考中文版文档信息翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...
使用google chart api生成报表图片
使用google chart api生成报表图片截图折线图饼图柱状图实现方法原理是调用google的报表服务,动态拼接url字符串,得到一张图片,数据和说明文字都是从url中传进去的. ...
谷歌制图服务(Google Chart)接口生成二维码
Google公布了制图服务(Google Chart)的接口,这项服务用起来相当简单,只使用浏览器就可以用来为统计数据自动生成图片. 目前谷歌制图服务提供折线图.条状图.饼图.Venn图.散点图.二维 ...
google map api 学习笔记
(1)地图的缩放监听函数 google.maps.event.addlistener(map,"zoom_change",function(){ 缩放级别变化后的函数. }); ( ...
转载总结一些关于Google chart api的知识
<script type="text/javascript"> google.setOnLoadCallback(drawChartLine); f ...
Google Map API 学习六
今天其实收货很大的 1.new google.maps.Circle 就是如何在地图上标注一个圆 3.getAnimation 在这里是通过获取Marker是否存在动作,然后如果存在动作的话,就将动作 ...
Google Map API 学习五
今天其实收货很大的 1.InfoWindow google.maps.InfoWindow class An overlay that looks like a bubble and is often ...

随机推荐

Kubernetes:kube-scheduler 源码分析
0. 前言 [译] kubernetes:kube-scheduler 调度器代码结构概述介绍了 kube-scheduler 的代码结构.本文围绕代码结构,从源码角度出发,分析 kube-sche ...
SpringBoot自动化配置
SpringBoot自动化配置一.SpringBoot自动化配置原理 1.SpringBoot引导类注解介绍在SpringBoot的启动引导类上有一个@SpringBootApplication注 ...
实战视频所需要的IDE和工具软件的下载链接
以下是视频实战所需要的IDE和工具软件的下载链接: Visual Studio Code(适用于Windows.Mac和Linux):https://code.visualstudio.com/dow ...
MySQL8-[问题解决]java.sql.SQLNonTransientConnectionException: Cannot load connection class because of underlying
对应为MySQL8和 MySQL-connecter8.0.16 1.修改MySQL驱动器原来的版本: com.mysql.jdbc.Driver 现在改为:com.mysql.cj.jdbc.Dr ...
NC20313 [SDOI2008]仪仗队
题目链接题目题目描述作为体育委员,C君负责这次运动会仪仗队的训练. 仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队 ...
NC19885 [AHOI2009]CHESS 中国象棋
题目链接题目题目描述在N行M列的棋盘上,放若干个炮可以是0个,使得没有任何一个炮可以攻击另一个炮. 请问有多少种放置方法,中国像棋中炮的行走方式大家应该很清楚吧.一个炮要能攻击另一个炮他们必须要 ...
C 语言常用头文件解释
C系统提供了丰富的系统文件,称为库文件,整理一下以后好实用: <stdio.h> 定义了三个变量类型.一些宏和各种函数来执行输入和输出 https://www.runoob.com/cpr ...
使用JS访问本地数据库
1 前言有时候,数据业务比较大,比如查询百万级的数据,如果使用JSP查询数据库,JSP的返回结果一般放在域名后面返回给客户端,而返回结果的长度是有限制的,数据过长可能会丢失部分数据:另一方面数据量大 ...
记一次 .NET某列控连锁系统崩溃分析
一:背景 1. 讲故事过年喝了不少酒,脑子不灵光了,停了将近一个月没写博客,今天就当新年开工写一篇吧. 去年年初有位朋友找到我,说他们的系统会偶发性崩溃,在网上也发了不少帖子求助,没找到自己满意的答 ...
《系列二》-- 7、后置处理器-PostProcessor
目录什么是后置处理器 spring 源码中已知的,顶级PostProcessor 其它 "后置处理器" 阅读之前要注意的东西:本文就是主打流水账式的源码阅读,主导的是一个参考,主 ...

Google Chart API学习(二)

Google Chart API学习(二)的更多相关文章

随机推荐

热门专题