Hello
I experienced some weird behaviours on refreshing chart. At the bottom of this message you find a fully working sample showing those weird behaviours. Some appearing effects are unpredictable. All over there is no error message in the console.log.
There are two categories in the column chart you can switch by using the two buttons at bottom of the chart. By default category 1 with 11 columns while max 8 will be displayed. Category 2 has one column. You can pan the chart (required for category 1 to show hidden ones).
Case 1:
Sliding category 1 to the most right shows a placeholder after column K (probably for the column in category 2).
Case 2:
Switch between category 1 and 2: works fine even tough the column of category 2 is not centered. As soon as you try to pan the column in category 2 it gots resized and centered. Furthermore you can move (pan) the column in category 2 out of the chart on the right side.
Case 3:
Slide to the right side (most right column) in category 1. Now switch to category 2: You will not see the column of it and the value axis is set to : 0, 0.2, 0.4, ...
You can move the column of category 2 into the chart by pressed mouse button while move it to the right. You see the column appearing. If you drag the column over the middle of the chart it disappears right away. If you move the column out of the chart on the right side the whole chart disappears sometimes or won't reappear
Tested in Chrome, Firefox and Safari (all on Mac), all with the described behaviours.
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link href="http://kendo.cdn.telerik.com/2019.3.917/styles/kendo.common.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="http://kendo.cdn.telerik.com/2019.3.917/js/kendo.all.min.js"></script></head><script> $(document).ready(function () { var dataList = [ // Category 1 { 'cat1': 'A', 'value': 1 }, { 'cat1': 'B', 'value': 7 }, { 'cat1': 'C', 'value': 2 }, { 'cat1': 'D', 'value': 8 }, { 'cat1': 'E', 'value': 5 }, { 'cat1': 'F', 'value': 2 }, { 'cat1': 'G', 'value': 9 }, { 'cat1': 'H', 'value': 3 }, { 'cat1': 'I', 'value': 7 }, { 'cat1': 'J', 'value': 4 }, { 'cat1': 'K', 'value': 1 }, // Category 2 { 'cat2': 'L', 'value': 5 } ]; $("#chart").kendoChart({ dataSource: { data: dataList }, series: [{ type: "column", aggregate: "sum", field: "value", categoryField: "cat1" }], pannable: { lock: "y" }, categoryAxis: { min: 1, max: 8, majorGridLines: { visible: false } } }); }); // Switch category (over buttons) function showCategory (category) { var chart = $("#chart").data("kendoChart"); chart.options.series[0].categoryField = category; chart.refresh(); }</script><body><div id="chart" style="width: 1000px;"></div><button id="cat1" type="button" onclick="showCategory('cat1');">Show category 1</button><button id="cat2" type="button" onclick="showCategory('cat2');">Show category 2</button></body></html>
Am I missing something or is there anything I can do/set to avoid these "glitches" before refreshing the chart?
Regards
4 Answers, 1 is accepted
Hi Tayger,
Thank you for the provided project along with clarifications on the scenario.
Generally, the zoom problem stems from the fact that the minimum of the category axis is configured for one. Therefore, switching to zero for the single item category would partially solve the issue.
function showCategory (category) {
var chart = $("#chart").data("kendoChart");
if(category=="cat2"){
chart.options.categoryAxis.min = 0;
} else {
chart.options.categoryAxis.min = 1;
}
chart.options.series[0].categoryField = category;
chart.refresh();
}For each of the items, there is a section rendered, the value axis would automatically adjust when there is an item with a 0 value. In order to have consistent behavior, I would recommend setting the following:
valueAxis: {
max: 10
},As per the issue with having multiple sections in the second category and having one additional when the first category is selected, the best solution would be to simply have two different data collections. This is due to the fact for each of the items, there would be an element rendered. Even though there are no values for the corresponding category. This functionality is initiated in order to have the opportunity of showing several axes displayed at once.
I hope you find these clarifications helpful.
Best regards,
Tsvetomir
Progress Telerik
Rank 1
Iron
Hello Tsvetomir
Thank you for the appreciated input. I have tried your your option settings but sadly didn't help, so that the same behaviours came up.
Creating different sources for each category seems to me also to be the best/proper solution. The weird thing here is that it won't switch from the first displayed category to the second category. The initial set category will be displayed again. It seems to be the same problem as I've found here.
I have adjusted my previous example to two data sources. If you press the button for Category 2 you will see that the chart will be refreshed but still displays Category 1.
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link href="http://kendo.cdn.telerik.com/2019.3.917/styles/kendo.common.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="http://kendo.cdn.telerik.com/2019.3.917/js/kendo.all.min.js"></script></head><script> // Category 1 var cat1 = [ { 'cat': 'A', 'value': 1 }, { 'cat': 'B', 'value': 7 }, { 'cat': 'C', 'value': 2 }, { 'cat': 'D', 'value': 8 }, { 'cat': 'E', 'value': 5 }, { 'cat': 'F', 'value': 2 }, { 'cat': 'G', 'value': 9 }, { 'cat': 'H', 'value': 3 }, { 'cat': 'I', 'value': 7 }, { 'cat': 'J', 'value': 4 }, { 'cat': 'K', 'value': 1 } ]; // Category 2 var cat2 = [ { 'cat': 'L', 'value': 5 } ]; $(document).ready(function () { $("#chart").kendoChart({ dataSource: { data: cat1 }, series: [{ type: "column", aggregate: "sum", field: "value", categoryField: "cat" }], pannable: { lock: "y" }, categoryAxis: { min: 1, max: 8, majorGridLines: { visible: false } } }); }); // Switch category (over buttons) function showCategory (category) { var chart = $("#chart").data("kendoChart"); chart.dataSource.read( category ); // Seems not to be necessary as I've found in another forum entry // chart.refresh(); }</script><body><div id="chart" style="width: 1000px;"></div><button id="cat1" type="button" onclick="showCategory('cat1');">Show category 1</button><button id="cat2" type="button" onclick="showCategory('cat2');">Show category 2</button></body></html>
I assume I have forgotten something very simple in order to make it work. Any hints are appreciated.
Rank 1
Iron
All problems solved. I put it here for anyone else having similar troubles.
Refresh chart
.read() may work on a true KendoUI datasource. If the datasource is an array use this to refresh the chart:
var chart = $("#yourChartId").data("kendoChart");...chart.setDataSource( yourArraySource );
Setting min/max of CategoryAxis
Furthermore I have now a better understanding of min and max as options of categoryAxis. The API explanation is a bit short about it: With the min/max options you do not only define how many chart elements (columns, bars, etc.) you want to display but also if you initially show them from left or right (if there are more elements than you want to display while "pannable" is activated.
Example for initially showing chart elements at top right:
min: sourceArray.length - amount of elements to display
max: sourceArray.length
If the min value is smaller than zero it should be set to zero.
Example for initially showing chart elements at top left:
min: 0
max: amount of elements to display
If there are less elements than "amount of elements to display" set it to sourceArray.length
This all presumes that you know the amount of elements per category in your sourceArrays(s). If you f.e. have more than one array element with/for the same chart category and you let it "aggregate" inside the chart then you won't know/have the proper amount of elements per array. That leads to a pre-aggregation (by category) of all elements in the sourceArray(s).
With these rules I could set my chart as I wanted and it works like a charm!
Regards
Hi,
Thank you for taking the time to share your findings with our community. The setDataSource() method would attach a new data source to the existing chart. In the context of having local binding to an array of items the following could be used as an alternative:
$("#chart").getKendoChart().dataSource.data(<-- pass the array here -->)In case further issues arise, let me know.
Best regards,
Tsvetomir
Progress Telerik