Chart Control

[Swapnil]

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.

[Tsvetie]

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:

• http://demos.telerik.com/aspnet-ajax/scheduler/examples/overview/defaultcs.aspx
• http://www.telerik.com/help/aspnet-ajax/

Regards,
Tsvetie
the Telerik team

[Swapnil]

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

[Tsvetie]

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