Available in the Full Version

Financial Chart - Axis Settings

This sample demonstrates some axis settings of the Financial Chart control.
Axis Settings

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/modules/infragistics.ui.chart.css" />
    <link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/modules/infragistics.ui.financialchart.css" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>

    <script src="/data-files/MultiData.js" type="text/javascript"></script>
    
    <style type="text/css">
        .sliderBounds {
            width: 150px;
            margin: 6px 3px 6px 6px;
            display: inline-block;
        }
        .selectBounds {
            width: 100%;
            margin: 5px 5px 5px 5px; 
        }
        .optionContainer {
            width: 200px;
            height: 80px;
            margin: 2px;
            padding: 2px;
            display: inline-block;
            /*border: 1px solid #e0e0e0;*/
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
        }
    </style>

</head>
<body>

    <div id="chart" style="width:98%;height:500px"></div>
    
    <div style="width:98%;height:300px">
        <fieldset id="chartOptions">
            <legend>Axis Settings</legend>

            <table>
                <tr> 
                    <td>
                        <div class="optionContainer">
                            <label>X-Axis Mode</label>
                            <select id="xAxisMode" class="selectBounds">
                                <option value="ordinal">Ordinal</option>
                                <option value="time">Time</option>
                            </select>
                        </div>
                    </td> 
                         
                    <td>
                        <div class="optionContainer">
                            <label>X-Axis Label Visibility</label>
                            <select id="xAxisLabelVisibility" class="selectBounds">
                                <option value="visible">Visible</option>
                                <option value="collapsed">Collapsed</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <div class="optionContainer">
                            <label>X-Axis Label Angle</label>
                            <div id="xAxisLabelAngleSlider" class="sliderBounds"></div>
                            <label id="xAxisLabelAngle">0</label>
                        </div>
                    </td>                     
                </tr>
                <tr>

                    <td>
                        <div class="optionContainer">
                            <label>Y-Axis Mode</label>
                            <select id="yAxisMode" class="selectBounds">
                                <option value="numeric">Numeric</option>
                                <option value="percentChange">Percent Change</option>
                            </select>
                        </div>
                    </td>

                    <td>
                        <div class="optionContainer">
                            <label>Y-Axis Label Visibility</label>
                            <select id="yAxisLabelVisibility" class="selectBounds">
                                <option value="visible">Visible</option>
                                <option value="collapsed">Collapsed</option>
                            </select>
                        </div>
                    </td>

                    <td>
                        <div class="optionContainer">
                            <label>Y-Axis Label Angle</label>
                            <div id="yAxisLabelAngleSlider" class="sliderBounds"></div>
                            <label id="yAxisLabelAngle">0</label>
                        </div>
                    </td> 

                </tr>
            </table>              
        </fieldset>
    </div>

    <script>
        $(function () {
            var stocks = []; 
            stocks.push(StockData.AMZN());
            stocks.push(StockData.GOOG());

            $("#chart").igFinancialChart({
                dataSource: stocks,
                zoomSliderType: "none", 
                volumeType: "line", 
                xAxisMode: "ordinal",
                yAxisMode: "numeric",
                xAxisLabelVisibility: "visible",
                yAxisLabelVisibility: "visible",
                xAxisLabelAngle: 0,
                yAxisLabelAngle: 0,
                xAxisLabelTextStyle: "10pt Verdona",
                yAxisLabelTextStyle: "10pt Verdona",
            }); 
            
            $("#xAxisMode").selectmenu({
                select: function(evt, ui) {
                    $("#chart").igFinancialChart("option", "xAxisMode", ui.item.value);
                }
            });
            $("#yAxisMode").selectmenu({
                select: function(evt, ui) {
                    $("#chart").igFinancialChart("option", "yAxisMode", ui.item.value);
                }
            });
            $("#xAxisLabelVisibility").selectmenu({
                select: function(evt, ui) {
                    $("#chart").igFinancialChart("option", "xAxisLabelVisibility", ui.item.value);
                }
            });
            $("#yAxisLabelVisibility").selectmenu({
                select: function(evt, ui) {
                    $("#chart").igFinancialChart("option", "yAxisLabelVisibility", ui.item.value);
                }
            });
            
            $("#xAxisLabelAngleSlider").slider({
                min: -90, max: 90, value: 0,
                slide: function (event, ui) {
                    $("#chart").igFinancialChart("option", "xAxisLabelAngle", ui.value);
                    $("#xAxisLabelAngle").text(ui.value);
                }
            });

            $("#yAxisLabelAngleSlider").slider({
                min: -90, max: 90, value: 0,
                slide: function (event, ui) {
                    $("#chart").igFinancialChart("option", "yAxisLabelAngle", ui.value);
                    $("#yAxisLabelAngle").text(ui.value);
                }
            });
        });
    </script>

</body>
</html>