IE 8 has issues displaying lots of data points of small size in pie charts

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    2 posts
    Member since:
    Feb 2012

    Posted 20 Nov 2012 Link to this post

    This is the code I used.  It works fine in IE9, but IE8 can't handle it:

       

    var data = [{
                "category": "Test",
                "value": 150,
                "percentage": "85%"
            },
            {
                "category": "Test0",
                "value": 5,
                "percentage": "5%"
            },
            {
                "category": "Test1",
                "value": 1,
                "percentage": "0.1%"
            },
            {
                "category": "Test2",
                "value": 1,
                "percentage": "0.1%"
            },
            {
                "category": "Test3",
                "value": 1,
                "percentage": "0.1%"
            },
             {
                 "category": "Test4",
                 "value": 1,
                 "percentage": "0.1%"
             },
              {
                  "category": "Test5",
                  "value": 1,
                  "percentage": "0.1%"
              },
               {
                   "category": "Test6",
                   "value": 1,
                   "percentage": "0.1%"
               },
                {
                    "category": "Test7",
                    "value": 1,
                    "percentage": "0.1%"
                },
             ];
     
            $("#divChartByPublisher").kendoChart({
                theme: "default",
                title: {
                    text: "Opportunities by Publisher"
                },
                legend: {
                    position: "left",
                    labels: {
                        template: "#= dataItem.label # (#= value #) - #= dataItem.percentage #%"
                    }
                },
     
                dataSource: {
                    data: data
                },
                series: [{
                    type: "pie",
                    field: "value",
                    categoryField: "category"
                }],
     
                seriesColors: chartColors,
     
                tooltip: {
                    visible: true,
                    template: "#= category # (#= value #)"
                }
            });

  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 21 Nov 2012 Link to this post

    Hi Daniel,

    I think that you have an extra comma in you array. Could you please validate your javascript code here and if the problem persists do not hesitate to write back again.

    Kind regards,
    Hristo Germanov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Daniel
    Daniel avatar
    2 posts
    Member since:
    Feb 2012

    Posted 21 Nov 2012 Link to this post

    Ah, this is weird.  I was using:

    for (var i in list)

    // Add to array

    For some reason, this added a null item to the array... When I switched to:

    for (var i = 0; i < list.length; i++)

    it worked just fine...

Back to Top