标签: google-visualization

我有一个谷歌图表(使用谷歌可视化API,而不是谷歌图表API)填充页面加载.之后,用户可以从多个下拉菜单中选择选项.我希望用户能够根据他们的选择更新Google Chart.

我已经创建了PHP代码来通过MySQL获取新数据 - 在用户选择各种选项之后.

问题:我是否需要更换当前图表？或者我应该创建一个JavaScript函数来更新图表？

这是我的Google Chart JavaScript代码:

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Cluster');
  data.addColumn('number', 'Loans');
  data.addColumn('number', 'Lines');

/* create for loops to add as many columns as necessary */

var len = (encoded_cluster_name.length)-27; // encoded_line_volume.length;

  data.addRows(len);

for(i=0; i<len; i++) {

        var lines = (encoded_line_volume[i])/100000;
    var loans = (encoded_loan_volume[i])/100000;

data.setValue(i, 0, ' '+encoded_cluster_name[i]+' ');       /* x-axis */
data.setValue(i, 1, loans);             /* Y-axis category #1*/
data.setValue(i, 2, …

在发布新的geomap软件包版本后,我似乎在使用geomap进行德国地区时遇到了问题.在升级之前,一切似乎都很好.问题是,如果我试图展示DE-BE(柏林)和DE-BB(勃兰登堡)地区 - 柏林地区没有显示.如果我删除DE-BB区域,或者用其他任何德国区域替换它,例如,DE-BY(拜仁)它可以正常工作!

请在下面找到测试代码:

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

function drawVisualization() {
      var data = new google.visualization.DataTable();
      data.addRows(2);
      data.addColumn('string', 'Country');
      data.addColumn('number', 'Popularity');
      data.setValue(0, 0, 'DE-BE');
      data.setValue(0, 1, 200);
      data.setValue(1, 0, 'DE-BB');
      data.setValue(1, 1, 300);

      var geochart = new google.visualization.GeoMap(document.getElementById('visualization'));

      var options = {};
      options['dataMode'] = 'regions';
      options['region'] = 'DE';

      geochart.draw(data, options);
    }

google.setOnLoadCallback(drawVisualization);

你能否向我提供可能出错的任何支持或想法？是否可以包含旧版本的geomap软件包进行测试？

我正在写一张谷歌图表.它有堆叠的列.最重要的是,我想绘制2行,表示最小和最大允许值.

我想出的唯一解决方案是修改ComboCharts的第一个例子.我的结果如下:

这还不够.图形是可变的,因此如果仅显示1个Quartal,则该线将仅为点.我的问题是:

• 有没有办法进一步绘制线条,因此它会触及图形的左右边界？
• 我可以在图表中绘制标记线,而不是假装它是另一个数据点吗？

如果你愿意,你可以在这里摆弄一个ComboChart .

我正在使用谷歌的新材料栏图表显示带有chart.title和chart.subtitle选项的图形,但无法更改颜色.我想要实现的是

http://jsfiddle.net/8pjuz38c/1/

但最接近的是:

http://jsfiddle.net/8pjuz38c/5/

为什么颜色不适用于该系列？

如何使用C#创建google.visualization.datatable所期望的JSON源？显然使用这JavaScriptSerializer是不可能的,因为预期的JSON具有文档中描述的奇怪结构:

var dt = new google.visualization.DataTable(
     {
       cols: [{id: 'task', label: 'Task', type: 'string'},
                {id: 'hours', label: 'Hours per Day', type: 'number'}],
       rows: [{c:[{v: 'Work'}, {v: 11}]},
              {c:[{v: 'Eat'}, {v: 2}]},
              {c:[{v: 'Commute'}, {v: 2}]},
              {c:[{v: 'Watch TV'}, {v:2}]},
              {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}
             ]
     },
   0.6
)

我正在为客户开发一个网络应用程序,我想使用Google API来绘制一些漂亮的图表.

客户端有一些敏感数据,并提出了一些安全问题,特别是他们不希望他们的数据"转到谷歌".

有2个选项或API用于生成图表.图表API,您可以在其中构建网址并提交给Google,以便生成图形图像 - 显然客户数据会转到Google,因此此选项是否定的.

第二个选项是使用Visualization API.据我所知,生成可视化的代码是从谷歌下载的,但用于构建输出的数据永远不会离开浏览器,因此对于敏感数据使用是"安全的".这是准确的描述吗？

我查看了Google API文档以尝试回答我的问题,但似乎无法找到明确的答案.

请指教.

我使用Google Visualization API绘制折线图.以下是代码:

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
    // Total Coupon View
    var data_total_users = new google.visualization.DataTable();
    data_total_users.addColumn('string', 'Total Users');
    data_total_users.addColumn('number', 'User Count');

    data_total_users.addRows(7);
    data_total_users.setValue(0, 0, 'Sunday');
    data_total_users.setValue(0, 1, 10);
    data_total_users.setValue(1, 0, 'Monday');
    data_total_users.setValue(1, 1, 4);
    data_total_users.setValue(2, 0, 'Tuesday');
    data_total_users.setValue(2, 1, 3);
    data_total_users.setValue(3, 0, 'Wednesday');
    data_total_users.setValue(3, 1, 7);
    data_total_users.setValue(4, 0, 'Thursday');
    data_total_users.setValue(4, 1, 8);
    data_total_users.setValue(5, 0, 'Friday');
    data_total_users.setValue(5, 1, 10);
    data_total_users.setValue(6, 0, 'Saturday');
    data_total_users.setValue(6, 1, 10);
    var chart = new google.visualization.LineChart(document.getElementById('chart_users_total'));
    chart.draw(data_total_users, {width: 1000, height: 400, title: '', …

我想在我的Java EE应用程序中包含Google Visualization API的图表.但是,无论我做什么,应用程序都无法识别API.我以前用过这个,所以我不明白我做错了什么.有人可以看看我的代码并告诉我我做错了什么吗？谢谢!

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link type="text/css" href="LOCATION/STYLENAME.css" rel="stylesheet"/>

<script src="/tis/javascript/common/jquery.inlinemenu.js" type="text/javascript"></script>

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

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

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

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

        // Create the …

我正在使用谷歌图表google.load("可视化","1",{packages:["corechart"]});

但是在检查网络使用情况时,加载时间非常慢,我发现format + en,default,corechart.I.js需要大约6秒才能加载.任何减少这个时间的工作,为什么这个文件不被缓存,每次从谷歌再次获取.

我正在使用angular-google-chart创建一个面积图.我试图为特定区域显示不同的颜色.但是你可以看到红色和绿色线条(区域)的区域与蓝色区域重叠.配置有问题吗？

"data": {
    "cols": [{
        "id": "date",
        "label": "Date",
        "type": "string",
        "p": {}
    }, {
        "id": 'sd0',
        "label": 'sdo',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1',
        "label": 'sd1',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2',
        "label": 'sd2',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3',
        "label": 'sd3',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd1Neg',
        "label": 'sd1Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd2Neg',
        "label": 'sd2Neg',
        "type": "number",
        "p": {}
    }, {
        "id": 'sd3Neg',
        "label": 'sd3Neg',
        "type": …