line-charting with databinding, scrolling and datetime x-axis in a webpart/updatepanel

Hi,

I want to achief the following:
I have a table in SQL server with 2 columns (DateTime column and Value(double) column)
I want to chart this as line-graph in a webpart, wich is placed in a webpartzone and nexted in an ajax updatepanel. The intervals DateTime in the SQL table are not regular based; sometimes I've 2 samples in 1 minute, sometimes 1 sample in 15 minutes or anything between. I want regular X-Axis labels (every 6 hours relative to midnight). I want zooming functionality and would like point-markers with tooltips that show the timestamp and exact value.

Telerik Charts seems to have it all, but can't get it to work together :-(

1.)    I'm trying to get charting work, with on the X-Axis neat timestamps in date-time format. I want to set these timestamp labels in code behind to get nice timestamps in stead of "1/1/2009 13:32:56" witch is real data from the table. For example "1/1/2009 00:00:00", "1/1/2009 06:00:00", "1/1/2009 12:00:00", "1/1/2009 18:00:00", "2/1/2009 00:00:00", "2/1/2009 06:00:00", "2/1/2009 12:00:00", "2/1/2009 18:00:00".  I tried this:

trend.PlotArea.XAxis.Clear();

 

for (int j = 8; j >= 0; j--)

trend.PlotArea.XAxis.AddItem(

DateTime.Now.Subtract(TimeSpan.FromHours(j)).ToOADate().ToString());

 

 

 

The data from sql has to me mapped to the correct position according to the X-Axis labels. I don't know how to do this.  Next problem is, when setting a x-axis series with OADate() elements is to get the trend.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.LongTime; to Date and time display.

2.)    When I don't set X-axis labels from code-behind (as told above), but just binding the chart to the sql table and mapping the DateTime column to the X-Axis.

 

trend.PlotArea.XAxis.DataLabelsColumn = "DatumTijd";

 

 
It shows the data correctly and I can Zoom in the chart. This feature works great. Except when placing this chart inside an ajax updatepanel. (Actualy I create the whole chart in a code-behind dll wich is actualy a webpart. The webpart is instanciated and placed in a webpartzone and the webpartzone is in an ajax updatepanel, so the rendered content wil be nested inside a div/table inside a webpartzone, inside an ajax updatepanel). Then the X-Axis will be drawn on top of the chart(instead of under). Data(graph-line) is sometimes rendered on the wrong place accoriding to the Y-Axis (looks like the Y-Axis is mirrored)

3.)       Datapoint markers are drawn correctly with:
series.Appearance.PointMark.Visible = _showValues;

 

 

 

 

series.Appearance.PointMark.Border.Width = 2;

 

 

 

 

series.Appearance.PointMark.Border.Color = System.Drawing.Color.Red;

 

 

 

 

series.Appearance.PointMark.Dimensions.AutoSize = false;

 

 

 

 

series.Appearance.PointMark.Dimensions.Height = 5;

 

 

 

 

series.Appearance.PointMark.Dimensions.Width = 5;

 

 

 

 

 

 

Except for the tooltips wich are generated in:
void RadChart2_ItemDataBound(object sender, Telerik.Charting.ChartItemDataBoundEventArgs e)

{

 

if (_showValues)

 

 

e.SeriesItem.ActiveRegion.Tooltip =

DateTime.FromOADate(e.SeriesItem.XValue).ToString();

 

 

}

 

 

 

Tooltips are never displayed (will tooltips work with zooming enabled???)

4.)    How to turn off the values inside the graph that display next to the data-points.

I hope someone can put me on the right track and I still hope that all requested features can be compined together.

Thanks for your help,

Arno

Okay,

sorted some things out already..

Started with point 4:

chartseries.Appearance.LabelAppearance.Visible =

false;
That was the easy one...

Point 3:
Tooltips are working now. I found out that tooltips and scrolling/zooming can't work together. :-(

Point 2:
Zoom/scroll functionality doesn't work in asp.net webparts. The chart pictured looks like crab. Turning off zoom/scroll made the chart work in asp.net webparts. :-(

Point 1:
Setting the X-Axis manually and databinding to a table doesn't map the data-points correctly to the x-axis and messes up the manually defined x-axis. That is with OADate...
Solved this by iterating through the table and adding chartseriesitems manually to the chartseries.

Too bad that all functionality can't be used together. I found that scrolling/zooming mode is VERY slow due to the large viewState. Can't the performance be boosted by using cache objects/session states server-side?

For the moment; i'll stop using scroll/zoom functionality. It's too slow and stop using it solves my other issues. But I want a way to quickly interogate the X and Y values on some point in the chart.

So, my last question: Is it possible to use a ruler in the chart that displays the x-axis value and y-axis value clientside just by moving the mouse inside de chart's <DIV>??

Arno

 

Hi Arno,

Well, the problem with webparts is that; i'll write quickly a situation here(it's not real implementation)

<scriptmanager/>
<updatepanel>
    <contenttemplate>
        <webpartmanager/>
        <webpartzone>
            <zonetemplate>
                <webpart with telerik chart/>
            <zonetemplate/>
        <webpartzone/>
    <contenttemplate/>
<updatepanel/>
 
In this situation the chart looks like rubbish if scrolling and zooming enabled. Without these features enabled it looks just fine inside the webpart. I tested this with webpartmanager in designmode.

I hope you want to investigate this.

Kind regards,

Arno

Hello Arno,

Thanks. We will investigate this issue at our first opportunity.

Kind regards,
Vladimir Milev
the Telerik team