We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

DrillDown Chart is not working for more than 100 record

Thread ID:

Created:

Updated:

Platform:

Replies:

131770 Jul 26,2017 09:35 AM Aug 1,2017 09:08 AM JavaScript 5
loading
Tags: ejChart
weam ghalab
Asked On July 26, 2017 09:35 AM

container.ejChart(
                    {
                        //Initializing Common Properties for all the series
                        commonSeriesOptions:
                        {
                            type: type,
                            enableAnimation: true,
                            tooltip: { visible: true, format: "#series.name# <br/> #point.x# : #point.y#" },
                            marker:
                            {
                                dataLabel:
                                {
                                    font: { size: '13px', fontFamily: 'Segoe UI', fontStyle: 'Normal', fontWeight: 'regular' },
                                    textPosition: 'top',
                                    horizontalTextAlignment: "near",
                                    visible: true
                                },
                            }
                        },

                        //Initializing Series
                        series:
                        [
                            {
                                points: seriesData.points,
                                name: seriesData.name,
                                //explode: true,
                                //enableAnimation: true,
                                //marker:
                                //{
                                //    dataLabel:
                                //    {
                                //        visible: true,
                                //        //font: { size: '24px', color: "#FFFFFF" }
                                //    }
                                //}
                            }
                        ],
                        load: "loadTheme",
                        isResponsive: true,
                        pointRegionClick: function (sender) {
                            var pointIndex = sender.data.region.Region.PointIndex;
                            TextID.innerHTML = sender.model._visibleSeries[0]._visiblePoints[pointIndex].x;
                            var ID = sender.model._visibleSeries[0]._visiblePoints[pointIndex].ID;
                            if (sender.model.series[0].name == seriesData.name) {
                                if (itemCatID != null)
                                    pieSeriesfunction(container, pieSeriesTitle, null, null, ID, null, null);
                                else if (costCodeID != null)
                                    pieSeriesfunction(container, pieSeriesTitle, null, null, null, ID, null);
                                else if (costType != null) {
                                    var text = sender.model._visibleSeries[0]._visiblePoints[pointIndex].text;
                                    if (text == "DirectTotalCost")
                                        text = "Direct";
                                    else if (text == "MarkUpTotalCost")
                                        text = "MarkUp";
                                    else
                                        text = "InDirect";
                                    pieSeriesfunction(container, pieSeriesTitle, null, null, null, null, text);
                                }
                                else if (statusID != null)
                                    pieSeriesfunction(container, pieSeriesTitle, ID, null, null, null, null);
                                else if (typeID != null)
                                    pieSeriesfunction(container, pieSeriesTitle, null, ID, null, null, null);
                                else
                                    pieSeriesfunction(container, pieSeriesTitle, ID);
                            }
                            SymbolID.style.visibility = "visible";

                        },
                        seriesRendering: function (sender) {
                            if (sender.model.series[0].name != seriesData.name)
                                CategoryID.style.visibility = "visible";
                            else
                                CategoryID.style.visibility = "hidden";
                        },
                        title: { text: maintitle },
                        size: { height: "600" },
                        legend:
                        {
                            visible: true,
                            position: 'right',
                            textOption: { font: { size: '20px' } },
                            itemSize: { height: 10, width: 10 }
                        }
                    });
            if (CategoryID.addEventListener)
                CategoryID.addEventListener('click', function () {
                    container.ejChart("option", { "drilldown": pieSeries(seriesData, maintitle, true) });
                    CategoryID.style.visibility = "hidden";
                    TextID.innerHTML = "";
                    SymbolID.style.visibility = "hidden";
                }, false);
            else
                CategoryID.attachEvent('onclick', function () {
                    container.ejChart("option", { "drilldown": pieSeries(seriesData, maintitle, true) });
                    CategoryID.style.visibility = "hidden";
                    TextID.innerHTML = "";
                    SymbolID.style.visibility = "hidden";
                }, false);
       

Dharanidharan Dharmasivam [Syncfusion]
Replied On July 27, 2017 07:54 AM

Hi Weam, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query with the provided code snippet. We would like to let you know that, it is recommended approach to use data visualization component (Pie chart) when there are less than 20 to 25 points. Pie chart is not good solution for comparing more number of points. If there are more number of data (say for example 50 or 100), then the data label will not be clear and the chart will be clumsy in appearance. So, we recommend to use pie chart when there are less number of data, for more number of data you can use column/bar type series for better visualization. We have prepared a sample with 25 points and now drill down is working properly. 
 
Screenshot before drill down: 
 
Screenshot after drill down: 
 
 
 
Sample for reference can be find from below link. 

Kindly revert us, if you have any other concerns. 

Thanks, 
Dharani. 



weam ghalab
Replied On July 27, 2017 08:11 AM

Thanks for the reply and support 


Dharanidharan Dharmasivam [Syncfusion]
Replied On July 28, 2017 12:26 AM

Hi Weam, 
 
Thanks for your update. 
 
Kindly revert us, if you need further assistance. 

Dharani. 



weam ghalab
Replied On July 31, 2017 06:07 AM

this error appear when click on the category to get  back to the original data without complete its circular animation  how can i add the category/symbol/text after it complete rendering the data to prevent any interfere during it

Cannot read property 'id' of undefined

    at Object.circularAnimationComplete (ej.chart.min.js:10)

    at SVGPathElement.complete (ej.chart.min.js:10)

    at SVGPathElement.d.complete (jquery-2.2.4.min.js:3)

    at i (jquery-2.2.4.min.js:2)

    at Object.fireWith [as resolveWith] (jquery-2.2.4.min.js:2)

    at i (jquery-2.2.4.min.js:3)

    at n.fx.tick (jquery-2.2.4.min.js:3)


Dharanidharan Dharmasivam [Syncfusion]
Replied On August 1, 2017 09:08 AM

Hi Weam, 

Thanks for your update. 

We have analyzed your query. Find the response for your queries below. 

Queries 
Response 
this error appear when click on the category to get  back to the original data without complete its circular animation 
We have tried to replicate the reported issue, but unfortunately the reported scenario is not occurred at our end. Sample used for testing can be find from below link. 


In the above sample after drill down and before animation completes, we have clicked on the category to go back to original data, its working properly at our end. Since we are not aware of your exact scenario, we would like to know the following details, which will be helpful in further analysis and provide you the solution sooner. 

  • Modify the attached sample or provide your sample with replication steps.
  • Browser with version in which the issue is reproduced.
  • Current version of Essential Studio you are using.

 how can i add the category/symbol/text after it complete rendering the data to prevent any interfere during it 
If you need to add symbol to the drill down chart, then you can achieve this using seriesRendering event of drill down chart and for text, you can use displayTextRendering event. In this event you can customize the text with respect to your requirement. We have prepared a sample in which on drill down we have changed the shape of data label and customized the text as depicted below. You can change this with respect to your scenario. 

JS: 

$("#container").ejChart( 
            { 
                //... 
                pointRegionClick: 'onclick', 
}); 
 
function onclick(sender) { 
         //... 
         $("#container").ejChart("option", { "drilldown": pieSeries(pointIndex) }); 
  } 
 
function pieSeries(index) { 
          //... 
          //Specified events in drill down chart 
          else{ 
                 return { 
                              seriesRendering: function (sender) { 
                                   sender.data.series.marker.dataLabel.shape = "rectangle"; 
                                   document.getElementById("category").style.visibility = "visible"; 
                                }, 
                              displayTextRendering: function (sender) { 
                                           sender.data.text = "Y: " + sender.data.text; 
                              }, 
                  } 
         } 
} 


Screenshot before drill down: 
 

Screenshot after drill down: 
 

Sample for reference can be find from below link. 




Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;