标签: google-visualization

我的目标是以有效的方式将时间戳从MySQL转换为JavaScript Date对象.这是我当前的片段,它将MySQL时间戳转换为PHP中的格式化日期:

<?php
// formats timestamp into following format: 2009, 7, 30
$date =  date("Y, n, j", strtotime($row["date"]));
?>

然后我$date使用Google的图表API 将此值用于图表,该API需要JavaScript Date对象:

data.setValue(<?=$count;?>, 0, new Date(<?=$date;?>));

问题是JavaScript Date对象以0开始月份索引,因此输出始终提前 1个月.处理这个问题最有效的方法是什么？

提前致谢!

我在Google Chart Tools上找到了以下JavaScript代码:

  function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows(4);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170); // sales for 2005
    data.setValue(1, 2, 460);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(2, 2, 580);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030);
    data.setValue(3, 2, 540);

    var chart = new google.visualization.ImageLineChart(document.getElementById('visualization'));
    chart.draw(data, {width: 500, height: 250, min: 0});
  }

如果我注释掉设置2005年销售额的代码行,则销售线将显示在从2006年开始到2007年结束的图表上.我期望看到从2004年(在Y = 1000)到2006年的销售线(在Y …

如何将垂直轴设置为显示百分比,例如25%,50%,75%,100%？

使用Perl脚本,我可以同时为20个或更多系列数据生成大量Google线图.

图例标签的形式为:迭代#counter附加的序列号.

不幸的是,从#10开始,这些计数器被切断了:

有没有办法阻止谷歌图表这样做？

我非常简单的图表代码如下:

    var data = { ...... };

    function drawCharts() {
            for (var csv in data) {
                    var x = new google.visualization.DataTable(data[csv]);

                    var options = {
                            title: csv,
                            width: 800,
                            height: 600
                    };

                    var chart = new google.visualization.LineChart(document.getElementById(csv));
                    chart.draw(x, options);
            }
    }

    $(function() {
            google.setOnLoadCallback(drawCharts);
    });

我使用Google的可视化图表API工具获得此柱形图.我怎么能这样做y轴数只是正整数？我试过查看文档,但似乎找不到任何东西.

有一些将Google图表整合为AngularJs指令的示例.

像这样:http://plnkr.co/edit/YzwjuU？p = preview

更新:我想避免在引导整个应用程序之前等待谷歌图表准备就绪(如上例所示):

 google.setOnLoadCallback(function() {
        angular.bootstrap(document.body, ['myApp']);
    });

有没有办法在单个模块中执行此操作而不是在整个应用程序中执行此操作？

更新2:我创建了我的plunker并且它无需等待回调即可工作,但我不确定它是否适用于所有情况.

http://plnkr.co/edit/7UUfcq4dD7nd4MylB4ni

我有一些数据,我试图使用Google Visualization API(Google Chart Tools)显示.我已经能够创建图表了,除了辅助Y轴应该显示为百分比而不是常规数字之外,它看起来很棒.这是我的代码和生成的图像.

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

function drawVisualization() {
    //Some raw data (not necessarily accurate)'
    var data = google.visualization.arrayToDataTable([
        ['AuditPeriod', 'Audit Count', 'Fail Percentage'],
        ['02-11-2012',  0,      0],
        ['02-18-2012',  0,      0],
        ['02-25-2012',  0,      0],
        ...
        ['07-21-2012',  1476,   .233062],
        ['07-28-2012',  1651,   .253180],
        ['08-04-2012',  2217,   .210645]
    ]);

    var options = {
        vAxis: [0: {format: '#,###'}, 1: {format: '#%'}],
        hAxis: { title: "Week", format: 'm/d/y'},
        series: {
            0:{ type: "bars", targetAxisIndex: 0 },
            1: { type: "line", targetAxisIndex: 1}
        }
    } …

我的Google图表设置为500px乘500px,但返回400px乘200px.我看了看div,它显示了500x500.我没有理由为什么图表会以400x200回归.div显示500x500,但SVG矩形框显示400x200,使所有图像变小.

有什么设置我不知道吗？

<div class="span5">
<div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div>
</div>
    <script type="text/javascript">
  var data, options, chart;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    data = google.visualization.arrayToDataTable([
      ['Qual', 'Stat'],
      ['Patient Satisfaction',     {{ $stats->attributes['sa_ptsatisfaction'] }}],
      ['Medical Knowledge',      {{ $stats->attributes['sa_medknowledge'] }}],
      ['ER Procedural Skills',  {{ $stats->attributes['sa_erprocskills'] }}],
      ['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
      ['Speed',    {{ $stats->attributes['sa_speed'] }}],
      ['Compassion',    {{ $stats->attributes['sa_compassion'] }}],
      ['EMR Utilization Skills',    {{ $stats->attributes['sa_emr'] }}],
      ['Profession Teamwork Skills',    {{ $stats->attributes['sa_proftmwrkskills'] }}]
    ]);

    options = {
      title: 'My Daily Activities'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
    }; …

我希望使用谷歌geochart包括巴基斯坦的所有省份.但只有3人被接走.我的代码是在脚本中设置各省的名称,然后各省应该被图书馆拿走.

var data = google.visualization.arrayToDataTable([
    ['Province'],
    ['Punjab'],
    ['Khyber Pakhtunkhwa'],
    ['Islamabad Capital Territory'],
    ['Federally Administered Tribal Areas'],
    ['Northern Areas'],
    ['Azad Kashmir'],
    ['Balochi']
]);

一种可能性是我拼错了区域,但似乎并不是这样.

 <!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="keywords"
          content="Houses Apartments, Vacation homes, Offices, Land, Flatmates,Paying Guest, Other real estate, Cars, Motorcycles, Accessories  parts, Trucks, Other vehicles, Home  Garden, Clothing, For Kids (Toys  Clothes), Jewelry  Watches, Hobbies, Sports  Bicycles, Movies, Books  Magazines, Pets, Tickets, Art  Collectibles, Music  Instruments, Computers  Accessories, TV, Audio, Video, Cameras, …

我想要格式化我的数据,用图标替换数字.

据我所知,Google目前没有格式化程序来执行此操作:

http://code.google.com/apis/chart/interactive/docs/reference.html#formatters

文档中有关于自定义格式化程序的简要提及,但我似乎无法找到有关如何开始编写自定义格式化程序的任何文档.

谁能指出我正确的方向？

StackOverflow上有一个类似的问题:为Google Charts Api编写自定义格式化程序.然而,问题只是使用内置格式化程序解决(我认为我不能使用).