Pie Chart Legend Issue

[Jon]

Hi,

When using the pie chart I get very small indicators on the legend - the following code has my database driven pie chart on top and a modified version of the sample below it.  The bottom chart shows little square blocks to the left of the legend.  The database driven chart on the top shows tiny blocks - you may need to zoom to see them....

I assume this is a bug?

Regards

Jon

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Width="765px" Height="135px" Transitions="true" Skin="Forest" DataSourceID="SqlDataSource1" >
    <PlotArea >
        <Series>
            <telerik:PieSeries DataFieldY="TaskCount" NameField="TaskType" ></telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="765px" Height="135px" Transitions="true" Skin="Forest" >
    <PlotArea >
        <Series>
            <telerik:PieSeries  >
                <Items>
                    <telerik:SeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Internet Explorer" YValue="18.3"></telerik:SeriesItem>
                    <telerik:SeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Firefox" YValue="35.8"></telerik:SeriesItem>
                    <telerik:SeriesItem BackgroundColor="#999999" Exploded="false" Name="Chrome" YValue="38.3"></telerik:SeriesItem>
                    <telerik:SeriesItem BackgroundColor="#666666" Exploded="false" Name="Safari" YValue="4.5"></telerik:SeriesItem>
                    <telerik:SeriesItem BackgroundColor="#333333" Exploded="false" Name="Opera" YValue="2.3"></telerik:SeriesItem>
                </Items>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

[Danail Vasilev]

Hello Jon,

I have tried to reproduce your issue with the provided code snippet but to no avail. You can watch a short video with the test here and then tell if I am missing something. The only modifications I have made to your code are as follow:

• Set new datasource to RadHtmlChart with id RadHtmlChart2, as I do not have SqlDataSource1.
• Increased the width of both RadHtmlCharts, due to a known issue with the cutting of the PieSeries' labels due to their size.

There seems to be an issue with the databound PieSeries, which have already been resolved since Q3 2012. I can suggest you to check the version of RadControls in your web site and if it is not the newest one, upgrade to the latest one (version 2013.1.403). You can check RadControls version by right clicking on the web page and choose ViewPageSource. Then you can search for a comment tag "<!--" where is located the current version.

It is also possible that there are missing values for the labels field - TaskType, so that there are PieSeries Items without labels.

If the above steps, however, does not help could you please try to reproduce the unexpected behavior with the attached VS sample and then tell us what changes you have made, so that we can make an investigation further?

Regards,
Danail Vasilev
the Telerik team

[Jon]

Hi Danail.

No it's the latest version that I use.

I've just created a 3rd sample chart on the page and integrated your manual data creation via the code behind.  This one works .  It looks like the issue is being caused by the fact that a sql data source is being used.....  I've attached a screen shot for you, first image in it is my one with the problem,  second is yours from your example and third is the one from the main demo on the site...

If you could try putting your sample data into a database and try the sql approach you should see the 1st chart....

Regards

Jon

[Danail Vasilev]

Hi Jon,

The unexpected behavior you are having is new to us. I have tried to reproduce it with a SQL datasource but to no avail. You can watch a short video with the test here.

From the provided snap shot, it seems that the PieSeries has six items - five items are displayed properly, while the sixth one has just a label that gets out of the dark green item. It might be possible that this sixth item has an invalid YValue or Name. For example if the last item has '<' symbol in its name, this will reproduce your issue.

Note that the HtmlChart renders entirely on the client-side, so special symbols in labels or names need to be escaped for the JavaScript. You can find useful Handling Special Symbols that shed more light on the matter.

You can also inspect what data has been passed to the RadHtmlChart by right clicking on the page and then select ViewPageSource. In the $create() statement, located at the bottom of the page source, are stored the settings of the HtmlChart. You can investigate the "_dataSource" object which stores the data from the datasource. I have also demonstrated how to check that at the end of the recorded video.


Greetings,
Danail Vasilev
the Telerik team

[Jon]

Hi Danail,

Thanks for that.  The key is in looking for the $create statement.  Breaking the data into chunks I saw straight away that one was null.... The SQL didn't change nulls into a proper string.

A tricky one to handle but at least anyone else with the same issue will have a simple solution.

This kind of raises another issue.  Short of doing it in the database is there a way to have a limit on the entries in the chart with all else going into an Other category, using your browser chart as an example

ItemLimit = 3
Chrome
Firefox
Internet Explorer
Others 

Where others would be a combo of safari and opera. Then for a large data set there wouldn't be a fear of the elements going beyond the bounds of the chart...

Regards

Jon

[Danail Vasilev]

Hi Jon,

A databound RadHtmlChart plots the exact data from the datasource that has been referenced. There is not an embedded filter in the RadHtmlChart, so that the desired functionality is not available neither. You can, however, do the desired filtering manipulation in the datasource which is to be databound.

Another approach could be to use the client-side events of the RadHtmlChart, so that you can get the datasource on the client, modify it and then simply rebind and repaint the chart. You can find an example on how to do that in Client-side API help article as well as in HtmlChart - Client-side Binding online demo.

Greetings,
Danail Vasilev
the Telerik team

[Jon]

Hi Danail,

Yes I was thinking of having a server side routine that could pull the data into a dataset then change it for the chart taking the top x and setting rest to other.  I can then reuse that on other pie charts.  

Similar thinking for the line charts etc where I need more dynamic series than the charts can cope with.  Have somne mechanism acting as middle ground between the DB and the client.  Otherwise it's a lot of complex DB calls.

Best Regards

Jon

[Danail Vasilev]

Hi Jon,

Data filtering depends on the particular datasource that is to be databound. For example, if you want to filter an ObjectDataSource, you can dynamically pass to it a parameter, taken from a textbox or a dropdown. Then this parameter can be used further in filtering by using it in the ObjectDataSource method responsible for returning the actual data.

I have modified HtmlChart - ObjectDataSource online demo, in order to demonstrate how to filter dynamically the ObjectDataSource which is databound to the HtmlChart. Please find the example in the attached archive.


All the best,
Danail Vasilev
the Telerik team

[Kasim]

The sample code attached here is not working also the demo does not have filter option. Can you please share working code sample?

[Vessy]

Hi Kasim,

I tested the attached by Daniel project but it is working properly on my side with the latest version of the controls. What are the exact error you are facing? For convenience, I am attaching a fully runnable project containing the attached code - can you test it and see if it is working for you?

Regards,
Vessy
Progress Telerik

[Kasim]

Hi Vessy,

Getting exception message:

System.Data.SqlClient.SqlException
  HResult=0x80131904
  Message=The database 'C:\PROJECTS\POC\RADHTMLCHART-DATASOURCE-FILTER\RADHTMLCHART-DATASOURCE-FILTER\APP_DATA\TELERIK.MDF' cannot be opened because it is version 852. This server supports version 782 and earlier. A downgrade path is not supported.
Could not open new database 'C:\PROJECTS\POC\RADHTMLCHART-DATASOURCE-FILTER\RADHTMLCHART-DATASOURCE-FILTER\APP_DATA\TELERIK.MDF'. CREATE DATABASE is aborted.
An attempt to attach an auto-named database for file C:\Projects\POC\RadHtmlChart-DataSource-Filter\RadHtmlChart-DataSource-Filter\App_Data\Telerik.mdf failed. A database with the same name exists, or specified file cannot be opened, or it is located on UNC share.
  Source=.Net SqlClient Data Provider
  StackTrace:
   at Vehicle.GetVehicleRatings(Int32 numItems) in c:\Projects\POC\RadHtmlChart-DataSource-Filter\RadHtmlChart-DataSource-Filter\App_Code\Vehicle.cs:line 18

[Vessy]

Hi Kasim,

Version 852 is SQL Server 2016, so the thrown error usually indicates that the SQL Server version on the machine where the database is created is higher than the SQL Sever on your end. I am attaching a script of the Telerik DB so you can create a data base from it with the needed by your system version.

Regards,
Vessy
Progress Telerik