Set null values invisible

[Henrique Duarte]

Hello,

How can I set visible = false for empty (null) values?

[]'s

Henrique

[Ves]

Hi Henrique,

You can set the series.Appearance.EmptyValue.Mode property to Zero:
RadChart1.Series[0].Appearance.EmptyValue.Mode = Telerik.Charting.Styles.EmtyValuesMode.Zero;

This way, the values marked as empty will appear as with value of 0. You might also want to hide the "0" label. You can do this by setting the item.Label.Appearance.Visible property to false:
RadChart1.Series[0].Items[0].Label.Appearance.Visible = false;


Regards,
Ves
the Telerik team

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

[Henrique Duarte]

Hi Ves,

Actually, I don't want to show the line when value is null.
I modified you code, setting the line color for empty values to transparent:
chartConsumoMIPS.Series[0].Appearance.EmptyValue.Line.Color = Color.Transparent;

The problem now: I cannot use zoom. When postbacking (even if I use ajax) the layout is gone.

Here is my code:

        protected void bGerarGrafico_Click(object sender, EventArgs e)
        {
            StringBuilder sb = new StringBuilder();
            sb.AppendLine("Comparação de Consumo de MIPS por Hora");
            sb.AppendLine("Empresa: " + iEmpresa.SelectedItem.Text);
            sb.AppendLine("Meses de " + iMesInicial.SelectedDate.Value.ToString("MM/yyyy") + " e " + iMesFinal.SelectedDate.Value.ToString("MM/yyyy") + "  -  " + iIntervalo.SelectedItem.Text + "  -  " + iTipoDia.SelectedItem.Text);

            odsGrafico.SelectParameters["P_DT_INICIO_1"].DefaultValue = iMesInicial.SelectedDate.Value.ToString();
            odsGrafico.SelectParameters["P_DT_TERMINO_1"].DefaultValue = new DateTime(iMesInicial.SelectedDate.Value.Year, iMesInicial.SelectedDate.Value.Month, DateTime.DaysInMonth(iMesInicial.SelectedDate.Value.Year, iMesInicial.SelectedDate.Value.Month)).ToString();
            odsGrafico.SelectParameters["P_DT_INICIO_2"].DefaultValue = iMesFinal.SelectedDate.Value.ToString();
            odsGrafico.SelectParameters["P_DT_TERMINO_2"].DefaultValue = new DateTime(iMesFinal.SelectedDate.Value.Year, iMesFinal.SelectedDate.Value.Month, DateTime.DaysInMonth(iMesFinal.SelectedDate.Value.Year, iMesFinal.SelectedDate.Value.Month)).ToString();

            chartConsumoMIPS.ChartTitle.TextBlock.Text = sb.ToString();

            if (chartConsumoMIPS.Series.Count == 0)
            {
                chartConsumoMIPS.Series.Add(new ChartSeries() { Name = "Pico de " + iMesInicial.SelectedDate.Value.ToString("MM/yyyy"), DataYColumn = "PICO_T1", Type = ChartSeriesType.Line });
                chartConsumoMIPS.Series.Add(new ChartSeries() { Name = "Média de " + iMesInicial.SelectedDate.Value.ToString("MM/yyyy"), DataYColumn = "MEDIA_T1", Type = ChartSeriesType.Line });
                chartConsumoMIPS.Series.Add(new ChartSeries() { Name = "Pico de " + iMesFinal.SelectedDate.Value.ToString("MM/yyyy"), DataYColumn = "PICO_T2", Type = ChartSeriesType.Line });
                chartConsumoMIPS.Series.Add(new ChartSeries() { Name = "Média de " + iMesFinal.SelectedDate.Value.ToString("MM/yyyy"), DataYColumn = "MEDIA_T2", Type = ChartSeriesType.Line });
            }

            chartConsumoMIPS.Series[0].Appearance.LabelAppearance.Visible = false;
            chartConsumoMIPS.Series[0].Appearance.EmptyValue.Line.Color = Color.Transparent;

            chartConsumoMIPS.Series[1].Appearance.LabelAppearance.Visible = false;
            chartConsumoMIPS.Series[1].Appearance.EmptyValue.Line.Color = Color.Transparent;

            chartConsumoMIPS.Series[2].Appearance.LabelAppearance.Visible = false;
            chartConsumoMIPS.Series[2].Appearance.EmptyValue.Line.Color = Color.Transparent;

            chartConsumoMIPS.Series[3].Appearance.LabelAppearance.Visible = false;
            chartConsumoMIPS.Series[3].Appearance.EmptyValue.Line.Color = Color.Transparent;

            chartConsumoMIPS.Visible = true;
        }

aspx page:

    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="scriptManager" runat="server" EnableTheming="True">
    </telerik:RadScriptManager>
    <telerik:RadStyleSheetManager ID="cssManager" runat="server">
    </telerik:RadStyleSheetManager>
    <telerik:RadAjaxManager ID="ajaxManager" runat="server" DefaultLoadingPanelID="loadingPanel" EnablePageHeadUpdate="true" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="bGerarGrafico">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="chartConsumoMIPS" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="chartConsumoMIPS">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="chartConsumoMIPS" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="loadingPanel" BackColor="LightGray" Transparency="30" runat="server">
        <table style="width: 100%; height: 100%;">
            <tr style="height: 100%">
                <td align="center" valign="middle" style="width: 100%">
                    <img alt="Carregando..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading2.gif") %>' style="border: 0;" />
                </td>
            </tr>
        </table>
    </telerik:RadAjaxLoadingPanel>
    <div class="titulo1" style="margin-bottom: 10px; padding-bottom: 10px; border-bottom: solid 3px;">
        Gráfico de Comparação de Consumo de MIPS por Hora
    </div>
    <table style="margin-bottom: 10px;">
        <tr>
            <td>
                Empresa:
            </td>
            <td>
                <telerik:RadComboBox ID="iEmpresa" runat="server" DataSourceID="odsEmpresas" DataTextField="ES_DESC" DataValueField="ES_CD">
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                </telerik:RadComboBox>
                <asp:ObjectDataSource ID="odsEmpresas" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="dal.CombosTableAdapters.EMPR_SISTTableAdapter"></asp:ObjectDataSource>
            </td>
            <td rowspan="3" style="width: 20px;">
            </td>
            <td>
                Período:
            </td>
            <td>
                <telerik:RadDateInput ID="iMesInicial" runat="server" Width="70" EmptyMessage="mm/yyyy" Style="margin-right: 10px;" DateFormat="MM/yyyy" OnBlur="MonthYearValidate(this);" DisplayDateFormat="MM/yyyy">
                </telerik:RadDateInput>
                e
                <telerik:RadDateInput ID="iMesFinal" runat="server" Width="70" EmptyMessage="mm/yyyy" Style="margin-left: 10px;" DateFormat="MM/yyyy" OnBlur="MonthYearValidate(this);" DisplayDateFormat="MM/yyyy">
                </telerik:RadDateInput>
                <asp:CustomValidator ID="CustomValidator_Mes" runat="server" ClientValidationFunction="ValidaMes" ControlToValidate="iMesInicial" Style="margin-left: 10px;" ValidateEmptyText="true">Período inválido (mm/yyyy)</asp:CustomValidator>
            </td>
        </tr>
        <tr>
            <td>
                Tipo do Dia:
            </td>
            <td>
                <telerik:RadComboBox ID="iTipoDia" runat="server" DataSourceID="odsTipoDia" AppendDataBoundItems="true" DataTextField="TD_DESC" DataValueField="TD_CD">
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                    <Items>
                        <telerik:RadComboBoxItem runat="server" Text="Todos os Dias" Value="" />
                    </Items>
                </telerik:RadComboBox>
                <asp:ObjectDataSource ID="odsTipoDia" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="dal.CombosTableAdapters.TP_DIATableAdapter"></asp:ObjectDataSource>
            </td>
            <td>
                Intervalo:
            </td>
            <td>
                <telerik:RadComboBox ID="iIntervalo" runat="server" DataSourceID="odsIntervalo" DataTextField="FH_DESC" DataValueField="FH_ID">
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                </telerik:RadComboBox>
                <asp:ObjectDataSource ID="odsIntervalo" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="dal.CombosTableAdapters.FX_HORATableAdapter"></asp:ObjectDataSource>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
                <asp:Button ID="bGerarGrafico" runat="server" Text="Gerar Gráfico" OnClick="bGerarGrafico_Click" />
            </td>
        </tr>
    </table>
    <telerik:RadChart ID="chartConsumoMIPS" Visible="False" runat='server' DataSourceID="odsGrafico" DefaultType="Line" Width="900px" Height="500px" Skin="Colorful" AutoLayout="True" PlotArea-XAxis-DataLabelsColumn="HORA">
    </telerik:RadChart>
    <asp:ObjectDataSource ID="odsGrafico" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="dal.Graficos.ComparacaoConsumoMIPSTableAdapters.porHoraTableAdapter">
        <SelectParameters>
            <asp:ControlParameter Name="P_ES_CD" Type="String" ControlID="iEmpresa" PropertyName="SelectedValue" />
            <asp:Parameter Name="P_DT_INICIO_1" Type="DateTime" />
            <asp:Parameter Name="P_DT_TERMINO_1" Type="DateTime" />
            <asp:Parameter Name="P_DT_INICIO_2" Type="DateTime" />
            <asp:Parameter Name="P_DT_TERMINO_2" Type="DateTime" />
            <asp:ControlParameter Name="P_FH_ID" Type="Decimal" ControlID="iIntervalo" PropertyName="SelectedValue" />
            <asp:ControlParameter Name="P_TD_CD" Type="Decimal" ControlID="iTipoDia" PropertyName="SelectedValue" />
            <asp:Parameter Direction="Output" Name="RS" Type="Object" />
        </SelectParameters>
    </asp:ObjectDataSource>
    </form>

Regards,

Henrique

[Ves]

Hi Henrique,

Can you please elaborate on this issue? Does it appear on every postback or only when zooming inside RadChart? What exactly happens with the layout?

I tried to create a page based on your markup with dummy data for the chart and it seems to work fine for me. You can find it attached.

Greetings,
Ves
the Telerik team

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

[Henrique Duarte]

Ves,

I'll open a support ticket.
I cannot attach files here.

Regards,

Henrique