ChartSeries and XAxis

[Inge Wandsvik]

How can I put ChartSeries1 to be shown in XAxis[0], and ChartSeries2 to be shown in XAxis[1]?

[Giuseppe]

Hello Inge Wandsvik,

You can achieve the desired functionality by disabling the Axis.AutoScale and assigning the range manually like this:

<telerik:RadChart ID="RadChart1" runat="Server">
    <Series>
        <telerik:ChartSeries>
            <Items>
                <telerik:ChartSeriesItem YValue="10"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="30"></telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>
    <PlotArea>
        <XAxis AutoScale="false" MinValue="1" MaxValue="2" Step="1">
            <Items>
                <telerik:ChartAxisItem Value="1" TextBlock-Text="ChartSeries1"></telerik:ChartAxisItem>
                <telerik:ChartAxisItem Value="2" TextBlock-Text="ChartSeries1"></telerik:ChartAxisItem>
            </Items>
        </XAxis>
    </PlotArea>
</telerik:RadChart>

Alternatively, you can preserve the Axis.AutoScale functionality and use different approach -- handle the BeforeLayout server-side event and change the axis item text there:

ASPX:

<telerik:RadChart ID="RadChart1" runat="Server" OnBeforeLayout="RadChart1_BeforeLayout">
    <Series>
        <telerik:ChartSeries>
            <Items>
                <telerik:ChartSeriesItem YValue="10"></telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem YValue="30"></telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>
</telerik:RadChart>

Code-behind:

protected void RadChart1_BeforeLayout(object sender, EventArgs e)
{
    RadChart1.PlotArea.XAxis.Items[0].TextBlock.Text = "ChartSeries1";
    RadChart1.PlotArea.XAxis.Items[1].TextBlock.Text = "ChartSeries2";
}

Hope this helps.


Kind regards,
Manuel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Inge Wandsvik]

The RadChart is created in CodeBehind (C#), so ur example give no meaning to me...  

[Inge Wandsvik]

Is there no way that this can be done dynamically?

[Giuseppe]

Hello Inge Wandsvik,

We are unsure why you are facing problems with the implementation as both of the approaches can be applied from code-behind as well -- in fact the second one demonstrates setting the axis item labels dynamically in the BeforeLayout event handler and you can easily plug it in your chart created in code behind.

The equivalent code for the first approach would look like this:

protected void Page_Load(object sender, EventArgs e)
{
    RadChart1.PlotArea.XAxis.AutoScale = false;
    RadChart1.PlotArea.XAxis.MinValue = 1;
    RadChart1.PlotArea.XAxis.MaxValue = 2;
    RadChart1.PlotArea.XAxis.Step = 1;

    ChartAxisItem axisItem = new ChartAxisItem("ChartSeries1");
    axisItem.Value = 1;
    RadChart1.PlotArea.XAxis.Items.Add(axisItem);

    ChartAxisItem axisItem2 = new ChartAxisItem("ChartSeries2");
    axisItem2.Value = 2;
    RadChart1.PlotArea.XAxis.Items.Add(axisItem2);
}

Best wishes,
Manuel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Inge Wandsvik]

Ok, here is my chart and codebehind, maybe you understand why I can't get the result im after:

<telerik:RadChart ID="RadChart1"
    runat="server"
    Width="580"
    Height="400"
    Skin="Office2007"
    ChartTitle-TextBlock-Text="Statistikk"
    PlotArea-EmptySeriesMessage-TextBlock-Text="Nothing to show...">
</telerik:RadChart>

    protected void btnSammenlign_Click(object sender, EventArgs e)
    {
        //Tøm grafen hvis den har vært i bruk tidligere
        RadChart1.Chart.Series.Clear();
        RadChart1.PlotArea.XAxis.AutoScale = false;
        RadChart1.PlotArea.XAxis.AddRange(1,2,1);

        try
        {
            //Lag et dataset som inneholder resultat fra Rapportgeneratoren
            DataSet ds = Graf.lesDatagrunnlagGraf("5");

            //Sett parametre for grafen
            int? byggid = int.Parse(ddlBygg.SelectedValue);
            int? energikilde = int.Parse(ddlEnergitype.SelectedValue);
            int? aar = int.Parse(ddlAar.SelectedValue);

            //Definer spørringen som brukes mot datasettet
            //VALGT BYGG
            var xQuery = from row in ds.Tables[0].AsEnumerable()
                         where row.Field<int?>("ByggID") == byggid
                               && row.Field<int?>("EnergikildeID") == energikilde
                               && row.Field<int?>("År") == aar
                         select row[3];

            //Definer en serie for grafen. Grafen kan ha mange serier.
            var chartSeries1 = new ChartSeries { Name = ddlBygg.SelectedItem.Text, Type = ChartSeriesType.Bar };
            var v1 = Convert.ToDouble(xQuery.First().ToString());
            var xValue = v1.ToString("#.00;(#.00)");
            var xText = "Mengde" + "\r\n" + xValue;
            chartSeries1.AddItem(v1, xText);
            chartSeries1.Appearance.ShowLabels = true;
            RadChart1.AddChartSeries(chartSeries1);


            //Definer spørringen som brukes mot datasettet
            //ANDRE BYGG SAMMENLIGNET
            var yQuery = from row in ds.Tables[0].AsEnumerable()
                         where row.Field<int?>("ByggID") != byggid
                               && row.Field<int?>("EnergikildeID") == energikilde
                               && row.Field<int?>("År") == aar
                         select row[3];

            var chartSeries2 = new ChartSeries { Name = "Andre bygg", Type = ChartSeriesType.Bar };
            var yAntall = yQuery.Count();
            var yMengde = yQuery.First().ToString();
            var v2 = Convert.ToDouble(yMengde)/Convert.ToDouble(yAntall);
            var yValue = v2.ToString("#.00;(#.00)");
            var yText = "Mengde" + "\r\n" + yValue;
            chartSeries2.AddItem(v2, yText);
            chartSeries2.Appearance.ShowLabels = true;
            RadChart1.AddChartSeries(chartSeries2);

            //Vis området som inneholder grafen
            divGraf.Visible = true;
        }
        catch(Exception ex)
        {
            //Exception handling
        }
    }

[Inge Wandsvik]

Telerik, with your latest example, my chart is allways empty...

[Giuseppe]

Hello Inge Wandsvik,

The provided code snippet only demonstrates the code necessary to customize the axis and does not create any chart series and series items -- that is why the chart is empty. We have attached a runnable sample project that creates two series from code behind and modifies the axis items as well:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Using the Axis.AddRange(...) method
        RadChart1.PlotArea.XAxis.AutoScale = false;
        RadChart1.PlotArea.XAxis.AddRange(1, 2, 1);
        RadChart1.PlotArea.XAxis.Items[0].TextBlock.Text = "ChartSeries1";
        RadChart1.PlotArea.XAxis.Items[1].TextBlock.Text = "ChartSeries2";


        // Alternatively you can use the MinValue/MaxValue approach as well
        //
        //RadChart1.PlotArea.XAxis.AutoScale = false;
        //RadChart1.PlotArea.XAxis.MinValue = 1;
        //RadChart1.PlotArea.XAxis.MaxValue = 2;
        //RadChart1.PlotArea.XAxis.Step = 1;

        //ChartAxisItem axisItem = new ChartAxisItem("ChartSeries1");
        //axisItem.Value = 1;
        //RadChart1.PlotArea.XAxis.Items.Add(axisItem);

        //ChartAxisItem axisItem2 = new ChartAxisItem("ChartSeries2");
        //axisItem2.Value = 2;
        //RadChart1.PlotArea.XAxis.Items.Add(axisItem2);

        ChartSeries series1 = new ChartSeries();
        series1.Items.Add(new ChartSeriesItem(10));
        series1.Items.Add(new ChartSeriesItem(30));
        RadChart1.Series.Add(series1);

        ChartSeries series2 = new ChartSeries();
        series2.Items.Add(new ChartSeriesItem(20));
        series2.Items.Add(new ChartSeriesItem(15));
        RadChart1.Series.Add(series2);
    }
}

Should you have any further problems, please send us specific descriptions of the issues (alongside the source code) so we can advise you properly.


Kind regards,
Manuel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.