Chart Control

Thread is closed for posting
4 posts, 0 answers
  1. Swapnil
    Swapnil avatar
    2 posts
    Member since:
    Apr 2013

    Posted 22 Apr 2013 Link to this post

    Hi,

    I need to create a graph using Telerik component.
    The graph should be divided into two parts.
    Above zero should have a bar graph and below zero it should have a timeline graph for each user.
    So for each user there should be a line below zero to show his data.

    Is it possible to do it with Telerik chart component. If yes then how.
    Also it should have zoom in -out functionality and multiple browser.

  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 25 Apr 2013 Link to this post

    Hello Swapnil,

    In case I understand you correctly, you need two controls - one to show the line series and another one to show the users. Basically, you can use a line series and a gantt series in order to achieve this. However, a chart with a gantt series does not support zooming and scrolling.

    On a side note, you can check our RadScheduler control - it might better suite your needs regarding the visualization of the users'a activities:

    Regards,
    Tsvetie
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Swapnil
    Swapnil avatar
    2 posts
    Member since:
    Apr 2013

    Posted 26 Apr 2013 Link to this post

    Hi,

    Thanks for the reply.

    My issue is creating one below other having a common x axis.

    Can you please share some code which shows a common x axis and showing two chart in one line series and gantt series

    thanks
    swapnil deshmukh
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 30 Apr 2013 Link to this post

    Hello Swapnil,

    You can use the AutoScale property of the axis to turn off the automatically calculated range and specify the range of the axis manually using the MaxValue, MinValue and Step properties. You can read more about the chart axes in our online documentation.

    Here is a simple example:

    <table>
        <tr>
            <td>
                <telerik:RadChart ID="RadChart1" runat="server">
                    <PlotArea>
                        <XAxis AutoScale="false" MaxValue="5" MinValue="0" Step="1" LayoutMode="Normal">
                            <Appearance MajorTick-Visible="true" MinorTick-Visible="false">
                                <MajorGridLines Visible="true" />
                                <MinorGridLines Visible="false" />
                            </Appearance>
                        </XAxis>
                        <YAxis AutoScale="false" MaxValue="4" MinValue="0" Step="1">
                            <Appearance MajorTick-Visible="true" MinorTick-Visible="false">
                                <MajorGridLines Visible="true" />
                                <MinorGridLines Visible="false" />
                            </Appearance>
                        </YAxis>
                    </PlotArea>
                    <Series>
                        <telerik:ChartSeries Name="Series 1" Type="Line">
                            <Items>
                                <telerik:ChartSeriesItem YValue="1" XValue="1">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem YValue="2" XValue="2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem YValue="1" XValue="3">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem YValue="1.5" XValue="4">
                                </telerik:ChartSeriesItem>
                            </Items>
                        </telerik:ChartSeries>
                    </Series>
                </telerik:RadChart>
            </td>
        </tr>
        <tr>
            <td>
                <telerik:RadChart ID="RadChart2" runat="server" SeriesOrientation="Horizontal">
                    <PlotArea>
                        <XAxis AutoScale="false" MaxValue="5" MinValue="0" Step="1" LayoutMode="Normal">
                            <Appearance MajorTick-Visible="true" MinorTick-Visible="false">
                                <MajorGridLines Visible="true" />
                                <MinorGridLines Visible="false" />
                            </Appearance>
                        </XAxis>
                        <YAxis AutoScale="false" MaxValue="5" MinValue="0" Step="1">
                            <Appearance MajorTick-Visible="true" MinorTick-Visible="false">
                                <MajorGridLines Visible="true" />
                                <MinorGridLines Visible="false" />
                            </Appearance>
                        </YAxis>
                    </PlotArea>
                    <Series>
                        <telerik:ChartSeries Name="Series 1" Type="Gantt">
                            <Items>
                                <telerik:ChartSeriesItem YValue="1" XValue="1">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem YValue="2" XValue="2">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem YValue="1" XValue="3">
                                </telerik:ChartSeriesItem>
                                <telerik:ChartSeriesItem YValue="1.5" XValue="4">
                                </telerik:ChartSeriesItem>
                            </Items>
                        </telerik:ChartSeries>
                    </Series>
                </telerik:RadChart>
            </td>
        </tr>
    </table>

    Regards,
    Tsvetie
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top