HtmlChart - value multiplied 1000 times when stacking data

5 posts, 1 answers
  1. Adam
    Adam avatar
    2 posts
    Member since:
    Jul 2018

    Posted 19 Jul 2018 Link to this post

    Hi,

    I am witnessing some strange behaviour in my HtmlChart.

    When displaying unstacked data everything looks fine (first attched file).

     

    But when turning staking on, for some reason some of the columns parts look 1000 times bigger than they should (second attached file).

    The data is strictly the same in these 2 examples, the only difference is turning line.Stacked true or false, nowhere in the code do we multiply any value by 1000.

    Telerik Web UI is version 2017.1.118.45.

    The same page works perfectly with Telerik Web UI 2014.1.403.40.

    Is it a known issue? Is there any known solution?

    Here is the ascx code:

    <radS:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1000px" Height="500px">
            <PlotArea>
                <XAxis DataLabelsField="day">
                    <TitleAppearance Text="Days" Visible="true"></TitleAppearance>
                    <LabelsAppearance DataFormatString="{0}"/>
                    <MinorGridLines Visible="false"></MinorGridLines>
                    <MajorGridLines Visible="false"></MajorGridLines>
                </XAxis>
                <YAxis>
                    <TitleAppearance Text="Count" Visible="true"></TitleAppearance>
                    <LabelsAppearance DataFormatString="{0}"></LabelsAppearance>
                    <MinorGridLines Visible="false"></MinorGridLines>
                </YAxis>
            </PlotArea>
            <Legend>
                <Appearance Visible="true"></Appearance>
            </Legend>
        </radS:RadHtmlChart>

     

    The binding part in the C#:

    RadHtmlChart1.PlotArea.Series.Clear();
     
    for(int i=1; i<dtTemp.Columns.Count;i++)
    {
        Telerik.Web.UI.ColumnSeries line = new Telerik.Web.UI.ColumnSeries();
        line.Name = string.Format("{0} ({1})",Names[i],Totals[i]);
        line.Stacked = true;
        //line.Stacked = false;
        line.LabelsAppearance.Visible = false;
        line.LabelsAppearance.DataFormatString = "{0}";
        line.DataFieldX = "day";
        line.DataFieldY = dtTemp.Columns[i].ColumnName;
        RadHtmlChart1.PlotArea.Series.Add(line);
    }
     
    RadHtmlChart1.DataSource = dtTemp;
    RadHtmlChart1.DataBind();

     

    Thank you.

     

     

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4712 posts

    Posted 20 Jul 2018 Link to this post

    Hi Adam,

    I am attaching below a sample and the expected correct result from it. Could you compare the problematic code against it to see if this will help you find the issue? If not, can you modify my sample to showcase the problem?


    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Daniel
    Daniel avatar
    9 posts
    Member since:
    Jul 2014

    Posted 30 Mar Link to this post

    Hi

    I have the same problem on telerik 2018.1.117.45.

    I tried to reproduce Marin's code but I have the same problem => data somehow seems to be multiplied by 1000.....

    <radS:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Web20" Height="600px" Width="1024px">
                                    <Appearance> 
                                        <FillStyle BackgroundColor="#FFFFFF" />                                    
                                    </Appearance>
                                    <Legend>
                                        <Appearance Position="Right" Visible="true">                                        
                                        </Appearance>
                                    </Legend>
                                    <ChartTitle Text="Validation"></ChartTitle>
                                    <PlotArea>
                                        <YAxis MinValue="0" >
                                            <TitleAppearance Text="Count"/>
                                            <MinorGridLines Visible="false"/>
                                            <LabelsAppearance DataFormatString="{0}"/>
                                        </YAxis>
                                        <XAxis DataLabelsField="Users">
                                            <TitleAppearance Text="Operators" Visible="true" />
                                            <LabelsAppearance DataFormatString="{0}"/>
                                            <MajorGridLines Visible="false" />
                                            <MinorGridLines Visible="false"/>
                                        </XAxis>
                                        <Series>
                                            <radS:ColumnSeries Name="A" Stacked="true" DataFieldY="A">
                                                <LabelsAppearance Visible="false" DataFormatString="{0}" />                                            
                                            </radS:ColumnSeries> 
                                            <radS:ColumnSeries Name="B" Stacked="true" DataFieldY="B">
                                                <LabelsAppearance Visible="false" DataFormatString="{0}"></LabelsAppearance>
                                            </radS:ColumnSeries> 
                                            <radS:ColumnSeries Name="C" Stacked="true" DataFieldY="C">
                                                <LabelsAppearance Visible="false" DataFormatString="{0}"></LabelsAppearance>
                                            </radS:ColumnSeries> 
                                            <radS:ColumnSeries Name="D" Stacked="true" DataFieldY="D">
                                                <LabelsAppearance Visible="false" DataFormatString="{0}"></LabelsAppearance>
                                            </radS:ColumnSeries> 
                                            <radS:ColumnSeries Name="E" Stacked="true" DataFieldY="E">
                                                <LabelsAppearance Visible="false" DataFormatString="{0}"></LabelsAppearance>
                                            </radS:ColumnSeries>                                         
                                        </Series>
                                    </PlotArea>
                                </radS:RadHtmlChart>

    The series are for the test filled in the .cs file like this:

    System.Data.DataTable dt = new System.Data.DataTable();
            dt.Columns.Add("Users");
            dt.Columns.Add("A");
            dt.Columns.Add("B");
            dt.Columns.Add("C");
            dt.Columns.Add("D");
            dt.Columns.Add("E");
           
            int i = 1;
    foreach (KeyValuePair<string, OriginData> users in values)
    {
                    dt.Rows.Add(i.ToString(), i * 10, i * 10, i * 10, i * 10, i * 10);
                    i++;
     }

    RadHtmlChart1.DataSource = dt;
    RadHtmlChart1.DataBind();

     

    Is there a problem with RadHtmnChart if the data is provided in a DataTable?

     

  4. Answer
    Daniel
    Daniel avatar
    9 posts
    Member since:
    Jul 2014

    Posted 30 Mar in reply to Daniel Link to this post

    I found the problem:

    Instead of only:

    dt.Columns.Add("Users");
    dt.Columns.Add("A");

    an actual defintion of the datatable colmuns is mandatory:

    dt.Columns.Add(new System.Data.DataColumn("Users", typeof(string)));
    dt.Columns.Add(new System.Data.DataColumn("A", typeof(Int32)));

     

     

  5. Adam
    Adam avatar
    2 posts
    Member since:
    Jul 2018

    Posted 02 Apr in reply to Daniel Link to this post

    Thank you Daniel!
Back to Top