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 ...

随机推荐

.NET Core开发实战（第17课：为选项数据添加验证：避免错误配置的应用接收用户流量）--学习笔记
17 | 为选项数据添加验证:避免错误配置的应用接收用户流量三种验证方法 1.直接注册验证函数 2.实现 IValidateOptions 3.使用 Microsoft.Extensions.Opt ...
CentOS7.6离线升级docker20
本周研发反馈系统升级失败,是因为docker版本太低,需要升级docker20.由于安装系统的服务器没有联网,所以无法在线升级.所以我找了一台联网的CentOS7.6的服务器,下载了docker20和 ...
Typora+PicGo+码云Gitee搭建本地博客环境
Typora+PicGo+码云Gitee搭建本地博客环境前期准备: 安装Typora 安装链接:https://typora.io/ 安装PicGo 安装链接:https://github.com/ ...
SSD接口与协议
该图来源于<Linux开源存储全栈详解:从Ceph到容器存储>- 2.3 存储接口协议的演变物理接口: 从物理形态上确定各种不同的接口(引脚形式等完全不同) 传输协议: 以SATA为例, ...
java 注解结合 spring aop 自动输出日志新增拦截器与过滤器
auto-log auto-log 是一款为 java 设计的自动日志监控框架. 前面已经写过了两篇: java 注解结合 spring aop 实现自动输出日志 java 注解结合 spring a ...
tensorflow中交叉熵损失函数详解
1 前言 tensorflow中定义了3个交叉熵损失函数: softmax_cross_entropy_with_logits(logits, labels) softmax_cross_entrop ...
UML类图入门实战
介绍 UML--Unified modeling language UML (统一建模语言),是一种用于软件系统分析和设计的语言工具,它用于帮助软件开发人员进行思考和记录思路的结果. UML 本身是一 ...
使用marquee标签实现文字滚动
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
马上就要元宵节了，这里给大家用css端上一碗汤圆
「更多福利资讯查看:2024 首次大厂挑战」. ` .... ` .bowl_wrap{ width: 200px; height: 220px; margin: 100px auto; positi ...
centos7 安装vmware tool 遇到遇到 kernel-headers 问题修复
安装 vmware tool 步骤 1. cp VMwareTools-10.3.25-20206839.tar.gz 到用户目录下 2. tar zxf VMwareTools-10.3.25-2 ...

Google Chart API学习(二)

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

随机推荐

热门专题