Displaying multiple datasets in single annotated timeline chart

[Sabha]

Hi,

I have datasets from multiple parties that have the same set of
fields/columns. I can create annotated timeline chart for each
individual party separately in same page but I dont know if there is
an option to merge/present the timelines all in single chart.

Example: For each stock, lets say we have an annotated timeline
plotting the buy/sell, bid/ask graph. We can draw the separate
annotated timeline for each stock plotting the buys and sells as
separate lines in the same chart. But I would like to plot the trend
lines of all buy/sells for both Google and Apple stock in the same
chart to see the comparison across time instead of viewing them in
separate charts. Similarly, plotting the buy and sell of NYSE and
Nasdaq (each has same set of columns).

In my case, I have something like runtime attributes of machine or
node with the columns as cpu usage, iostats, vmstats, swap, network,
idleness etc as columns. Each of these columns will form their own
lines spanning the timelines for each machine. But how to plot the
comparison chart of multiple machines and showing the individual
columns so one cay view that MachineA CPU is higher compared to
MachineB while the the network and iostats are way down in comparison
in a given time frame?



thanks,
Sabha

[asgallant]

It sounds to me like you want to do a join of the two data sets, which is supported by the google.visualization.data.join() method.

[Sabha]

Thanks but I dont know how you will be able to get that joint data to display in the timeline graph and distinguish line1 is for the CPU usage from Server1 while line2 is from CPU usage of Server2.

Server1 Dataset:

Date, CPU %, Memory %, Disk IO% (Headers)

,...,     5,   10,  15

....,     1,  19,   9

....,     25, 30,  5

Server2 Dataset:

Date, CPU %, Memory %, Disk IO% (Headers)

,...,    15,   5,  12

....,     11,  39,   19

....,     5, 3,  35

Right now, the datasets dont carry any info that they are from specific servers. Lets say I add that as additional column. But even if I do a join (mostly left outer join as each dataset is specific to a server although they are reporting on the same set of attrbutes), how you would report in the graph which trendline for CPU belongs to which server instance? I already use the join to show that in table format but cannot do the same to display as an annotated timeline.

Sample of join table with data -> Here the Heaps, Requests are specific to server and I can draw the timeline graph per server but cannot do for the join table directly.

Detailed Snapshots (by chronology)  Date▲ Server  Health  HeapFree(%)  OpenSockets  HoggingRequests  PendingRequests  MaxHeapSize(MB)  CurrentHeapUsed(MB)  HeapFree(MB)  CompletedRequests  Jun 29, 2011 2:34:37 PM TF701_0101 OK 41 9 0 0 6608 3898.72 2709.28 18003 Jun 29, 2011 2:34:38 PM TF701_0102 OK 32 7 0 0 6608 4493.44 2114.56 18276 Jun 29, 2011 2:35:07 PM TF701_0101 OK 33 9 0 0 6608 4427.36 2180.64 18044 Jun 29, 2011 2:35:08 PM TF701_0102 OK 27 7 0 0 6608 4823.84 1784.16 Not sure if the above copy-paste appears correctly formatted in email.

I was thinking of one option, just keep adding more columns while forming the join table so the values would appear null for non-associated datasets but then it becomes messy as I add more servers and want to compare them all at the same time.

thanks very much,
Sabha

[asgallant]

I'm going to simplify things a bit here, and work with the assumption that you have two DataTables named "server1" and "server2" tracking CPU usage over time.  The join would be like this:

var joined = google.visualization.data.join(server1, server2, 'full', [[0, 0]], [1], [1]);
joined.setColumnLabel(1, 'Server 1 CPU');
joined.setColumnLabel(1, 'Server 2 CPU'); 

You would have two lines, each representing the CPU usage from one server.

[Sabha]

Thanks very much Drew, let me try this and see.

-Sabha

[Sabha]

Hi Drew,

   Thanks again. I got the simple join working now using your advice.

 

Two questions:

1) Is there a java api equivalent of Join in the visualization package to join 2 datatables?

2) If not, how can one pass or retrieve different datasets from 2 different query callback functions and join them together inside another function. I guess I never fully understood how to retrieve and act on multiple datasets from one place. So, I had always been firing of multiple separate Queries and specifying different callbacks for each as I am still a javascript novice. 

thanks very much,

Sabha

[asgallant]

I'm sure there is a better way than this, but this is simple to implement:

var responses = {};
function handler1 (response) {
    responses.query1 = response;
    if (typeof(responses.query2) != 'undefined') {
        drawChart(responses);
    }
}
function handler2 (response) {
    responses.query2 = response;
    if (typeof(responses.query1) != 'undefined') {
        drawChart(responses);
    }
}

Use handler1 and handler2 for the callbacks in the queries and have drawCharts accept an object with the query responses as properties.

[Ayfer KÜÇÜKERDÖNMEZ]

Hi sabha

I am tring to draw similar chart. Two measurement value set, each measurement interval diffrent so date values are different but I want to show them on one chart. Exacly what is in your example...  Did you achive this? I tried join but my chart something like this:

 

8 Haziran 2012 Cuma 03:10:08 UTC+3 tarihinde Sabha yazdı:

[asgallant]

From the picture you posted, it looks like you just need to set the chart's "interpolateNulls" to true in order to make it work.