Available in the Full Version

Data Chart - Chart Navigation

This sample demonstrates various navigation methods available in the jQuery chart. Panning and zooming through the control’s content can be performed using built-in keyboard navigation (Arrows, Page Up/Down, Home key), built-in mouse navigation (Shift + mouse drag, mouse scroll, mouse down + mouse drag), and the overview plus detail pane, as well as from code-behind using the control's window position and scale properties.
Interactions Vertical Zooming
Default Enable Zooming
Pan Modifier Zoom
1.0000
Drag Modifier Horizontal Zooming
Overview Plus Detail Pane Enable Zooming
Enable Pane Zoom
1.0000
1995
2005
2015
2025

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>
    <title>Chart Navigation</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" />
    
    <!--CSS file specific for chart styling -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />

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

</head>
<body>
    <script type="text/javascript" src="/data-files/uk-france-population.js"></script>

    <script type="text/javascript">
        $(function () {

            var data = [
                { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
                { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
                { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
                { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
                { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
            ];

            $("#chart").igDataChart({
                width: "600px",
                height: "400px",
                legend: { element: "lineLegend" },
                title: "Population per Country",
                subtitle: "A comparison of population in 1995 and 2005",
                overviewPlusDetailPaneVisibility: "visible",
                horizontalZoomable: true,
                verticalZoomable: true,
                dataSource: data,
                axes: [
                    {
                        name: "NameAxis",
                        type: "categoryX",
                        label: "CountryName"
                    },
                    {
                        name: "PopulationAxis",
                        type: "numericY", 
                        minimumValue: 0,
                        title: "Millions of People",
                    }
                ],
                series: [
                   {
                       name: "Pop1995",
                       type: "column",
                       title: "1995",
                       xAxis: "NameAxis",
                       yAxis: "PopulationAxis",
                       valueMemberPath: "Pop1995",
                       isTransitionInEnabled: true,
                       isHighlightingEnabled: true,
                       thickness: 1
                   },
                   {
                        name: "Pop2005",
                        type: "column",
                        title: "2005",
                        xAxis: "NameAxis",
                        yAxis: "PopulationAxis",
                        valueMemberPath: "Pop2005",
                        isTransitionInEnabled: true,
                        isHighlightingEnabled: true,
                        thickness: 1
                    },
                    {
                        name: "Pop2015",
                        type: "column",
                        title: "2015",
                        xAxis: "NameAxis",
                        yAxis: "PopulationAxis",
                        valueMemberPath: "Pop2015",
                        isTransitionInEnabled: true,
                        isHighlightingEnabled: true,
                        thickness: 1
                    },
                    {
                        name: "Pop2025",
                        type: "column",
                        title: "2025",
                        xAxis: "NameAxis",
                        yAxis: "PopulationAxis",
                        valueMemberPath: "Pop2025",
                        isTransitionInEnabled: true,
                        isHighlightingEnabled: true,
                        thickness: 1
                    }
                    ]
            });

            $("#selectDefault").change(function (e) {
                $("#chart").igDataChart("option", "defaultInteraction", $(this).val());
            });

            $("#selectPanModifier").change(function (e) {
                $("#chart").igDataChart("option", "panModifier", $(this).val());
            });

            $("#selectDragModifier").change(function (e) {
                $("#chart").igDataChart("option", "dragModifier", $(this).val());
            });

            $("#enableVerticalZooming").click(function (e) {
                var verticalZoomingChecked = $(this).is(":checked");
                $("#chart").igDataChart("option", "verticalZoomable", verticalZoomingChecked);
                $("#verticalZoomSlider").slider("option", "disabled", !verticalZoomingChecked);
            });

            $("#enableHorizontalZooming").click(function (e) {
                var horizontalZoomingChecked = $(this).is(":checked");
                $("#chart").igDataChart("option", "horizontalZoomable", horizontalZoomingChecked);
                $("#horizontalZoomSlider").slider("option", "disabled", !horizontalZoomingChecked);
            });

            $("#enablePane").click(function (e) {
                var visibility = ($(this).is(":checked")) ? "visible" : "collapsed";
                $("#chart").igDataChart("option", "overviewPlusDetailPaneVisibility", visibility);
                $("#chart").igDataChart("styleUpdated");
            });

            $("#verticalZoomSlider").slider({
                min: 0.0001,
                max: 1,
                value: 1,
                step: 0.0001,
                slide: function (e, ui) {
                    if ($('#enableVerticalZooming').is(":checked"))
                        $("#chart").igDataChart("option", "windowScaleVertical", ui.value);
                }
            });

            $("#horizontalZoomSlider").slider({
                min: 0.0001,
                max: 1,
                value: 1,
                step: 0.0001,
                slide: function (e, ui) {
                    if ($('#enableHorizontalZooming').is(":checked"))
                        $("#chart").igDataChart("option", "windowScaleHorizontal", ui.value);
                }
            });
            
        });
    </script>

    <style type="text/css">
       
        .labelCol
        {
            width: 110px;
        }
        
       .slider
        {
            width: 80px;
            height: 10px;
            margin: 10px;
        }
        .selectionOptions
        {
            margin-bottom: 10px;   
        }

        td { vertical-align: top; }
        .chartElement {
            padding-bottom: 20px;
        }
    </style>
    

    <div class="selectionOptions" >
       <!-- Series type:&nbsp
        <select id="seriesType">
            <option value="area">Area</option>
            <option value="column">Column</option>
            <option value="line" selected="selected">Line</option>
            <option value="splineArea">Spline Area</option>
            <option value="spline">Spline</option>
            <option value="stepArea">Step Area</option>
            <option value="stepLine">Step Line</option>
            <option value="waterfall">Waterfall</option>
            <option value="point">Point</option>
        </select>-->
         <table class="optionsTable">
            <colgroup>
                <col class="labelCol" />
                <col />
                <col class="valueCol" />
                <col class="labelCol" />
                <col />
                <col class="valueCol" />
                 <col />
                <col class="valueCol" />
                   <col />
                <col class="valueCol" />
         </colgroup>

            <tr>
                <td colspan="2">
                    <b>Interactions</b>
                </td>
                <td></td>
                <td colspan="2">
                    <b>Vertical Zooming</b>
                </td>
            </tr>

            <tr>
                <td>
                    Default
                </td>
                <td>
                    <select id="selectDefault">
                        <option value="dragZoom" selected="selected">DragZoom</option>
                        <option value="dragPan">DragPan</option>
                        <option value="none">None</option>
                    </select>
                </td>
                <td></td>

                <td>
                    Enable Zooming
                </td>
                <td>
                    <input type="checkbox" id="enableVerticalZooming" checked="checked" />
                </td>
            </tr>

            <tr>
                <td>
                    Pan Modifier
                </td>
                <td>
                    <select id="selectPanModifier">
                        <option value="control">Control</option>
                        <option value="alt">Alt</option>
                        <option value="shift" selected="selected">Shift</option>
                        <option value="none">None</option>
                    </select>
                </td>
                <td></td>

                <td>
                    Zoom
                </td>
                <td>
                    <div id="verticalZoomSlider" class="slider"></div>
                </td>
                <td>
                    <span id="verticalZoomLevel">1.0000</span>
                </td>
            </tr>

             <tr>
                <td>
                    Drag Modifier
                </td>
                <td>
                    <select id="selectDragModifier">
                        <option value="control">Control</option>
                        <option value="alt">Alt</option>
                        <option value="shift">Shift</option>
                        <option value="none" selected="selected">None</option>
                    </select>
                </td>
                  <td></td>
              <td colspan="2">
                    <b>Horizontal Zooming</b>
                </td>
          </tr>

            <tr>
                <td colspan="2">
                    <b>Overview Plus Detail Pane</b>
                </td>
               <td></td>
                <td>
                    Enable Zooming
                </td>
                <td>
                    <input type="checkbox" id="enableHorizontalZooming" checked="checked" />
                </td>
              </tr>

            <tr>
                <td>
                    Enable Pane
                </td>
                <td>
                    <input type="checkbox" id="enablePane" checked="checked" />
                </td>
              <td></td>
                <td>
                    Zoom
                </td>
                <td>
                    <div id="horizontalZoomSlider" class="slider"></div>
                </td>
                <td>
                    <span id="horizontalZoomLevel">1.0000</span>
                </td>

            </tr>
             
        </table>
    </div>
    
    <table>
        <tr>
            <td id="chart" class="chartElement"/>      
            <td id="lineLegend" style="float: left"/>
        </tr>
    </table>
    
</body>
</html>