Can a Telerik control make a chart similar to Google/Yahoo/Bing Finance?

[Andrew]

I'm investigating several controls (from Telerik and others) trying to find out if I can make a chart to my boss's liking. He basically wants a line chart that would allow the user to "zoom" into a current period of time (like 1 day, 5 day, 1 week, 1 month, 1 year, etc). And he would like it if a user could hover over a certain point in the chart to show the value.

Here's an example of a Google Finance chart: Google Finance

I've used Telerik controls before and absolutely love them, but I'll need to upgrade to the latest version. Before I put the request into AP to buy the latest software, I need to know if Telerik can do this (or do most of it).

Is there a way to do this with Telerik chart controls?

Thanks for your help,
Andrew

[Vladimir Milev]

Hello Andrew,

Unfortunately not all of the features required are currently available. For example we have plans to introduce "current value indicator" feature which shows the value of the item being hovered, however, it will not make it for the Q2 release. What is the absolute required set of features that you cannot do without? Also, do you need ASP.NET graph or is Silverlight a viable alternative for you.

Greetings,
Vladimir Milev
the Telerik team

[Andrew]

Thanks for the reply.

If you look at the attachment RadChart.png, is there a way to make it so that chart automatically zooms closer into the line chart so that, by default, the chart is at the "end" of the line but the user could still scroll to the left to view the other values?

Also, if we do:

<telerik:ChartSeries DataYColumn="CustomerCount" Type="Line" Appearance-ShowLabels="False">
</telerik:ChartSeries>

How would we be able to show a diamond, square, etc in place of the actual label?

For reference, here is the entire chart code:

<telerik:RadChart ID="RadChart1" runat="Server" Width="700px" AutoLayout="true" Skin="DeepGray" IntelligentLabelsEnabled="True" ClientSettings-ScrollMode="Both">
                <ClientSettings ScrollMode="Both" YScale="4" />
                <Series>
                    <telerik:ChartSeries DataYColumn="CustomerCount" Type="Line" Appearance-ShowLabels="False">
                    </telerik:ChartSeries>
                </Series>
                <Legend Visible="false"></Legend>
                <ChartTitle TextBlock-Text="Customer Count">
                </ChartTitle>
                <PlotArea XAxis-Visible="True">
                    <Appearance Dimensions-Margins="18%, 24%, 22%, 10%">
                    </Appearance>
                    <XAxis DataLabelsColumn="AgeDate" Appearance-ValueFormat="ShortDate" AutoShrink="True"
                        IsZeroBased="False" AutoScale="False" LayoutMode="Inside" LabelStep="1">
                        <Appearance MinorGridLines-Visible="False" MinorTick-Visible="False" ValueFormat="Number">
                            <LabelAppearance RotationAngle="90" Position-AlignedPosition="Top">
                            </LabelAppearance>
                            <MinorGridLines Visible="true" HideWithAxis="true" />
                            <MajorGridLines HideWithAxis="false" Visible="true" />
                        </Appearance>
                    </XAxis>
                </PlotArea>
            </telerik:RadChart>

Thank you very much,
Andrew

[Ves]

Hello Andrew,

You can scroll to the right, using the RadChart Client Side API, specifically the Scroll method. Please, find more details here.

Unfortunately, it seems the image RadChart.png did not make it for some reason. Can you please try to attach it again, so that I can answer your second question?

Best regards,
Ves
the Telerik team

[Andrew]

Thanks for the tip, here's the image:

[Ves]

Hi Andrew,

You can take advantage of the pointmarks in RadChart. You can find an example here. Note the ChartSeries.Appearance.PointMark settings. In addition, you can set the Figure property with a value like "Circle", "Diamond", "Rectangle" etc. You can see the full list in the ChartSeries Collection editor (see the attachment). You can also create a custom figure (see ChartCustomFigures2.png) and use it.

Regards,
Ves
the Telerik team

[Andrew]

Thanks for helping me out. I really appreciate it.

I got the chart looks good, but the circle "progress indicator" in the middle of the chart doesn't go away... even when it's finished updating. Is this because it's a trial version?

I've attached a picture of the chart... you can see the indicator image in the middle... on the gridline of "2010-07-07"

If it's not part of the trial... how do I get rid of it?

[Andrew]

Also, when I set the MajorGridLine width to "1" it doesn't make the gridline thinner... it completely disappears. My boss wants the grid line to be thinner (such as the major grid line on the y-axis), but when I set it to "2" it makes it considerably thicker. You can see an example in the previous' post attachment RadChart2.png.

Here is my chart code:

<telerik:RadChart ID="RadChart1" runat="Server" Width="980px" AutoLayout="true" Skin="Vista"
           IntelligentLabelsEnabled="True" Height="325px">
           <ClientSettings ScrollMode="Both" />
           <Series>
               <telerik:ChartSeries DataYColumn="CustomerCount" Type="Line">
                   <Appearance ShowLabels="false">
                       <TextAppearance TextProperties-Font="Arial, 8.25pt" />
                       <PointMark Visible="True" Border-Width="2" Dimensions-AutoSize="false" Dimensions-Height="12px"
                           Dimensions-Width="12px">
                           <FillStyle MainColor="#BACF8D" FillType="solid">
                           </FillStyle>
                       </PointMark>
                       <LineSeriesAppearance Width="5" />
                   </Appearance>
               </telerik:ChartSeries>
           </Series>
           <Legend Visible="false"></Legend>
           <ChartTitle TextBlock-Text="Customer Count">
           </ChartTitle>
           <PlotArea XAxis-Visible="True" XAxis-LayoutMode="Inside" XAxis-IsZeroBased="False">
               <Appearance Dimensions-Margins="18%, 24%, 22%, 10%">
               </Appearance>
               <XAxis DataLabelsColumn="AgeDate" AutoShrink="True" IsZeroBased="False" AutoScale="False"
                   LayoutMode="Inside">
                   <Appearance MinorTick-Visible="False" ValueFormat="Number">
                       <LabelAppearance RotationAngle="90" Position-AlignedPosition="Top" Dimensions-Paddings="4px">
                       </LabelAppearance>
                       <MajorGridLines Visible="true" Width="2" PenStyle="Solid" />
                       <MinorGridLines Visible="false" />
                   </Appearance>
               </XAxis>
               <YAxis IsZeroBased="False"></YAxis>
           </PlotArea>
       </telerik:RadChart>

[Giuseppe]

Hi Andrew,

About the progress indicator -- the reason it is visible in your scenario is the fact that the Vista theme uses transparent background for the PlotArea. You can either customize the background color or add the following css class to hide the indicator manually:

<head runat="server">
    <title></title>
    <style type="text/css">
        .rchImgWrap div
        {
            background: url() !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <telerik:RadChart ID="RadChart1" runat="Server" Width="980px" AutoLayout="true" Skin="Vista"
            IntelligentLabelsEnabled="True" Height="325px">
            <ClientSettings ScrollMode="Both" />
            <Series>
                <telerik:ChartSeries DataYColumn="CustomerCount" Type="Line">
                    <Appearance ShowLabels="false">
                        <TextAppearance TextProperties-Font="Arial, 8.25pt" />
                        <PointMark Visible="True" Border-Width="2" Dimensions-AutoSize="false" Dimensions-Height="12px"
                            Dimensions-Width="12px">
                            <FillStyle MainColor="#BACF8D" FillType="solid">
                            </FillStyle>
                        </PointMark>
                        <LineSeriesAppearance Width="5" />
                    </Appearance>
                </telerik:ChartSeries>
            </Series>
            <Legend Visible="false"></Legend>
            <ChartTitle TextBlock-Text="Customer Count">
            </ChartTitle>
            <PlotArea XAxis-Visible="True" XAxis-LayoutMode="Inside" XAxis-IsZeroBased="False">
                <Appearance Dimensions-Margins="18%, 24%, 22%, 10%">
                </Appearance>
                <XAxis DataLabelsColumn="AgeDate" AutoShrink="True" IsZeroBased="False" AutoScale="False"
                    LayoutMode="Inside">
                    <Appearance MinorTick-Visible="False" ValueFormat="Number">
                        <LabelAppearance RotationAngle="90" Position-AlignedPosition="Top" Dimensions-Paddings="4px">
                        </LabelAppearance>
                        <MajorGridLines Visible="true" Width="2" PenStyle="Solid" />
                        <MinorGridLines Visible="false" />
                    </Appearance>
                </XAxis>
                <YAxis IsZeroBased="False">
                </YAxis>
            </PlotArea>
        </telerik:RadChart>
    </div>
    </form>
</body>

As for the major gridlines width -- indeed there seems to be a problem with setting the Width to 1. As a workaround we would suggest you to set Width="1.01".

Sorry for the inconvenience.


Kind regards,
Freddie
the Telerik team

[Andrew]

There appears to be a major issue with the chart when I view it in IE. This typically happens when the chart loads on the first page load, if I refresh the page it comes out fine. I've attached the screen shot below. The code I'm using is above this post.

[Giuseppe]

Hello Andrew,

We are unable to reproduce the problematic behavior in our local tests (see the attached sample application) so we suppose the problem you are experiencing is related to some generic css rules that you are applying in your specific project that are messing up with the chart image alignment.


Greetings,
Freddie
the Telerik team