标签: google-visualization

我想在我的phonegap应用程序中添加图表.我已经测试了谷歌图表图像的手机屏幕,你通过一个带有正确参数的胖网页,它用图表重新调整了一个png图像,并且它很好.

现在我想尝试使用谷歌图表工具API,因为它提供了更多的用户交互性.我已经在非移动网络应用程序中进行了测试并且它可以工作,但是当我尝试在一个phonegap项目中使用它时,我得到的是一个带有此文本的黑屏:"Hello World,ChartsActivity!"

有没有人有一个如何在电话空白项目中集成谷歌图表的例子？

提前致谢

在旧的Google Chart API中,可以使用PHP来呈现图表,甚至还有一个包装器可以执行此操作:http: //code.google.com/p/gchartphp/

但是使用新的Chart API http://code.google.com/apis/chart/ 可以生成更多更漂亮的图表,但只能在浏览器中加载javascript.

我想要实现的效果是通过AJAX向服务器提交多项选择表单,让PHP更新数据库服务器,然后返回更新的图表.

在旧的API方式中,我可以做到这一点.但是以新的方式,我将javascript返回到浏览器并将其附加到文档以呈现图表.它不会因此而执行.我相信我可以eval()这个javascript,但这是不好的形式不是因为有人可以做一些讨厌的东西,他们不能 - eval()服务器端响应？

我怎么能克服这个？有没有PHP包装器来帮助这个？还是有另一个我忽略的原因？

非常感谢

我有一个非常简单的功能来从谷歌图表API生成QR码.

 function o99_qr_code($size,$type,$url ) {

        $qr = '';
        $dsize = $size .'x'.$size; // doubleSize

         $qr = '<img src="http://chart.apis.google.com/chart?cht=qr&chs=' . $dsize . '&chld=L|0&chl=' . $url . '" width="' .$size .'" height="'.$size .'" alt="QR code" title="QR Code for your mobile device"/>';

         switch ($type){
         case 'echo' :
         echo $qr;
         case 'return' :
         return $qr;
         }
    }

现在,除了保证金之外,这项工作正常.

(为不链接实时URL而道歉 - 我的DEV在localmachine上)

Whatver我尝试,我不能得到的保证金去0.首先我认为,出于某种原因,也许校正电L不接受0利润-我累了&chld=M|1和&chld=L|0和&chld=M|3,甚至试图改变参数的顺序和放到&chld=L|0字符串的末尾或完全省略它.

但由于某种原因,我总是得到4的默认保证金.

难道我做错了什么 ？？

编辑I - URL请求后:生成的URL为:

<img src="http://chart.apis.google.com/chart?cht=qr&chs=50x50&chld=L|0&chl=http://localhost/wp-sandbox/?p=6164" width="50" height="50" alt="QR code" title="QR code …

我像这样使用Google Visualization的ColumnChart制作了一个图表。

它基本上是使用3 x 7矩阵的堆积式柱形图。在每个栏中，我都删除了另外两行的数据。我的问题是如何使黄色条（或其他条）看起来像从一开始就使用Javascript代码被单击。就像下面一样。

*请注意黄色栏中的浅色边框。

我需要在指定区域的Google折线图中水平填充背景色。我看了所有的api，但没有找到解决方案。Google图片图表（我认为它已被弃用）具有某些属性，但是我正在使用交互式图表。我只是附上我真正想要的图像。

请帮忙。

我正在尝试使用google可视化API生成带注释的LineChart,虽然我有它工作,但我希望能够在可能的情况下让注释包含换行符.不幸的是,Google的API似乎忽略了任何换行信息并在一行中显示所有内容.有没有人想出办法解决这个问题？

这是一个例子:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Sales');
data.addColumn({type:'string', role:'annotation'});
data.addColumn({type:'string', role:'annotationText'});
data.addRows([
    ['April',1000, 'A', "Stolen data\nSo-so month"],
    ['May',  1170, 'B', "Coffee spill\nAnother line\nA third line"],
    ['June',  660, 'C', "Wumpus attack"]
]);

我试过了\n, \\n, and <br />,那些都没用.

该代码创建了包含2列的Google Charts条形图.

<?php
$sth = mysql_query("select * from table");
$rows = array();
//flag is not needed
$flag = true;
$table = array();
$table['cols'] = array(
                array('label' => 'Stats', 'type' => 'string'),
                array('label' => 'Value', 'type' => 'number')
                );
$rows = array();
while($r = mysql_fetch_assoc($sth)) 
{
$temp = array();
$temp[] = array('v' => (string) $r['Stats']); 
$temp[] = array('v' => (int) $r['Value']); 
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>  
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function …

我有一个Google Diff条形图.我想改变外部酒吧的颜色.默认情况下,它是褪色的颜色.我可以使用选项下的颜色参数更改内部条形颜色.有人可以指导我吗？这是我的代码如下.

<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', 3500]
]);
var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
var options = { 
diff: { newData: { widthFactor: 0.6 } },
legend: { position: 'top' } ,
colors: ['#f38eff', '#C0C0C0'],
backgroundColor: '#fffff5',
hAxis: {title: 'People'},
  vAxis: {title: 'Numbers'}};
var diffData …

我已经使用谷歌图表很长一段时间了.昨天我尝试在我的网页上添加一个组合图表,这导致cannot read property 'count' of undefined了谷歌Chrome和b is undefinedFirefox.我一直试图解决这个问题,但直到现在还没有成功.我读到它可能是原型的原因,但其他图表仍然正常.以下是jsfiddle 上此问题的示例.

码:

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

  <div id="combochart2.1" style="width: 900px; height: 500px;"></div>

  <script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});

  google.setOnLoadCallback(drawChart1);

  function drawChart1() {
    var data = new google.visualization.DataTable();
    var cols = 5 ; 
    var rows = 4;
    var cell_values = new Array();
    var col_header=new Array();
    var text=new Array();
    data.addColumn('string', 'Questions');

   col_header= "apples, orange, pineapple, rocket, spaceship".split(",");
   cell_values= "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20".split(",");
   text= "Q1,Q2,Q3,Q4".split(",");

   for (var k=0;k<cols;k++)
   {
    data.addColumn('number',col_header[k]);
    }

  // Add empty …

我正在使用dragToZoom资源管理器功能为我的折线图添加缩放功能.

explorer: { 
    actions: ['dragToZoom', 'rightClickToReset'],
    axis: 'horizontal',
    keepInBounds: true,
    maxZoomIn: 4.0
}

这里的小提琴示例.

我还想添加一个自定义缩放,用户可以选择开始日期,图表将缩放到期间[开始日期; 当前的日期].

我看到Annotation Charts提供了一个setVisibleChartRange(start, end)可以做到的方法.但是,我在我的应用程序上尝试了它们,它们不像Line Charts那样令人愉悦和可定制(传说,边框等).

有没有办法改变折线图上的可见范围？