TypeError: chart._chartConfig is undefined

3 posts, 1 answers
  1. Jason
    Jason avatar
    9 posts
    Member since:
    Aug 2009

    Posted 02 Apr 2015 Link to this post

    We just upgraded our site from v2013.1.220.40 to 2015.1.401.45 and we are now getting the following error when the chart is updated.
     
    TypeError: chart._chartConfig is undefined
    var xAxisItems = chart._chartConfig.categoryAxis.categories;
    ----^

    please can anyone give me a clue on how to fix this?

    Thanks.

    <telerik:RadCodeBlock ID="RadProductGrowthCodeBlock" runat="server">
        <script type="text/javascript">
            var ProductGrowth = function() {
                return {
                    PageLoad: function() {
                        this.showChartLoading();

                        var cmb = $find('<%= cmbProduct.ClientID %>');
                        if (cmb) {
                            var selectedValue = cmb._value;
                            if (!selectedValue) {
                                selectedValue = cmb._itemData[0].value;
                            }
                            Nimbis.Website.Private.Dashboard.CustomControl.GetProductGrowthSummaryData(selectedValue, this.updateChart);
                        }
                    },
            
                    updateChart: function(result) {
                        var chart = $find('<%= ProductGrowthChart.ClientID %>');
                
                        if (chart) {
                            var xAxisItems = chart._chartConfig.categoryAxis.categories;
                            // A placeholder item has been created in order to create the category element. This is done to enable us to amend the element client side
                            // Here we delete the temporary placeholder and any other elements that might exist in order to add new items
                            xAxisItems.splice(0, xAxisItems.length);

                            chart.set_dataSource(result);

                            result.forEach(function(item) {
                                chart._chartConfig.categoryAxis.categories.push(item.Period);
                            });

                            chart.repaint();
                        }

                        ProductGrowth.hideChartLoading();
                    },
            
                    ProductChange: function(sender, eventArgs) {
                        ProductGrowth.showChartLoading();
                        Nimbis.Website.Private.Dashboard.CustomControl.GetProductGrowthSummaryData(sender._value, ProductGrowth.updateChart);
                    },
            
                    showChartLoading: function() {
                        var loadingPanel = $find('<%= ProductGrowthLoadingPanel.ClientID %>');
                        if (loadingPanel) {
                            $find('<%= ProductGrowthLoadingPanel.ClientID %>').show('<%= ProductGrowthChart.ClientID %>');
                        }
                    },

                    hideChartLoading: function() {
                        var loadingPanel = $find('<%= ProductGrowthLoadingPanel.ClientID %>');
                        if (loadingPanel) {
                            $find('<%= ProductGrowthLoadingPanel.ClientID %>').hide('<%= ProductGrowthChart.ClientID %>');
                        }
                    }
                };
            }()
        </script>
    </telerik:RadCodeBlock>

                <telerik:RadHtmlChart ID="ProductGrowthChart" runat="server" Height="280px">
                    <ChartTitle>
                    <Appearance>
                    <TextStyle FontSize="16px"></TextStyle>
                    </Appearance>
                    </ChartTitle>
                    <PlotArea>
                        <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside" Reversed="false">
                            <LabelsAppearance RotationAngle="15"></LabelsAppearance>
                            <Items>
                                <telerik:AxisItem LabelText=""></telerik:AxisItem>
                            </Items>
                        </XAxis>
                        <Series>
                            <telerik:LineSeries DataFieldY="Amount" ColorField="Color">
                            </telerik:LineSeries>
                        </Series>
                    </PlotArea>
                </telerik:RadHtmlChart>
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 03 Apr 2015 Link to this post

    Hello Jason,

    You should use the following code:

    $find("ctl00_ContentPlaceholder1_ColumnChart").get_kendoWidget().options.categoryAxis.categories

    You can test the above code by executing it in the console when opening this demo - http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/columnchart/defaultcs.aspx

    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jason
    Jason avatar
    9 posts
    Member since:
    Aug 2009

    Posted 07 Apr 2015 in reply to Danail Vasilev Link to this post

    Thanks Danail.

    It worked perfectly.

Back to Top