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

随机推荐

Docker从认识到实践再到底层原理（二-1）｜容器技术发展史+虚拟化容器概念和简介
前言那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总然后就是博主最近最花时间的一 ...
Google全球分布式数据库：Spanner
2012年的OSDI上google发布了Spanner数据库.个人认为Spanner对于版本控制,事务外部一致性的处理,使用TrueTime + Timestamp进行全球备份同步的实现都比较值得一看 ...
吉特日化MES 与周边系统集成架构
作者:情缘出处:http://www.cnblogs.com/qingyuan/ 关于作者:从事仓库,生产软件方面的开发,在项目管理以及企业经营方面寻求发展之路版权声明:本文版权归作者和博客园 ...
惠普CP1025 因转印离合器导致打印不全大片空白的问题
问题症状自检只打印出一部分, 后面大部分都是空白. 如果是碳盒缺粉, 应该是均匀地浅或者空白, 如果是成像鼓的问题, 应该是从上到下成条状的不均匀, 这样显示一节后空白的情况是没见过, 上网查有类似 ...
ultraISO方式制作win10安装U盘
说明最近帮朋友安装下win10,用了2种制作U盘启动盘的方式.记录一下也方便大家少走弯路. 准备的工具: 1.utralISO(软通牒) 2.win10镜像 3.16GB U盘,U盘容量 > ...
之前练手使用基于gin的go web项目
目录结构: `-- demo |-- cmd | |-- api.go | `-- root.go |-- common | `-- consts | `-- consts.go |-- config ...
gitlab/github 设置 SSH
最近项目要部署到另一台机器上,故要重新 git clone 一下一开始只是简单的设置 config 里的 user.name 和 user.email,以为就可以 clone(邮箱账户拥有项目的权限 ...
QT 无法识别某些字体导致程序启动失败
有用户反馈启动程序时,没有出现 UI 界面,程序跟 "闪退了一样",查看日志,没有发现闪退或者报错异常,后面远程用户电脑并尝试解决研究分析:在用户电脑上运行 debug 包,会出 ...
GDI实现透明菜单位图
case WM_CONTEXTMENU: { m_hMenu = CreatePopupMenu(); g_BitMap = (HBITMAP)LoadImage(NULL, L"1.bmp ...
C++ 析构函数的调用顺序
如果指针指向基类,但是指针在运行时指向派生类,则该基类必须具有虚拟析构函数,以便破坏派生类.如果没有虚拟析构函数,则只会运行基类的析构函数. 比如: Base* basePtr; basePtr = ...

Google Chart API学习(二)

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

随机推荐

热门专题