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

随机推荐

ProTab（高级表格）的使用
一. params 和 request 属性的使用例子如下: import React, { useState } from 'react'; import { ProTable } from '@ ...
宝塔 websocket连接wss配置
https要使用wss连接,wss://xxxxx.com/wss 就转发到了服务器内的127.0.0.1:2346服务. 具体转发可以放在文件配置或者伪静态里面建议放在伪静态里面容易管理 n ...
数学问题，2的n次方 - 1 是怎么来的？通常用作计算数值
MySQL-生成随机数字、字符串、日期、验证码及 UUID的方法
一.生成随机数字 1. 生成 0 到 1 之间的随机数 MySQL 中的 RAND 函数可以用于生成一个大于等于 0 小于 1 的随机数字.例如: SELECT rand(); 该函数返回的数据类型为 ...
Apache Hudi 设计与架构解读
1. 简介 Apache Hudi(简称:Hudi)允许您在现有的hadoop兼容存储之上存储大量数据,同时提供两种原语,使得除了经典的批处理之外,还可以在数据湖上进行流处理. 这两种原语分别是: 1 ...
.NET开源的一个小而快并且功能强大的 Windows 动态桌面软件 - DreamScene2
前言很多同学都不愿给电脑设动态壁纸,其中有个重要原因就是嫌它占资源过多.今天大姚分享一个.NET开源.免费(MIT license)的一个小而快并且功能强大的 Windows 动态桌面软件,支持视频 ...
MYSQL 3 DAY
目录 MySQL day03 1.约束 1.1.唯一性约束(unique) 1.2.主键约束 1.3.外键约束 2.存储引擎?(整个内容属于了解内容) 2.1.完整的建表语句 2.2.什么是存储引擎呢 ...
从零开始的react入门教程（十一），react ref 详解，三种写法与 ref 转发（传递）
壹 ❀ 引在前面的文章中,我们介绍了react的状态提升,随之引出了redux以及context,其实都说到底都是为了方便管理react的状态,让数据交互与组件通信变得更为简单.我们知道,react ...
NC53079 Forsaken喜欢数论
题目链接题目题目描述 Forsaken有一个有趣的数论函数.对于任意一个数 \(x\) , \(f(x)\) 会返回 \(x\) 的最小质因子.如果这个数没有最小质因子,那么就返回0. 现 ...
NC24158 [USACO 2015 Jan G]Moovie Mooving
题目链接题目题目描述 Bessie is out at the movies. Being mischievous as always, she has decided to hide from ...

Google Chart API学习(二)

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

随机推荐

热门专题