Date Range Google Chart Tools

Question

I'm trying to display data on a line graph using Google Charts. The data displays fine, however I would like to set a date range to be displayed.

The data is sent from the database in a JSON literal format:

{
    "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}]}
            ] 
}

Data is either displayed by week or month (null for easy reading) for example this week:

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

Data isn't set for everyday of the week, therefore in this example only the dates above are shown. What I would like to be shown is the start of the week (2012, 02, 06) to the end of the week (2012, 02, 12) similar to the third example here.

I managed to get the whole week showing by checking if the date exists in the database and if not append an extra row will null data, this however meant the line was not continuous and the dates where not in order.

Could anyone offer any advice on how to I could go about doing this?

Thanks!

Can you just get your data back grouped by week, will that give you the basics of what you're looking for? You would only see the aggregate value for the whole week, but that may be enough? — Shawn Steward, Feb 16 '12 at 19:36

score 4 · Accepted Answer · edited May 23 '17 at 12:15

4

Did you try leaving the missing dates be missing dates (i.e. let the database return 2 values instead of 7)?

The continuous axis should handle missing dates, you just need to set the axis range from start to end of the week.

UPDATE

for interactive line chart the axis ranges can be set like this (as inspired by this thread):

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

see http://jsfiddle.net/REgJu/

edited May 23 '17 at 12:15

Community

1
1

answered Feb 16 '12 at 20:27

Aprillion

21,510
5
55
89

I think this is for the image charts online? I'm using the interactive line chart, thanks. – Elliott Feb 16 '12 at 20:45
oh,, this one - [linechart.html](http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html)? the continous axis looks the same to me and the Configuration Options are just called `hAxis.maxValue` and `hAxis.minValue` – Aprillion Feb 16 '12 at 20:55
Yep thats the one, but only supports number not date? – Elliott Feb 16 '12 at 21:00
Huh, i see :(( you might try reading the values when implicit boundaries are created and reverse engineer how to convert dates to these numbers... or can you send me a link to the code of a working date chart please? – Aprillion Feb 16 '12 at 21:41
1

A working one is the third example here: http://code.google.com/apis/chart/interactive/docs/customizing_axes.html#Terminology – Elliott Feb 16 '12 at 21:46
ok, i just tested this one: `hAxis: {title: 'Date', format: 'MMM yy', viewWindowMode:'explicit', viewWindow:{ min: new Date(2007,1,1), max: new Date(2010,1,1) }}` – Aprillion Feb 16 '12 at 22:18
Thanks! But it doesn't seem to add the date range, I'm always getting the same date. Any chance of a jsFiddle please? – Elliott Feb 17 '12 at 09:38

score 1 · Answer 2 · answered Feb 12 '12 at 06:03

"I managed to get the whole week showing by checking if the date exists in the database and if not append an extra row will null data, this however meant the line was not continuous and the dates where not in order."

I think you are on the right track you just need to do it in a slightly different way. I have the function like the below to make data continuous.

$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 will now hold:

$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,
);

in that order, and then the data can be used in the charts without any gaps.

score 0 · Answer 3 · answered Feb 09 '12 at 23:14

0

Perhaps you can use a different chart type? Dygraphs looks like it might be helpful.

Otherwise you may have to write your own custom chart type.

answered Feb 09 '12 at 23:14

jnnnnn

3,889
32
37

Thanks for your reply, it really needs to be a line chart. I was thinking of putting all the elements in an array and sorting by date but that seems far too hackish, surely I cannot be the only person with this problem. – Elliott Feb 09 '12 at 23:41

Date Range Google Chart Tools

3 Answers3

Linked