使用Google Charts和SteppedAreaChart绘制值历史记录 [英] Drawing value history using Google Charts and SteppedAreaChart

问题描述

我正在从数据库中绘制值历史记录。基本上每次价值变化时，触发器都会保存旧值，新值以及所述更改的日期和时间。

在Web应用程序中，我需要将可视化变化。
由于数值不会逐渐变化，我决定使用步进式的面积图。

样本输入：

  DateTime |价值
 2017-03-14 22:50 | 14 
 2017-03-14 22:55 | 16 
 2017-03-14 23:00 | 10 
  

问题是Google Charts绘制它的值是14直到22:50，直到16 22:55和10点至23:00。我显然需要相反的。除了在时间间隔之前呈现值之外，我需要在所述DateTime处开始行并继续，直到值发生变化。

现在我使用折线图来呈现它，因为它确实是我所需要的。就绘制它们所属的点而言。连接线只是没有意义，但它是尽可能接近。

有没有这样做的黑客方式？我基本上需要改变渲染模式

 折线图：
 /''\ __ / \_ 
 01 0 10 
当前阶梯面积图行为：
███▄▄▄█▄▄
 01 0 10 
所需形状：
████ ▄▄▄█▄
 01 0 10 
（空格表示当时价值没有变化）
  

任何非破解方式都可以做到这一点？ 可以设置为获得所需的图表

这一切归结为提供给图表的数据

需要为每个 change

插入一个新行

新行需要下一个x值和前一个y值

样本输入：

  DateTime |价值
 2017-03-14 22:50 | 14 
 2017-03-14 22:55 | 14 
 2017-03-14 22:55 | 16 
 2017-03-14 23:00 | 16 
 2017-03-14 23:00 | 10 
 2017-03-14 23:05 | 10 
  

最后一个新行是可选的，但有助于可视化

你可以联合一对sql语句从数据库中提取数据，

但使用两个google数据表可能会更容易

>

请参阅以下工作片段...

  google.charts.load（'current'，{callback：drawChart，packages：['corechart']}）; function drawChart（）{var chart = new google.visualization.AreaChart（document.getElementById（'chart_div ））; var data = new google.visualization.DataTable（）; data.addColumn（'date'，'x'）; data.addColumn（'number'，'y'）; var newData = data.clone（）; data.addRow（[new Date（'2017-03-14 22:50'），14]）; data.addRow（[new Date（'2017-03-14 22:55'），16]）; data.addRow（[new Date（'2017-03-14 23:00'），10]）; hTicks = []; for（var i = 0; i  0）{newData.addRow（[data.getValue（i，0），data.getValue（i  -  1，1 ）]）; } newData.addRow（[data.getValue（i，0），data.getValue（i，1）]）; hTicks.push（data.getValue（i，0））; } newData.addRow（[new Date（data.getValue（data.getNumberOfRows（） -  1,0）.getTime（）+（1000 * 60 * 5）），data.getValue（data.getNumberOfRows（） -  1,1 ）]）; window.addEventListener（'resize'，drawChart，false）; drawChart（）;函数drawChart（）{chart.draw（newData，{chartArea：{bottom：60}，hAxis：{format：'yy-MM-dd hh：mm：ss'，ticks：hTicks}，vAxis：{viewWindow：{min ：0}}，height：400}）; }}  

< script src =https：// www.gstatic.com/charts/loader.js\"></script><div id =chart_div>< / div>

I am drawing value history from the database. Basically every time the value changes, trigger saves the old value, new value as well as date and time of said change.

In a web app, I need to visualize said changes. Since the values do not gradually change, I decided to use stepped area chart.

sample input:

DateTime         | Value
2017-03-14 22:50 | 14
2017-03-14 22:55 | 16
2017-03-14 23:00 | 10

The problem is that Google Charts draw it like the value is 14 until 22:50, 16 until 22:55 and 10 until 23:00. I obviously need the opposite. Instead of rendering the value UNTIL the interval, I need the line to START at said DateTime and continue until the value changes.

Right now I'm using line chart to render it, because it does exatly what I need. Well as far as plotting the points where they belong. The connecting line just doesn't make sense but it's as close as I can get.

Is there a non-hack way of doing so? I basically need to change rendering mode

line chart:
/''\__/\_
01  0  10
current stepped area chart behavior:
███▄▄▄█▄▄
01  0  10
desired shape:
▄███▄▄▄█▄
01  0  10
(spaces mean there was no change in value at that time)

Any non-hack way of doing that?

解决方案

there aren't any standard options you can set to get the desired chart

it all boils down to the data fed to the chart

you'll need to insert a new row for each change

the new row will need the next x value and the previous y value

sample input:

DateTime         | Value
2017-03-14 22:50 | 14
2017-03-14 22:55 | 14
2017-03-14 22:55 | 16
2017-03-14 23:00 | 16
2017-03-14 23:00 | 10
2017-03-14 23:05 | 10

the last "new row" is optional, but helps with the visualization

you could union a couple sql statements to pull from the database,

but using two google data tables would probably be easier

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y');

  var newData = data.clone();

  data.addRow([new Date('2017-03-14 22:50'), 14]);
  data.addRow([new Date('2017-03-14 22:55'), 16]);
  data.addRow([new Date('2017-03-14 23:00'), 10]);

  hTicks = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    if (i > 0) {
      newData.addRow([
        data.getValue(i, 0),
        data.getValue(i - 1, 1)
      ]);
    }
    newData.addRow([
      data.getValue(i, 0),
      data.getValue(i, 1)
    ]);
    hTicks.push(data.getValue(i, 0));
  }
  newData.addRow([
    new Date(data.getValue(data.getNumberOfRows() - 1, 0).getTime() + (1000 * 60 * 5)),
    data.getValue(data.getNumberOfRows() - 1, 1)
  ]);

  window.addEventListener('resize', drawChart, false);
  drawChart();

  function drawChart() {
    chart.draw(newData, {
      chartArea: {
        bottom: 60
      },
      hAxis: {
        format: 'yy-MM-dd hh:mm:ss',
        ticks: hTicks
      },
      vAxis: {
        viewWindow: {
          min: 0
        }
      },
      height: 400
    });
  }
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

这篇关于使用Google Charts和SteppedAreaChart绘制值历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！