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

Problems displaying chart from SQLDatasource

5 Answers 92 Views

Chart (HTML5)

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

BSolveIT asked on 22 May 2015, 07:43 AM

I have a SQLDatasource which uses a query to make a join across databases. The data returned is should be used to create the bar chart. However, no matter what I do, it fails to display anything.

As a check that the sqldatasource is fetching the data, I'm also binding it to radgrid on the page. The grid is working just fine and showing all the data. However the chart shows nothing.

The main parts from my page:-

<p>

<asp:DropDownList ID="PocList" runat="server" AutoPostBack="True" DataSourceID="LinqDataSource1" DataTextField="outlet_name" DataValueField="outlet_id"></asp:DropDownList>

</p>

<p>

<asp:DropDownList ID="MonthList" runat="server" AutoPostBack="true">

<asp:ListItem Value="1" Text="January"/>

<asp:ListItem Value="2" Text="February"/>

<asp:ListItem Value="3" Text="March"/>

<asp:ListItem Value="4" Text="April"/>

<asp:ListItem Value="5" Text="May"/>

<asp:ListItem Value="6" Text="June"/>

<asp:ListItem Value="7" Text="July"/>

<asp:ListItem Value="8" Text="August"/>

<asp:ListItem Value="9" Text="September"/>

<asp:ListItem Value="10" Text="October"/>

<asp:ListItem Value="11" Text="November"/>

<asp:ListItem Value="12" Text="December"/>

</asp:DropDownList>

</p>

<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="WebApplication1.RewardsDataClassesDataContext" EntityTypeName="" OrderBy="outlet_name" Select="new (outlet_id, outlet_name)" TableName="outlet_accounts">

</asp:LinqDataSource>

<telerik:RadHtmlChart ID="PocChart" runat="server" DataSourceID="SqlDataSource1" >

<PlotArea>

<Series>

<telerik:ColumnSeries DataFieldY="totalValue">

<TooltipsAppearance Color="White" DataFormatString="${0}"></TooltipsAppearance>

</telerik:ColumnSeries>

</Series>

<XAxis DataLabelsField="brandname">

<LabelsAppearance RotationAngle="75"/>

<MajorGridLines Visible="false"/>

<MinorGridLines Visible="false"/>

</XAxis>

<YAxis>

<LabelsAppearance DataFormatString="${0}"></LabelsAppearance>

<TitleAppearance Text="Total Points Value"></TitleAppearance>

<MinorGridLines Visible="false"></MinorGridLines>

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GroupPanelPosition="Top">

<MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1">

<Columns>

<telerik:GridBoundColumn DataField="month" DataType="System.Int32" FilterControlAltText="Filter month column" HeaderText="month" SortExpression="month" UniqueName="month">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="brand_id" DataType="System.Int32" FilterControlAltText="Filter brand_id column" HeaderText="brand_id" SortExpression="brand_id" UniqueName="brand_id">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="brandname" FilterControlAltText="Filter brandname column" HeaderText="brandname" SortExpression="brandname" UniqueName="brandname">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="value" DataType="System.Int32" FilterControlAltText="Filter value column" HeaderText="value" ReadOnly="True" SortExpression="value" UniqueName="value">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:Appreciation_WarehouseConnectionString %>" SelectCommand="SELECT omba.month, omba.brand_id, bd.brand_name AS brandname, SUM(omba.total_value) AS totalValue FROM outlet_month_brand_aggregation AS omba INNER JOIN appreciation_rewards.dbo.brand AS bd ON omba.brand_id = bd.brand_id WHERE (omba.outlet_id = @oid) AND (omba.month = @month) GROUP BY omba.brand_id, omba.month, bd.brand_name ORDER BY omba.month, brandname">

<SelectParameters>

<asp:ControlParameter ControlID="PocList" DefaultValue="6782" Name="oid" PropertyName="SelectedValue" Type="Int32" />

<asp:ControlParameter ControlID="MonthList" DefaultValue="1" Name="month" PropertyName="SelectedValue" Type="Int32" />

</SelectParameters>

</asp:SqlDataSource>

5 Answers, 1 is accepted

answered on 26 May 2015, 06:53 AM

Hello,

It seems that there is something wrong with the returned data. What I can suggest is that you do the following:
    - Display the y-values of the chart (i.e., the totalValue field) on the grid, to see any invalid values.
    - Check for the existence of any JavaScript errors on the page. If there are such errors they should be found and fixed.
    - Export the problematic chart's data source to an xml file or a data table and provide it back to us, so that we can run the code, reproduce the issue and provide a reliable solution if possible.

Regards,
Danail Vasilev
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 26 May 2015, 10:07 AM

Hi Danail

Ahaaa!! I had bound the data already to a grid with no problems, which was why I just couldn't see what the problem was. I also exported the data and was preparing to post it here with a begging "Help?" message. However, I've now discovered what the problem is. There's additional non displaying characters in one of the data fields. A string field. I'm assuming it's CR and/or LF characters. Interestngly though, the radgrid had no problem working with that data, but the chart couldn't deal with it.

Still, at least I know now what was going wrong and I'm on the right tracks now.

Many thanks for taking a look at it for me. Maybe worth investigating why RadGrid could cope with binding to data like that, but not the chart?

Thanks again!

Mark

answered on 27 May 2015, 08:17 AM

Hello Mark,

I am glad you have managed to find the cause of the issue.

As for the invalid data - the chart requires that you have passed numeric data for the y values because it draws the shapes/lines based on that numeric data. Passing invalid numeric data will break the drawing. The grid on the other side just displays the passed data without involving any additional drawing, therefore it is expected for it to display the passed data.

Regards,
Danail Vasilev
Telerik

answered on 28 May 2015, 08:20 AM

Hi Mark,

Thank you for the clarification.

Generally the RadHtmlChart's labels render as text SVG elements. As long as the text element of SVG allows such symbols they will be rendered.

On a side note - if you need to line break a label in the chart you can use the '\n' line feed character, as per this online demo (http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/multiline-labels/defaultcs.aspx).

Regards,
Danail Vasilev
Telerik

Mark

commented on 30 Aug 2022, 02:00 PM

Is there a list of known characters that won't work in a text SVC element? I found out today that & is apparently bad, and replacing it with & doesn't fix the issue. It would be really helpful for the chart to either remove these characters when it renders, or throw an error when an invalid character is used. These can be really tricky to troubleshoot.

Rumen

commented on 01 Sep 2022, 01:16 PM | edited

Hi Mark,

Along with the ampersand symbol, such characters are also the < and > brackets and the ' and " quotes.

You can find useful tips in these resources:

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Problems displaying chart from SQLDatasource

5 Answers, 1 is accepted