Pie Chart Legend Issue

8 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 15 Apr 2013 Link to this post

    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>
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 16 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 16 Apr 2013 Link to this post

    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
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 19 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 19 Apr 2013 Link to this post

    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

  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 23 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 23 Apr 2013 Link to this post

    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
  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 26 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017