标签: google-visualization

我正在尝试使用Google图表在电子邮件中嵌入图表图像.因此每个用户都将拥有一个独特的图表.

我们是否可以使用API​​并嵌入一个唯一的URL来呈现图表并将图像传送到电子邮件客户端.

我有一个看起来像这样的csv文件:

week,value1,value2
1,2,3
2,7,9

我想使用谷歌图表绘制它的叠加图(周是我的x(水平)值,值1和值2是两组y).不幸的是,我没有找到任何简单的方法.这可能与我在js中成为一个完整的菜鸟有关.

有没有简单的方法呢？

我在我的网站上有这个谷歌图表.它现在是一个Scatter图表,但我想要所有类型图表的解决方案.例如,如果您使用700像素宽的窗口加载网站,则图表尺寸无响应:图表太宽.以下是我正在使用的代码.

HTML:

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

CSS:

#chart_div {
    width:100%;
    height:20%;
}

JS:

var options = {
        title: 'Weight of pro surfer vs. Volume of his pro model',
        hAxis: {title: 'Weight (kg)', minValue: 53, maxValue: 100}, //55
        vAxis: {title: 'Volume (l)'}, //, minValue: 20, maxValue: 40},   //20
        legend: 'none',
           width: '100%',
            height: '100%',
           colors: ['#000000'],
           series: {
                  1: { color: '#06b4c8' }, 
              },
        legend: {position: 'top right', textStyle: {fontSize: 8}},
        chartArea: {width: '60%'},
           trendlines: { 0: {//type: 'exponential', …

我在带有Bootstrap选项卡的页面中使用了两个(或更多)Google图表.根据我的标签导航,图表会失去默认(？)大小的大小.Bellow是一个简化的测试用例,其中包含查看问题的步骤:

https://jsfiddle.net/73o0rfqe/

如何重现:

情况#1:

• 单击两个选项卡.仅在选项卡单击后,图表才会调整为实际大小.我正在寻找一种在页面加载后(在选项卡点击之前)渲染它的方法.

情况#2:

• 单击两个选项卡,单击TwoC选项卡,单击一个选项卡,单击两个选项卡,单击TwoA选项卡.现在图表失去了实际尺寸.单击一个选项卡,单击两个选项卡.现在,图表再次以实际尺寸呈现.

这部分代码:

$("a[href='#One']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
    clearChart();
}); 

我正在尝试这样做,但它没有像它应该的那样工作.任何帮助都会有所帮助.

PS.:任何有关优化此代码的建议都会有所帮助.谢谢.

我有一个页面,使用LineChart与ChartRangeFilter控件显示数据.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');

    for (var i = 0; i < 12; i++) {
        data.addRow([new Date(2016, i,1), Math.floor(Math.random() * 200), Math.floor(Math.random() * 200)]);
    }

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 600,
                    chartArea: {
                        width: '80%'
                    }
                }, …

我正在建立一个需要大量复杂多线图的网站.我看到两个最佳候选人

1. 海军报
2. 谷歌图表

有没有人对此决定有任何建议或偏好？

我正在使用Google Charts API创建学生考试成绩的图表.在X轴上,图表显示了一周中的几天.在Y轴上,图表显示学生参加考试的时间.(目标是让教师看看学生是否加快了速度).但是,我有一个问题:

我的数据采用timeofday格式,我使用Google Charts [HH,MM,SS,MSEC]格式为图表提供值作为持续时间.当图表呈现时,Y轴打印为"HH:MM:SS".我真的很喜欢自定义,因为秒是相当无用的,它看起来比我想要的更麻烦.

Charts API表示您可以为列指定"模式",并且我已指定"HH:MM".但是,这似乎根本没有生效.任何人都有在Google Charts格式化timeofday的经验并知道如何做到这一点？

我正在用java编写一个包含GUI的科学实验控制程序.

我帮助为此任务选择图表库.该程序将包含两种类型的图表:

1. 具有大量数据点的折线图(在每个图中10 ^ 4-10 ^ 5点的范围内),刷新率大约每0.5-1秒一次,因此性能是一个因素.此图表必须包含具有不同缩放比例的数据点集.

2. 没有许多数据点的散点图必须包含错误条,或某种方式指示点中的错误.优选地,在X轴和Y轴上,例如以十字线形式.

对数刻度也是必须的,一个好的缩放工具和导出工具也会很好.我更倾向于使用单个包可能的两个图表的解决方案.

从研究中我做了一个近乎完美的选择似乎是javaFX 2.0.从我读到的,它具有良好的性能,也看起来很棒,但我似乎找不到错误栏的选项.由于我根本不了解javaFX,扩展图表库以包含错误栏是多么简单,或者是否包含我未找到的包含此内容的开源添加？

另一种选择是Google图表库,它似乎具有所有必要的功能,但是我担心刷新率在第一种图表类型中会出现问题.这是一个可行的问题吗？

我使用过JFreeChart,但我对性能感到担忧,并且发现添加小的更改非常困难.这些包括在matlab创建图表后在运行时更改绘制点的颜色的方法.所有这些都需要大量额外的编码和时间消耗,我试图避免.

最实用的最后一个选项是JChart2D.它似乎拥有我需要的大多数功能,而我唯一的问题是它看起来不太好.

有人对我有任何建议吗？我计划在尽可能短的时间内对此进行编码,最糟糕的情况是我发现某些第三方软件包中的错误或我需要的选项不可用并且需要大量额外的代码,尽管它会是很高兴学到新东西.

这个决定当然可能影响我选择使用的整个GUI包,目前看来是Swing.

谢谢,

我有我的谷歌折线图,看起来像这样:

10|                        .
  |            .....----''' ''--.
09| .-----'''''                  ''-
  |                                 '.
08|                                   \
  |                                    '.
07|                                      '.
  |________________________________________________________
   2012/12/27 12:01    2012/12/26 12:22    2012/12/25 11:33

我希望它看起来像这样(注意X轴标签):

10|                        .
  |            .....----''' ''-.
09| .-----'''''                 \
  |                              '.
08|                                \
  |                                 '.
07|                                   '.
  |_______________________________________________
   2012/12/27          2012/12/26       2012/12/25
   12:01               12:22            11:33

我尝试添加<br>,\n和\r但没有运气.

我查看了文档,我找到的最接近的东西hAxis.maxTextLines是没有minTextLines选项,所以我无法弄清楚如何强制它.我怎样才能做到这一点？

通过链接到谷歌创建图表似乎是可能的.你只需要设置的chxt变量有额外的x值(但更多的X轴,你需要)chxt=y,x,x.然后对于每个x轴,设置chxl变量的标签.chxl=1:|2012/12/27|2012/12/26|2012/12/25|2:|12:01|12:22|11:33

例如:

http://chart.apis.google.com/chart?chxl=1:|2012/12/27|2012/12/26|2012/12/25|2:|12:01|12:22|11: 33反馈网站0,7,10&chxt = Y,X,X = CHS&360x240 CHT = BVG&CHCO = …

我见过很多其他人有同样的问题,但找不到答案.我有一个使用Google Maps Javascript api v3构建的简单地图.地图有一些标记,它们链接到信息窗以显示每个标记的特定信息.我想将一个谷歌图表添加到infowindow但是却无法弄清楚如何做到这一点.我经历了我能找到的每一个帖子(这里和其他论坛),我注意到其他人试图做类似的事情,但似乎没有具体的答案.我注意到人们使用融合表做这样的事情是成功的,但这不是我的情况,因为我从MySQL表加载数据.现在我有一个简单的地图,代码如下所示:

  function initialize() {

    var mapOptions = {
      center: new google.maps.LatLng(-33.837342,151.208954),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    var data = [
      ['Bondi Beach', -33.891044,151.275537],
      ['Cronulla Beach', -34.046544,151.159601],
    ];

    var myLatLng1 = new google.maps.LatLng(-33.891044,151.275537);
    var myLatLng2 = new google.maps.LatLng(-34.046544,151.159601);

    var marker1 = new google.maps.Marker({
        position: myLatLng1,
        map: map
    });

    var marker2 = new google.maps.Marker({
        position: myLatLng2,
        map: map
    });

    google.maps.event.addListener(marker1, 'click', function() {
      var infowindow1 = new google.maps.InfoWindow();
      infowindow1.setContent('Display the chart here'); …