This is a migrated thread and some comments may be shown as answers.

HtmlChart - value multiplied 1000 times when stacking data

4 Answers 25 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 19 Jul 2018, 02:34 PM

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.

 

 

4 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 20 Jul 2018, 11:52 AM
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.
0
Daniel
Top achievements
Rank 1
answered on 30 Mar 2019, 05:22 PM

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?

 

0
Accepted
Daniel
Top achievements
Rank 1
answered on 30 Mar 2019, 05:57 PM

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)));

 

 

0
Adam
Top achievements
Rank 1
answered on 02 Apr 2019, 06:36 PM
Thank you Daniel!
Tags
Chart (HTML5)
Asked by
Adam
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Daniel
Top achievements
Rank 1
Adam
Top achievements
Rank 1
Share this question
or