igFinancialChart get and set properties

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js-data/Data"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.financialchart.css" rel="stylesheet"></link>

<div id="chart" style="width:98%;height:400px"></div>
<button id="btnGet" style="margin:1rem;">Get ChartType</button>
<button id="btnSetCandle">Set ChartType To Candle</button>
<button id="btnSetBar">Set ChartType To Bar</button>

JavaScript

$(function () {
            //data
            var data = PriceData.AMZN();
            
            //initialize igFinancialChart
            $("#chart").igFinancialChart({
                dataSource: data,
                chartType: "bar",
                zoomSliderType: "bar",
                propertyChanged: function (evt, ui) {
                		console.log('propertyChanged:');
                    console.log(evt);
                    console.log(ui);
                }
            });
            
            //get chartType
            $("#btnGet").igButton({
                labelText: $("#btnGet").val(),
                click: function (e)
                {
                		console.log('Get chartType:');
                    console.log($("#chart").igFinancialChart("option", "chartType"));
                }
            });
            
            //set chartType to candle
            $("#btnSetCandle").igButton({
                labelText: $("#btnSetCandle").val(),
                click: function (e)
                {
                		console.log('Set chartType:');
                    $("#chart").igFinancialChart("option", "chartType", "candle");
                }
            });
            
            //set chartType to bar
            $("#btnSetBar").igButton({
                labelText: $("#btnSetBar").val(),
                click: function (e)
                {
                		console.log('Set chartType:');
                    $("#chart").igFinancialChart("option", "chartType", "bar");
                }
            });
            
            //get the button that set chartType
            const buttonChartType = document.getElementsByClassName("financialChartTypePickerDropDownButton")[0];
            
            //add click event listener to the chartType button
            buttonChartType.addEventListener("click", function() {
              
              setTimeout(() => {
              	//get bar option
  							var bar =...