This is a migrated thread and some comments may be shown as answers.

TypeError: chart._chartConfig is undefined

2 Answers 49 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 2
Jason asked on 02 Apr 2015, 08:57 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 03 Apr 2015, 06:22 AM
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.

 
0
Jason
Top achievements
Rank 2
answered on 07 Apr 2015, 06:22 AM

Thanks Danail.

It worked perfectly.

Tags
Chart (HTML5)
Asked by
Jason
Top achievements
Rank 2
Answers by
Danail Vasilev
Telerik team
Jason
Top achievements
Rank 2
Share this question
or