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

随机推荐

深入浅出Java多线程(八)：volatile
引言大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第八篇内容:volatile.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在当今的软件开发领域,多线程编程 ...
java中“0x”表示的含义
public static void main(String[] args) { int a = 0xff;//16进制默认是int int b = 0x000000ff; System.out.pr ...
ASP.NET Core分布式项目实战（oauth密码模式identity server4实现）--学习笔记
任务12:oauth密码模式identity server4实现密码模式比客户端模式更加严格,需要第三方输入用户名和密码之后才可以访问 API 在 IdentityServerCenter 的 Co ...
wmctf的题解&blindless&exit_hook
0x00 好久不见 2023.8.25 夜里 wmctf2023也是一个收获很大的比赛.只做了一个blindless,但是体会到了无泄露做出题来的奥妙.踩过的坑(学到的东西)包括但不限于调试要用do ...
NC15532 Happy Running
题目链接题目题目描述 Happy Running, an application for runners, is very popular in CHD. In order to lose wei ...
Kubernetes leader election 源码分析
0. 前言 Kubernetes:kube-scheduler 源码分析介绍了 kube-scheduler 调度 Pod 的逻辑.文中有一点未提的是,在 Kubernetes 集群中,kube-s ...
kafka学习笔记02-kafka消息存储
kafka消息存储 broker.topic.partition kafka 的数据分布是一个 3 级结构,依次为 broker.topic.partition. 也可以理解为数据库的分库分表,然后还 ...
CSDN的Markdown编辑器使用说明
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
springboot自动配置原理以及spring.factories文件的作用详解
一.springboot 自动配置原理先说说我们自己的应用程序中Bean加入容器的办法: package com.ynunicom.dc.dingdingcontractapp; import co ...
文心一言 VS 讯飞星火 VS chatgpt （202）-- 算法导论15.3 1题
一.对于矩阵链乘法问题,下面两种确定最优代价的方法哪种更高效?第一种方法是穷举所有可能的括号化方案,对每种方案计算乘法运算次数,第二种方法是运行RECURSIVE-MATRIX-CHAIN.证明你的结 ...

Google Chart API学习(二)

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

随机推荐

热门专题