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>
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>