ChartDirector General - View Thread 1234414665

Graphing events in a day

Posted by Gordon on Feb-12-2009 12:57

Hi Peter,

I have to create a graph that shows an event log in graphical form. The x axis is for one day (24 hours) and on the graph all events that happen in that day are to be shown. The length of any event could be from 2 seconds to many hours.

Before I start what graph what would you suggest, is it possible to show a day and allow the user to zoom into a part of the day to allow accurate representation of short periods?

Thanks

Re: Graphing events in a day

Posted by Peter Kwan on Feb-13-2009 02:39

Hi Gordon,

The exact type of chart you may use depends on the nature of your data, and how you would like to represent the data. For example, do you need to distinguish the events in the chart? Can the events overlap in time (that is, multiple events occuring at the same time)? .....

A general type of chart you may try is a gantt chart. You may look for "Gantt Charts samples" in the ChartDirector documentation index.

For zooming, all XYCharts in ChartDirector can be made zoomable and scrollable. In your case, you may refer to "Zoomable and Scrollable Charts" for some background information, and use the "Zooming and Scrolling Demonstration (2)" sample code as the starting point (it is the easier of the two Zooming and Scrolling sample code).

Hope this can help.

Regards
Peter Kwan

Re: Graphing events in a day

Posted by Gordon on Feb-16-2009 16:43

Thanks for that reply - very helpful as always. Still llooking for the best way to present the information in a chart and hope you may have a suggestion.

The data is in the form

System Subsystem Error StartTime1 Endtime1 Starttime2 Endtime2 Starttime3.....

What I am looking for is to chart these datapoints for a day (up to 500 system events in a day max but each event may occur multiple times due to toggling ) on a chart similar to a Gannt (but maybe I am looking at the wrong chart type)

What I was looking for was the System (i.e Mux Event) as the left hand label, Time along the X axis and when a mouse is hovered over the chart bar for the whole description (System, Subsystem and Error to be displayed (i.e. "Mux:Mux2A:lost lock due to input transients")

Thanks

Re: Graphing events in a day

Posted by Peter Kwan on Feb-17-2009 02:57

Hi Gordon,

I think a gantt chart like the one in the "Multi-Color Gantt Chart" may work for your application.

The "Mulit-Color Gantt Chart" demonstrates a gantt chart which can have multiple "events" (starttime/endtime pairs) in the same "task" (same system in your case). This seems to suit you needs.

For the tooltips, you may add the extra information (like the "Subsystem and Error") as extra fields, and configure the tooltips to show these fields. I think we can focus on getting the chart image correct first. After the chart works, we can add more code to get the tooltips.

Hope this can help.

Regards
Peter Kwan

Re: Graphing events in a day

Posted by Peter Kwan on Feb-17-2009 17:38

Hi Gordon,

1) How can I best "wrap" the labels to make them more useful ?

If you want to wrap the labels with your own code, you may insert a line feed charater in the label. In C#/Java, the linefeed character is "\\n".

If you want ChartDirector to wrap the labels, you may use setMaxWidth. For example:

//wrap labels if longer than 200 pixels - usually, you will set the max-width
//to the "plot area left" position, minus a few pixels as margin
c.xAxis().setLabelStyle("Arial", 8, 0x000000).setMaxWidth(200);

2) How do I show the minutes and hours in the day

If the axis is auto-scaled by ChartDirector, ChartDirector will automatically put suitable labels on the axis.

I suspect in your case, the axis scale is set by your code, so that it shows one label per week. Because you have less than 1 week of data, so it shows only 1 label.

In your code, you may have lines like (the code below are copied from the sample code):

    // Set the y-axis scale to be date scale from Aug 16, 2004 to Nov 22, 2004, with
    // ticks every 7 days (1 week)
    c.yAxis().setDateScale(new DateTime(2004, 8, 16), new DateTime(2004, 11, 22),
        86400 * 7);

    // Set multi-style axis label formatting. Month labels are in Arial Bold font in
    // "mmm d" format. Weekly labels just show the day of month and use minor tick
    // (by using '-' as first character of format string).
    c.yAxis().setMultiFormat(Chart.StartOfMonthFilter(),
        "<*font=Arial Bold*>{value|mmm d}", Chart.StartOfDayFilter(), "-{value|d}");

As the comment of the above code mentions, it has one tick every 7 days. If you want one tick per 3 hours (one hour = 3600 seconds), and show the labels as hh:nn, you may use:

    c.yAxis().setDateScale(startTime, endTime, 3 * 3600);

     c.yAxis().setMultiFormat(Chart.StartOfDayFilter(),
        "<*font=Arial Bold*>{value|mmm d}", Chart.StartOfHourFilter(), "-{value|hh:nn}");

You may also just remove the scaling code, so ChartDirector will auto-scale the axis. You may still want to leave the format code to control the label format:

    //no explicit scaling - ChartDirector will auto-scale the axis
    //c.yAxis().setDateScale(startTime, endTime, 3 * 3600);

     c.yAxis().setMultiFormat(Chart.StartOfDayFilter(),
        "<*font=Arial Bold*>{value|mmm d}", Chart.StartOfHourFilter(), "-{value|hh:nn}");

3) I notice that on instantaneous or very short alarms the Imagemap does not work- is there any way to resolve this (probably could make the alarms longer but that rather defeats the accuracy required)

If you want to have a large hot spot, even if the actual object in the chart is small, the usual method is to create a transparent layer with a large clickable area. The chart will look the same, because the layer is transparent, but it will have a large hot spots.

If you are using the "Simple Gantt Chart" sample code (the bars have no x-coordinates), a very simple example is like:

ScatterLayer tooltipLayer = c.addScatterLayer(null, Chart.CTime(startDate), "", Chart.SquareSymbol, 11, Chart.Transparent, Chart.Transparent);
toolTipLayer.addExtraField(arrayOfToolTips);
toolTipLayer.setHTMLImageMap("", "", "title='{field0}'");

Hope this can help.

Regards
Peter Kwan

Re: Graphing events in a day

Posted by Gordon on Feb-18-2009 02:59

Thanks Peter,

Your assistance and support fior ChartDirector is the best I have seen in all software I have purchased

Regards-Gordon