Available in the Full Version

Shape Chart - Configuring Axis Intervals

This is a basic example demonstrating how to configure axis intervals in igShapeChart.
X-Axis Options



Y-Axis Options



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 xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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 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" />

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

    <title>ShapeChart Axis Intervals</title>
</head>

<body>
    <script>
        $(function () {

            $("#shapeChart").igShapeChart({
                databaseSource: 'https://www.igniteui.com/data-files/shapes/world_countries_reg.dbf',
                shapeDataSource: 'https://www.igniteui.com/data-files/shapes/world_countries_reg.shp',
                chartType: "polygon",
                width: "600px",
                height: "400px",
                xAxisMinimumValue: -180,
                xAxisMaximumValue: 180,
                yAxisMinimumValue: -90,
                yAxisMaximumValue: 90,
                xAxisMajorStroke: "Green",
                yAxisMajorStroke: "Green",
                xAxisMinorStroke: "Red",
                yAxisMinorStroke: "Red",
                xAxisMajorStrokeThickness: 1,
                yAxisMajorStrokeThickness: 1,
                xAxisMinorStrokeThickness: 0.5,
                yAxisMinorStrokeThickness: 0.5,
                xAxisInterval: 30,
                yAxisInterval: 30,
                xAxisMinorInterval: 15,
                yAxisMinorInterval: 15,
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
            });
        
            $("#xAxisMajorLinesCheckbox").click(function (e) {
                var isChecked = $("#xAxisMajorLinesCheckbox").is(":checked");
                if (isChecked) {
                    $("#shapeChart").igShapeChart("option", "xAxisMajorStroke", "Green");
                }
                else {
                    $("#shapeChart").igShapeChart("option", "xAxisMajorStroke", "Transparent");
                }
            });

            $("#xAxisMinorLinesCheckbox").click(function (e) {
                var isChecked = $("#xAxisMinorLinesCheckbox").is(":checked");
                if (isChecked) {
                    $("#shapeChart").igShapeChart("option", "xAxisMinorStroke", "Red");
                }
                else {
                    $("#shapeChart").igShapeChart("option", "xAxisMinorStroke", "Transparent");
                }
            });

            $("#yAxisMajorLinesCheckbox").click(function (e) {
                var isChecked = $("#yAxisMajorLinesCheckbox").is(":checked");
                if (isChecked) {
                    $("#shapeChart").igShapeChart("option", "yAxisMajorStroke", "Green");
                }
                else {
                    $("#shapeChart").igShapeChart("option", "yAxisMajorStroke", "Transparent");
                }
            });

            $("#yAxisMinorLinesCheckbox").click(function (e) {
                var isChecked = $("#yAxisMinorLinesCheckbox").is(":checked");
                if (isChecked) {
                    $("#shapeChart").igShapeChart("option", "yAxisMinorStroke", "Red");
                }
                else {
                    $("#shapeChart").igShapeChart("option", "yAxisMinorStroke", "Transparent");
                }
            });

            $("#xAxisMajorLineSlider").slider(
                {
                    min: 5, max: 50, value: 10,
                    slide: function (e, ui) {
                        var thickness = ui.value * 0.1;
                        $("#shapeChart").igShapeChart("option", "xAxisMajorStrokeThickness", thickness);
                        $("#xAxisMajorThicknessValue").text(thickness.toFixed(1));
                    }
                });

            $("#yAxisMajorLineSlider").slider(
                {
                    min: 5, max: 50, value: 10,
                    slide: function (e, ui) {
                        var thickness = ui.value * 0.1;
                        $("#shapeChart").igShapeChart("option", "yAxisMajorStrokeThickness", thickness);
                        $("#yAxisMajorThicknessValue").text(thickness.toFixed(1));
                    }
                });

            $("#xAxisMinorLineThicknessSlider").slider(
                {
                    min: 5, max: 50, value: 10,
                    slide: function (e, ui) {
                        var thickness = ui.value * 0.1;
                        $("#shapeChart").igShapeChart("option", "xAxisMinorStrokeThickness", thickness);
                        $("#xAxisMinorThicknessValue").text(thickness.toFixed(1));
                    }
                });

            $("#yAxisMinorLineThicknessSlider").slider(
                {
                    min: 5, max: 50, value: 10,
                    slide: function (e, ui) {
                        var thickness = ui.value * 0.1;
                        $("#shapeChart").igShapeChart("option", "yAxisMinorStrokeThickness", thickness);
                        $("#yAxisMinorThicknessValue").text(thickness.toFixed(1));
                    }
                });

            $("#xAxisMajorLineIntervalSlider").slider(
                {
                    min: 30, max: 90, value: 30,
                    slide: function (e, ui) {
                        $("#shapeChart").igShapeChart("option", "xAxisInterval", ui.value);
                        $("#xAxisMajorIntervalValue").text(ui.value);
                    }
                });

            $("#yAxisMajorLineIntervalSlider").slider(
                {
                    min: 30, max: 90, value: 30,
                    slide: function (e, ui) {
                        $("#shapeChart").igShapeChart("option", "yAxisInterval", ui.value);
                        $("#yAxisMajorIntervalValue").text(ui.value);
                    }
                });

            $("#xAxisMinorLineIntervalSlider").slider(
                {
                    min: 10, max: 30, value: 15,
                    slide: function (e, ui) {
                        $("#shapeChart").igShapeChart("option", "xAxisMinorInterval", ui.value);
                        $("#xAxisMinorGridlinesInterval").text(ui.value);
                    }
                });

            $("#yAxisMinorLineIntervalSlider").slider(
                {
                    min: 10, max: 30, value: 15,
                    slide: function (e, ui) {
                        $("#shapeChart").igShapeChart("option", "yAxisMinorInterval", ui.value);
                        $("#yAxisMinorGridlinesInterval").text(ui.value);
                    }
                });
        });

    </script>

    <style>
        .chart {
            position: relative;
            float: left;
            margin-right: 10px;
        }
         
        .optionsPane {
            position: relative;
            float: initial;
            width: 275px;
            margin: 6px 3px 6px 6px;
            display: inline-block;
            padding-top: 18px;
        }

        .optionsColumn {
            float: left;
            position: relative; 
            margin: 2px;
            padding: 2px;
            display: inline-block;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
        }

        .slider {
            width: 245px;
            margin: 8px 8px 8px 8px;
            padding-right: 3px;
            padding-left: 3px;
            display: inline-block;
            float: left;
        }

        .selector {
            width: 245px;
            margin: 8px 8px 8px 8px;
            padding-right: 3px;
            padding-left: 3px;
            display: inline-block;
            float: left;
        }
        
        .labels {
            padding-right: 7px;
        }

        .values {
            padding-left: 7px;
            padding-right: 0px;
            width: 30px;
        }
    </style>

    <div id="shapeChart" class="chart"></div>

    <div>
        <div class="optionsPane">
            <div><b>X-Axis Options</b></div>
            <div class="optionsColumn">
                <label>Axis Major Grid Lines Visible</label>
                <input id="xAxisMajorLinesCheckbox" type="checkbox" checked /><br/>

                <label>Axis Minor Grid Lines Visible</label>
                <input id="xAxisMinorLinesCheckbox" type="checkbox" checked /><br /><br />

                <div>
                    <label>Axis Major Grid Line Thickness</label>
                    <label id="xAxisMajorThicknessValue">1</label>
                    <div id="xAxisMajorLineSlider" class="slider"></div>
                </div>

                <div>
                    <label>Axis Minor Grid Line Thickness</label>
                    <label id="xAxisMinorThicknessValue">0.5</label>
                    <div id="xAxisMinorLineThicknessSlider" class="slider"></div>
                </div>

                <div>
                    <label>Axis Major Grid Line Interval</label>
                    <label id="xAxisMajorIntervalValue">30</label>
                    <div id="xAxisMajorLineIntervalSlider" class="slider"></div>
                </div>

                <div>
                    <label>Axis Minor Grid Line Interval</label>
                    <label id="xAxisMinorGridlinesInterval">15</label>
                    <div id="xAxisMinorLineIntervalSlider" class="slider"></div>
                </div>
            </div>
        </div> 

        <div class="optionsPane">
            <div><b>Y-Axis Options</b></div>
            <div class="optionsColumn">
                <label>Axis Major Grid Lines Visible</label>
                <input id="yAxisMajorLinesCheckbox" type="checkbox" checked /><br />
                <label>Axis Minor Grid Lines Visible</label>
                <input id="yAxisMinorLinesCheckbox" type="checkbox" checked /><br /><br />

                <div>
                    <label>Axis Major Grid Line Thickness</label>
                    <label id="yAxisMajorThicknessValue">1</label>
                    <div id="yAxisMajorLineSlider" class="slider"></div>
                </div>

                <div>
                    <label>Axis Minor Grid Line Thickness</label>
                    <label id="yAxisMinorThicknessValue">0.5</label>
                    <div id="yAxisMinorLineThicknessSlider" class="slider"></div>
                </div>

                <div>
                    <label>Axis Major Grid Line Interval</label>
                    <label id="yAxisMajorIntervalValue">30</label>
                    <div id="yAxisMajorLineIntervalSlider" class="slider"></div>
                </div>

                <div>
                    <label>Axis Minor Grid Line Interval</label>
                    <label id="yAxisMinorGridlinesInterval">15</label>
                    <div id="yAxisMinorLineIntervalSlider" class="slider"></div>
                </div>

            </div>
        </div>
    </div>
    
</body>
</html>