I was looking at this sample (https://www.igniteui.com/data-chart/overview) which demonstrates the various Category Series available in the chart control. I have a similar scenario, where the user will select the chart types they want to see. I tried to add bar chart to that dropdown but the code didn't support that. Is there any reason behind this.
Thanks
Guru
Hi, Guru
The reason you cannot achieve this by simply setting the series type to 'bar' in the 'Category Series' sample is that the bar series is different from the other category series types. It requires the y-axis to be the category axis and the x-axis to be the numeric axis. All other category series require the opposite: x-axis to be category and y-axis to be numeric.
You can take a look at the Bar and Column Series sample where bar chart is generated.
If you want to switch from other category series types to bar chart you will have to replace the 'axes' objects passed to the chart in addition to changing the chart series. You need to set the axis objects something like this:
Cheers, Lazar
Hi Lazar,
Thanks for your reply. I saw the difference and this is what I was trying. I created a page with a div called "Chart". I created a dropdown which has Bar and Column as values. Whenever the dropdown is selected, I change the chart type dynamically along with the axes as needed by each chart type and I am trying to render the chart again. But still I am not able to accomplish this behaviour.
Please let me know if there is anyother issue related to this scenario.
You can use the Bar and Column Series sample as an example how to switch between bar an column series. Basically, it defines two divs and creates two charts: one column, and the other bar on the two divs. Then upon selecting a chart type from the drop-down it hides one of the divs and shows the other.
Please, investigate this solution. It is possible to remove all axes and series objects and define the again, and thus achieve the same functionality with only one div and chart object but it is more complicated. If you wish I can provide you such an example.
Another alternative is to remove the axes and add new axes to the chart when the type is switched to bar. You can remove an axis from the chart by doing somethign like this, given that your chart container has an id chart1, and the axis you are trying to remove is called xAxis
$("#chart1").igDataChart("option", "axes", [{ name: "xAxis", remove: true }]);
let me know how that goes.
-Graham