标签: google-visualization

有没有办法在coldfusion中轻松地将cfquery输出转换为DataTable JSON格式？

我正在尝试使用Google Charts API生成图表,但我似乎无法获得所需格式的数据.

serializeJSON(data)在coldfusion中给了我JSON数据,但看起来这不是Charts API所期望的.我可以使用任何组件将其转换为所需的格式吗？

询问

<cfquery name="getAllUsers" datasource="cccac_swipe" result="UserDetailsResult">
Select login_mode,count(login_mode) as total from login_activity,ccac_registered_users where login_activity.student_id=ccac_registered_users.student_id GROUP BY login_mode
</cfquery>

Run Code Online (Sandbox Code Playgroud)

ColdFusion的JSON

{"COLUMNS":["LOGIN_MODE","TOTAL"],"DATA":[["manual",123],["swipe",20]]}

Run Code Online (Sandbox Code Playgroud)

预期的JSON

{ "cols": [ {"id":"","label":"SignIn Method","pattern":"","type":"string"}, {"id":"","label":"Count","pattern":"","type":"number"} ], "rows": [ {"c":[{"v":"manual","f":null},{"v":123,"f":null}]}, {"c":[{"v":"swipe","f":null},{"v":20,"f":null}]} ] }

Run Code Online (Sandbox Code Playgroud)

coldfusion google-visualization

Vai*_*esh

2013 01-23

2
推荐指数

1
解决办法

1798
查看次数

如何更改谷歌图表工具提示的弹出位置

我目前有启用html的工具提示,也显示"子图".但是,如果可以将所有工具提示弹出到固定位置或者具有调整其相对位置的偏移量,那将是很好的.

在此输入图像描述

这是我有一种工具提示的例子(空白数据).我想把它移到右边.任何建议将不胜感激,包括任何javascript技巧.

html javascript google-visualization

Red*_*ift

lucky-day

2
推荐指数

2
解决办法

9042
查看次数

如何隐藏谷歌地理标志中的工具提示标题(并在工具提示中显示其他信息)

问题:如果您在Google地理标记中启用工具提示,则无法更改工具提示标题,这是您传递给Google图表绘制方法的第一列.

javascript google-maps google-api tooltip google-visualization

Mat*_*nta

lucky-day

2
推荐指数

1
解决办法

1592
查看次数

将仪表板中的谷歌图表导出为png

我试图通过一个按钮将仪表板中的谷歌图表导出到png图像.但我得到以下错误 -

一个或多个参与者未能绘制()undefined不是一个函数

这是代码:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.load('visualization', '1.0', {'packages':['controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = …

Run Code Online (Sandbox Code Playgroud)

charts dashboard google-visualization

use*_*703

lucky-day

2
推荐指数

1
解决办法

7421
查看次数

谷歌图表改变背景颜色

我在StackOverflow上看到了之前的一些问题/答案,但这些答案中提供的代码似乎都不适用于我的图表:这是我的代码:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1.1", {packages:["bar"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Sales', 'Expenses'],
      ['January', 200, 150],
      ['February', 1170, 460],
      ['March', 660, 1120],
      ['April', 1030, 540],
      ['May', 1030, 540],
      ['June', 1030, 540]
    ]);

    var options = {

          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: May-August',
            backgroundColor: '#fcfcfc',
          }

    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, options);
  }
</script>

Run Code Online (Sandbox Code Playgroud)

html div代码:

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

Run Code Online (Sandbox Code Playgroud)

问题是我想将背景从白色变为浅灰色,我似乎无法通过声明backgroundColor使其工作:"#fcfcfc"在options {}中

有没有其他方法来声明该图表上的背景颜色我想也许我正在使用的图表类型不能改变它的背景颜色.

我还尝试将backgroundColor变量指定为一个函数(后跟大括号backgroundColor {color:'#fcfcfc'},但这在我的图表上也不起作用. …

charts background google-visualization background-color

use*_*772

2015 06-23

2
推荐指数

1
解决办法

6405
查看次数

Google甘特图

我正在使用Google提供的甘特图。

当我单击任何元素或实体以尝试返回行/列数据时，我已经添加了一个侦听器，但是它返回的是空的，

    function selectHandler() {
        var selectedItem = chart.getSelection();
        if (selectedItem) {
            console.log(selectedItem);
        }
    }

    google.visualization.events.addListener(chart, 'select', selectHandler);

Run Code Online (Sandbox Code Playgroud)

这是我对jsfiddle的尝试：https ://jsfiddle.net/30cuaarb/

javascript gantt-chart google-visualization

Anr*_*iki

lucky-day

2
推荐指数

1
解决办法

2016
查看次数

在Google Chart Sankey Diagram上显示文本

我正在使用Google Chart- Sankey Diagram。我想使权重显示在每个流上，而无需将鼠标悬停在上面。

对于以下官方示例（jsfiddle）：

  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 …

Run Code Online (Sandbox Code Playgroud)

javascript data-visualization google-visualization sankey-diagram

Vec*_*iao

2017 05-23

2
推荐指数

1
解决办法

2890
查看次数

在Google图表中使用Datetime作为X轴上的值

我在MySQL表中使用比特币价格数据和日期时间.由于一些奇怪的原因,它为每个x值设置相同的日期,并且y值是倾斜的并且看起来不合规定.最近的Y值应该是当前价格.这是我用来创建图表的代码:

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Price');
  data.addColumn('datetime', 'Date');
  var dateArr2 = (<?php echo json_encode($dateArr); ?>).reverse();
    for (i = 0; i < dateArr2.length; i++) {
        dateArr2[i] = dateArr2[i].split(/[- :]/);
      }
  var bitcoinArr = (<?php echo json_encode($bitcoinPriceArr); ?>).reverse();
  console.log(bitcoinArr[0]);
  var length = Math.min(dateArr2.length, bitcoinArr.length);
  var rows = [];
  for (var i = 0; i < length; ++i) {
   rows.push([bitcoinArr[i], new Date(dateArr2[i])]);
  }
    data.addRows(rows);

Run Code Online (Sandbox Code Playgroud)

我认为图表上只使用了一个日期的原因与我在PHP中如何使用javascript数组dateArr2有关.

javascript php datetime google-visualization

Dar*_*tar

2016 01-17

2
推荐指数

1
解决办法

793
查看次数

Google条形图无法更改单个条形图颜色

我使用Google Visualization API创建了一个谷歌条形图,我正在尝试添加一个用于样式的列.下面是我的实现,使用.addcolumn(),然后将颜色字段添加到每一行,但每个条仍然是默认的蓝色.

<script type="text/javascript">
// Runs onload to build the first default chart and load the bar chart package
var jsonCoachCount;
window.onload = function(){
    jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"},  {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"Learn@UW"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]');

// Load the Visualization API and the barchart package.
    google.charts.load('current', {'packages': ['bar']});
// Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

};
function drawChart(){

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

    servicesData.addColumn('string', 'Service');
    servicesData.addColumn('number', 'Number of Coaches');
    servicesData.addColumn({type:'string', role:'style'});

    for(i = 0; i …

Run Code Online (Sandbox Code Playgroud)

javascript charts google-visualization bar-chart

cha*_*hak

2017 09-03

2
推荐指数

1
解决办法

1334
查看次数

谷歌甘特图高度检测

我面临的情况是谷歌甘特图不能(？)正确渲染高度,因此在低分辨率下我无法看到图表中的所有数据,因为它没有显示垂直滚动条.

代码示例

用浏览器最大化打开它(根据您的分辨率,您将看到完整的行)

在浏览器调整大小,打开它时,您会看到图表不会生成滚动条但会剪切线条.

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task ID');
    data.addColumn('string', 'Task Name');
    data.addColumn('string', 'Resource');
    data.addColumn('date', 'Start Date');
    data.addColumn('date', 'End Date');
    data.addColumn('number', 'Duration');
    data.addColumn('number', 'Percent done');
    data.addColumn('string', 'Dependencies');

    data.addRows([

    ['C300300 (M, AeX)', 'C300300 (M, AeX)', 'DD', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 117.96, null],
    ['C671925 (M, XeR)', 'C671925 (M, XeR)', 'DD', new Date(2016, 2, 16), new Date(2016, 11, 16), null, 106.55, null],
    ['C769868 (M, YeB)', 'C769868 (M, YeB)', 'DD', new Date(2016, 5, …

Run Code Online (Sandbox Code Playgroud)

javascript charts google-visualization

Khr*_*rys

2017 01-04

2
推荐指数

1
解决办法

770
查看次数