Google Chart API学习(三)

书接上回：

maps-charts:

<html>

<head>

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

  <script type="text/javascript">

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

    google.setOnLoadCallback(drawMap);

    function drawMap () {

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

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

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

      data.addColumn('string', 'Marker')

      data.addRows([

        ['New York City NY, United States', 'New York',   'blue' ],

        ['Scranton PA, United States',      'Scranton',   'green'],

        ['Washington DC, United States',    'Washington', 'pink' ],

        ['Philadelphia PA, United States',  'Philly',     'green'],

        ['Pittsburgh PA, United States',    'Pittsburgh', 'green'],

        ['Buffalo NY, United States',       'Buffalo',    'blue' ],

        ['Baltimore MD, United States',     'Baltimore',  'pink' ],

        ['Albany NY, United States',        'Albany',     'blue' ],

        ['Allentown PA, United States',     'Allentown',  'green']

      ]);

      var url = 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {

        zoomLevel: 6,

        showTip: true,

        useMapTypeControl: true,

        icons: {

          blue: {

            normal:   url + 'Map-Marker-Ball-Azure-icon.png',

            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'

          },

          green: {

            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',

            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'

          },

          pink: {

            normal:   url + 'Map-Marker-Ball-Pink-icon.png',

            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'

          }

        }

      };

      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);

    }

  </script>

</head>

<body>

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

</body>

</html>

效果图：

org-charts:

<html>

  <head>

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

    <script type="text/javascript">

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

      google.setOnLoadCallback(drawChart);

      function drawChart() {

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

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

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

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

        data.addRows([

          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],

          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],

          ['Alice', 'Mike', ''],

          ['Bob', 'Jim', 'Bob Sponge'],

          ['Carol', 'Bob', '']

        ]);

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

        chart.draw(data, {allowHtml:true});

      }

   </script>

    </head>

  <body>

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

  </body>

</html>

效果图：

sankey-diagrams-charts:

<html>

  <head>

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

    <script type="text/javascript">

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

      google.setOnLoadCallback(drawChart);

      function drawChart() {

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

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

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

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

        data.addRows([

          [ 'A', 'X', 5 ],

          [ 'A', 'Y', 7 ],

          [ 'A', 'Z', 6 ],

          [ 'B', 'X', 2 ],

          [ 'B', 'Y', 9 ],

          [ 'B', 'Z', 4 ]

        ]);

        // Sets chart options.

        var options = {

          width: 600,

        };

        // Instantiates and draws our chart, passing in some options.

        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id="sankey_basic" style="width: 900px; height: 300px;"></div>

  </body>

</html>

效果图：

scatter-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');

      data.addColumn('number');

      var radius = 100;

      for (var i = 0; i < 6.28; i += 0.1) {

        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);

      }

      // Our central point, which will jiggle.

      data.addRow([0, 0]);

      var options = {

        legend: 'none',

        colors: ['#087037'],

        pointShape: 'star',

        pointSize: 18,

        animation: {

          duration: 200,

          easing: 'inAndOut',

        }

      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.

      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.

      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {

        var x = data.getValue(data.getNumberOfRows() - 1, 0);

        var y = data.getValue(data.getNumberOfRows() - 1, 1);

        x += 5 * (Math.random() - 0.5);

        y += 5 * (Math.random() - 0.5);

        if (x * x + y * y > radius * radius) {

          // Out of bounds. Bump toward center.

          x += Math.random() * ((x < 0) ? 5 : -5);

          y += Math.random() * ((y < 0) ? 5 : -5);

        }

        data.setValue(data.getNumberOfRows() - 1, 0, x);

        data.setValue(data.getNumberOfRows() - 1, 1, y);

        chart.draw(data, options);

      }

    }

  </script>

  </head>

  <body>

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

  </body>

</html>

效果图：

stepped-area-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([

          ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],

          ['Alfred Hitchcock (1935)', 8.4,         7.9],

          ['Ralph Thomas (1959)',     6.9,         6.5],

          ['Don Sharp (1978)',        6.5,         6.4],

          ['James Hawes (2008)',      4.4,         6.2]

        ]);

        var options = {

          title: 'The decline of \'The 39 Steps\'',

          vAxis: {title: 'Accumulated Rating'},

          isStacked: true

        };

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

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

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

  </body>

</html>

效果图：

table-charts:

<html>

  <head>

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

    <script type="text/javascript">

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

      google.setOnLoadCallback(drawTable);

      function drawTable() {

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

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

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

        data.addColumn('boolean', 'Full Time Employee');

        data.addRows([

          ['Mike',  {v: 10000, f: '$10,000'}, true],

          ['Jim',   {v:8000,   f: '$8,000'},  false],

          ['Alice', {v: 12500, f: '$12,500'}, true],

          ['Bob',   {v: 7000,  f: '$7,000'},  true]

        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});

      }

    </script>

  </head>

  <body>

    <div id="table_div"></div>

  </body>

</html>

效果图：

timelines-charts:

<html>

  <head>

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

    <script type="text/javascript">

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

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var container = document.getElementById('timeline');

        var chart = new google.visualization.Timeline(container);

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

        dataTable.addColumn({ type: 'string', id: 'President' });

        dataTable.addColumn({ type: 'date', id: 'Start' });

        dataTable.addColumn({ type: 'date', id: 'End' });

        dataTable.addRows([

          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],

          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],

          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);

      }

    </script>

  </head>

  <body>

    <div id="timeline" style="height: 180px;"></div>

  </body>

</html>

tree-map-charts:

<html>

  <head>

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

    <script type="text/javascript">

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

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],

          ['Global',    null,                 0,                               0],

          ['America',   'Global',             0,                               0],

          ['Europe',    'Global',             0,                               0],

          ['Asia',      'Global',             0,                               0],

          ['Australia', 'Global',             0,                               0],

          ['Africa',    'Global',             0,                               0],

          ['Brazil',    'America',            11,                              10],

          ['USA',       'America',            52,                              31],

          ['Mexico',    'America',            24,                              12],

          ['Canada',    'America',            16,                              -23],

          ['France',    'Europe',             42,                              -11],

          ['Germany',   'Europe',             31,                              -2],

          ['Sweden',    'Europe',             22,                              -13],

          ['Italy',     'Europe',             17,                              4],

          ['UK',        'Europe',             21,                              -5],

          ['China',     'Asia',               36,                              4],

          ['Japan',     'Asia',               20,                              -12],

          ['India',     'Asia',               40,                              63],

          ['Laos',      'Asia',               4,                               34],

          ['Mongolia',  'Asia',               1,                               -5],

          ['Israel',    'Asia',               12,                              24],

          ['Iran',      'Asia',               18,                              13],

          ['Pakistan',  'Asia',               11,                              -52],

          ['Egypt',     'Africa',             21,                              0],

          ['S. Africa', 'Africa',             30,                              43],

          ['Sudan',     'Africa',             12,                              2],

          ['Congo',     'Africa',             10,                              12],

          ['Zaire',     'Africa',             8,                               10]

        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {

          minColor: '#f00',

          midColor: '#ddd',

          maxColor: '#0d0',

          headerHeight: 15,

          fontColor: 'black',

          showScale: true

        });

      }

    </script>

  </head>

  <body>

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

  </body>

</html>

效果图：

trendlines-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([

     ['Age', 'Weight'],

     [ 8,      12],

     [ 4,      5.5],

     [ 11,     14],

     [ 4,      5],

     [ 3,      3.5],

     [ 6.5,    7]

   ]);

   var options = {

     title: 'Age vs. Weight comparison',

     legend: 'none',

     crosshair: { trigger: 'both', orientation: 'both' },

     trendlines: {

       0: {

         type: 'polynomial',

         degree: 3,

         visibleInLegend: true,

       }

     }

   };

   var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));

   chart.draw(data, options);

 }

 </script>

 </head>

 <body>

  <div id='polynomial2_div' style='width: 900px; height: 500px;'></div>

 </body>

</html>

效果图：

waterfall-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([

          ['Mon', 28, 28, 38, 38],

          ['Tue', 38, 38, 55, 55],

          ['Wed', 55, 55, 77, 77],

          ['Thu', 77, 77, 66, 66],

          ['Fri', 66, 66, 22, 22]

          // Treat the first row as data.

        ], true);

        var options = {

          legend: 'none',

          bar: { groupWidth: '100%' }, // Remove space between bars.

          candlestick: {

            fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red

            risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green

          }

        };

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

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

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

  </body>

</html>

效果图：

wordtrees-charts：

<html>

  <head>

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

    <script type="text/javascript">

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

      google.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable(

          [ ['Phrases'],

            ['cats are better than dogs'],

            ['cats eat kibble'],

            ['cats are better than hamsters'],

            ['cats are awesome'],

            ['cats are people too'],

            ['cats eat mice'],

            ['cats meowing'],

            ['cats in the cradle'],

            ['cats eat mice'],

            ['cats in the cradle lyrics'],

            ['cats eat kibble'],

            ['cats for adoption'],

            ['cats are family'],

            ['cats eat mice'],

            ['cats are better than kittens'],

            ['cats are evil'],

            ['cats are weird'],

            ['cats eat mice'],

          ]

        );

        var options = {

          wordtree: {

            format: 'implicit',

            word: 'cats'

          }

        };

        var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

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

  </body>

</html>

效果图：

miscellaneous-charts:

<html>

 <head>

  <script type="text/javascript"

        src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['gauge']}]}">

  </script>

  <script type="text/javascript">

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

  google.setOnLoadCallback(drawGauge);

  var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250,

    redFrom: 250, redTo: 280, minorTicks: 5};

  var gauge;

  function drawGauge() {

    gaugeData = new google.visualization.DataTable();

    gaugeData.addColumn('number', 'Engine');

    gaugeData.addColumn('number', 'Torpedo');

    gaugeData.addRows(2);

    gaugeData.setCell(0, 0, 120);

    gaugeData.setCell(0, 1, 80);

    gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));

    gauge.draw(gaugeData, gaugeOptions);

  }

  function changeTemp(dir) {

    gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);

    gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);

    gauge.draw(gaugeData, gaugeOptions);

  }

  </script>

 </head>

 <body>

  <div id="gauge_div" style="width:280px; height: 140px;"></div>

  <input type="button" value="Go Faster" onclick="changeTemp(1)" />

  <input type="button" value="Slow down" onclick="changeTemp(-1)" />

 </body>

</html>

效果图：

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

Google Map API 学习三
Google Chart API 参考中文版
Google Chart API 参考中文版文档信息翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...
使用Google Chart API绘制组合图
Google Chart API 绘图组合图作者:方倍工作室地址: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN& ...
使用google chart api生成报表图片
使用google chart api生成报表图片截图折线图饼图柱状图实现方法原理是调用google的报表服务,动态拼接url字符串,得到一张图片,数据和说明文字都是从url中传进去的. ...
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 ...
Google Map API学习1
这一段时间公司一个新产品上线, 做超市代购的这样,就需要计算每个门店也就是超市,距离小区之间的距离. 我们用的是Google Map 1.批量对地址进行编码,也就是将地址批量转化成对应的Goole ...
Java数据持久层框架 MyBatis之API学习三（XML 映射配置文件）
对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...

随机推荐

ADG备库中某个PDB缺失temp文件
之前认为缺失的temp文件在开库时会自动创建,但其实也有不能自动创建的场景,alert会有类似如下提示: 2023-05-11T20:35:35.974983+08:00 AWR(6):******* ...
穿透 SESSION 0 隔离
注:这套程序在这里只是作为了解,博主本人并未测试,所有测试均来自文章最底层链接的原文章. 查看目标进程运行的SESSION位置在实际开发过程中,可以通过Process Explorer 检查服务或程 ...
MySQL查询语句的执行顺序
一.编写查询SQL顺序 1.select 2.from 3.join on 4.where 5.group by 6.having 7.order by 8.limit 二.MySQL执行顺序 1.f ...
python 中异常类型总结
异常类型: 异常名称描述BaseException 所有异常的基类SystemExit 解释器请求退出KeyboardInterrupt ...
Oracle Linux6下安装Oracle 12c实战
经过N次安装尝试吐血总结,希望对大家有所帮助,同时做下记录备忘: 总结:安装前的准备工作是关键!!!Check and recheck! 参考:http://docs.oracle.com/cd/E1 ...
Layui项目实战干货总结（精品）
写代码时遇到的知识点拿出来分享. 1.layer弹出层显示在top顶层 // 监听工具条 table.on('tool(tb-book)', function (obj) { var data = o ...
Spring boot集成log4j2
spring boot默认使用的是logback作为日志框架,那如何使用log4j2呢?下面就给大家介绍一下集成步骤: 此处我使用的是spring boot 2.1.2 1.新建一个spring bo ...
golang获取windows版本和详细信息
场景: 将木马丢到感染机运行后回连时希望返回感染机的操作系统信息.golang 可以通过runtime.OS获取到操作系统类型,但是无法获取详细的版本信息,如win7 win10等, 解决方案; 下面 ...
gitlab/github 设置 SSH
最近项目要部署到另一台机器上,故要重新 git clone 一下一开始只是简单的设置 config 里的 user.name 和 user.email,以为就可以 clone(邮箱账户拥有项目的权限 ...
Programming Abstractions in C阅读笔记：p293-p302
<Programming Abstractions in C>学习第73天,p293-p302总结,总计10页. 一.技术总结 1.时间复杂度 (1)quadratic time(二次时间 ...

Google Chart API学习(三)

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

随机推荐

热门专题