Line chart, show a gap when no data available

[Mohammed Rishad Ali]

Hi I am using google line chart for my website. I want to draw line chart with a gap when there is no data available for the specific time.

For instance if I draw a line chart for one day at 15 minute interval, the values will be 

DateTime                       Value

23-aug-2013 00:00:00,    10.5

23-aug-2013 00:15:00,     6.6

23-aug-2013 00:30:00,     8.5

23-aug-2013 00:45:00,     6.8

23-aug-2013 01:00:00,    12.8

23-aug-2013 01:15:00,     9.4 

23-aug-2013 01:30:00,     7.2 

.

.

.

23-aug-2013 23:15:00,      3.1

23-aug-2013 23:30:00,      2.8

23-aug-2013 23:45:00,      3.8

when there is a value missing, I want to show a gap between the lines. something like this

Is it possible??? Can anyone help me with this?

Currently I do not keep the datetime when the data is not available...

One options is to keep the datetime when there is no data and set a particular value for that datetime

Is it possible to change the color of the line for a specific value of y axis? (I can set the color of that point as the background color to show a gap there)

Any ideas??? 

Thanks you

[asgallant]

You need to explicitly insert a null value in between the two time periods where you have no data:

23-aug-2013 01:30:00,     7.2 

23-aug-2013 01:45:00,     null

23-aug-2013 23:15:00,      3.1

[asgallant]

Example: http://jsfiddle.net/asgallant/fXq5r/

[Mohammed Rishad Ali]

That is great.... you solved my problem

Thanks

[Mohammed Rishad Ali]

Hello asgallant,

Is there any way, instead of showing gaps can I show some text in the gap or can I show a dashed line instead of a gap??

Thanks for your help.

On Friday, August 23, 2013 4:05:42 PM UTC+1, Mohammed Rishad Ali wrote:

[asgallant]

You could try to use annotations to show text in the gap, but I'm not sure how well that would work.  If you want to insert a dashed line, you can use the "certainty" column role, which makes the line dashed to either side of a point whose certainty is set to false.

I wrote an example that takes the data set and creates a second series of data with manually interpolated nulls that fill in gaps.  It requires that you set the date in the null rows to null as well as the value, but otherwise does exactly what you want: http://jsfiddle.net/asgallant/fXq5r/2/

[Mohammed Rishad Ali]

Hello asgallant,

Thank you very much for your help. the example you wrote was very helpful. 

I wrote an example of what I wanted to do. Please have a look http://jsfiddle.net/rishad/H8gES/3/ and (if you want) correct me if there is any other way to do this.

Thanks again, much appreciated.

On Friday, August 23, 2013 4:05:42 PM UTC+1, Mohammed Rishad Ali wrote:

[asgallant]

What you wrote is functional, but there are a few small things you can do to clean it up.  In the calculated columns for creating the "error" annotations, you don't need to use an external reference to the row and DataTable (as the DataView will pass a reference to the DataTable and the row number to the function call) and you can compact the if statement into a ternary operation:

calc: function () {
    var val = data.getValue(r1, 1);
    r1++;
    if(val==null){return 'Error';}else{return null;}
}

becomes:

calc: function (dt, row) {
     var val = dt.getValue(row, 1);
     return (val==null) ? 'Error' : null;
}

see http://jsfiddle.net/asgallant/H8gES/4/

[Mohammed Rishad Ali]

That is great.. Thanks for this :)