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

Thread is closed for posting
11 posts, 0 answers
  1. Andrew
    Andrew avatar
    7 posts
    Member since:
    Mar 2009

    Posted 07 Jul 2010 Link to this post

    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
  2. Vladimir Milev
    Admin
    Vladimir Milev avatar
    1061 posts

    Posted 13 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Andrew
    Andrew avatar
    7 posts
    Member since:
    Mar 2009

    Posted 13 Jul 2010 Link to this post

    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
  4. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 19 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Andrew
    Andrew avatar
    7 posts
    Member since:
    Mar 2009

    Posted 19 Jul 2010 Link to this post

    Thanks for the tip, here's the image:
  6. Ves
    Admin
    Ves avatar
    2926 posts

    Posted 21 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Andrew
    Andrew avatar
    7 posts
    Member since:
    Mar 2009

    Posted 22 Jul 2010 Link to this post

    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?
  8. Andrew
    Andrew avatar
    7 posts
    Member since:
    Mar 2009

    Posted 23 Jul 2010 Link to this post

    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>
  9. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 28 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Andrew
    Andrew avatar
    7 posts
    Member since:
    Mar 2009

    Posted 02 Aug 2010 Link to this post

    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.
  11. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 04 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top