日期范围谷歌图表工具


Date Range Google Chart Tools

我正在尝试使用谷歌图表在折线图上显示数据。数据显示良好,但我想设置要显示的日期范围。

数据以JSON文本格式从数据库发送:

{
    "cols": [
                {"label": "Week", "type": "date"},
                {"label": "Speed", "type": "number"},               
                {"type":"string","p":{"role":"tooltip"}},   
                {"type":"string","p":{"role":"tooltip"}},   
                {"type":"string","p":{"role":"tooltip"}},   
                {"type":"string","p":{"role":"tooltip"}},   
            ],
    "rows": [
               {"c":[{"v": "Date('.$date.')"},{"v": null},{"v": null},{"v": null},{"v": null},{"v": null}]},
               {"c":[{"v": "Date('.$date.')"},{"v": null},{"v": null},{"v": null},{"v": null},{"v": null}]}
            ] 
}

数据按周或月显示(为了便于阅读,null),例如本周:

2012, 02, 06
2012, 02, 07
2012, 02, 09 

数据不是为一周中的每一天设置的,因此在本例中只显示上面的日期。我想展示的是一周的开始(201202/06)到一周的结束(201202/12),类似于这里的第三个例子。

我通过检查数据库中是否存在日期来显示整个星期,如果不追加额外的一行将使数据为空,这意味着这一行不连续,日期不按顺序排列。

有人能给我什么建议吗?我该怎么做?

谢谢!

您是否尝试将缺少的日期保留为缺少的日期(即,让数据库返回2个值而不是7个值)?

连续轴应该处理丢失的日期,您只需要设置从一周开始到结束的轴范围。

更新

对于交互式折线图,轴范围可以这样设置(受此线程启发):

hAxis: {...
        viewWindowMode: 'explicit',
        viewWindow: {min: new Date(2007,1,1),
                     max: new Date(2010,1,1)}
        ...}

参见http://jsfiddle.net/REgJu/

"我通过检查数据库中是否存在日期来显示整个星期,如果不添加额外的一行将使数据为空,这意味着这一行不是连续的,日期不按顺序排列。"

我认为你走在了正确的轨道上——你只需要用一种稍微不同的方式来做。我有下面这样的功能,使数据连续。

$data = array(
    1 => 50,
    2 => 75,
    4 => 65,
    7 => 60,
);
$dayAgoStart = 1;
$daysAgoEnd = 14;
$continuousData = array();
for($daysAgo=$daysAgoStart ; $daysAgo<=$daysAgoEnd ; $daysAgo++){
    if(array_key_exists($daysAgo, $data) == true){
        $continuousData[$daysAgo] = $data[$daysAgo];
    }
    else{
        $continuousData[$daysAgo] = 0;
    }
}

continuousData现在将保持:

$data = array(
    1 => 50,
    2 => 75,
    3 => 0,
    4 => 65,
    5 => 0,
    6 => 0,
    7 => 60,
    8 => 0,
    9 => 0,
    10 => 0,
    11 => 0,
    12 => 0,
    13 => 0,
    14 => 0,
);

按照这个顺序,然后数据就可以在图表中使用,没有任何间隙。

也许您可以使用不同的图表类型?Dygraph看起来可能会有所帮助。

否则,您可能需要编写自己的自定义图表类型。