Available in the Full Version

Data Chart - Chart Elements

This sample demonstrates various elements that are available in the igDataChart control. Chart elements such as axis, labels, grid lines, grid stripes, zoom bars, series, trend lines, indicators and crosshairs are all available to enhance the control's presentation.
Axis Stoke Lines
Axis Major Lines
Axis Minor Lines
Axis Tickmarks
Axis Titles
Axis Stripes
Axis Labels
Price Series
Price Trend Line
Line Series
Line Markers
Chart Legend
Chart Crosshairs
Chart Overview Pane
Price Series
Line Series

Stock data from:
Quandl

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 Elements</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/financial-data.js"></script>
    <script type="text/javascript">
        // variables
        var evntCounter = 0, transperantBrush = "rgba(0,0,0,0)",
            axisStripBrush = "rgba(150,150,150,0.1)",
            axisStokeLinesBrush = "rgba(50,50,50,0.7)",
            axisMajorLinesBrush = "rgba(120,120,120,0.5)",
            axisMinorLinesBrush = "rgba(120,120,120,0.3)",
            axisTitleX = "Date",
            axisTitleY = "Price",
            financialPositiveOutline = "rgba(20,20,20,0.7)",
            financialNegativeOutline = "rgba(20,20,20,0.7)",
            financialPositiveBrush = "rgba(70,140,240,0.7)",
            financialNegativeBrush = "rgba(240,20,20,0.7)",
            financialTrendlineBrush = "rgba(70,140,240,0.7)",
            volumeSeriesBrush = "rgba(90,190,65,0.7)",
            volumeTrendlineBrush = "rgba(190,130,65,0.7)",
            //financialPositiveBrush2 = "#469ff1F",
            //financialNegativeBrush2 = "#8c8d8eF",
            volumeSeriesBrush2 = "#58bf41F",
            trendlineBrush2 = "#bf8641F", brush, negBrush, mType;

        // creating igDataChart
        $(function () {
            $("#chart").igDataChart({
                width: "500px",
                height: "500px",
                legend: { element: "chartLegend" },
                title: "A comparison of stocks over time",
                horizontalZoomable: true,
                verticalZoomable: true,
                windowResponse: "immediate",
                axes: [{
                        name: "xAxis",
                        type: "categoryX",
                        dataSource: data,
                        label: "Date",
                        strokeThickness: 0.5,
                        stroke: axisStokeLinesBrush,
                        title: "Date",
                        tickLength: 5,
                        interval: 10
                    },
                    {   name: "pAxis",
                        type: "numericY",
                        strokeThickness: 0.5,
                        stroke: axisStokeLinesBrush,
                        title: "Price",
                        tickLength: 0,
                        minimumValue: 25,
                    },
                    {
                        name: "vAxis",
                        type: "numericY",
                        labelLocation: "outsideRight",
                        majorStroke: transperantBrush,
                        stroke: transperantBrush,
                        strokeThickness: 1,
                        tickLength: 0,
                        title: "Volume",
                        minimumValue: 10000000,
                        maximumValue: 150000000,
                        abbreviateLargeNumbers: true,
                    }
                ],
                series: [{
                    type: "financial",
                    name: "financialSeries",
                    dataSource: data,
                    title: "Price Series",
                    displayType: "candlestick",
                    isTransitionInEnabled: true,
                    isHighlightingEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "pAxis",
                    openMemberPath: "Open",
                    highMemberPath: "High",
                    lowMemberPath: "Low",
                    closeMemberPath: "Close",
                    brush: financialPositiveBrush,
                    outline: financialPositiveOutline,
                    negativeBrush: financialNegativeBrush,
                    negativeOutline: financialNegativeOutline,
                    thickness: 1,
                    trendLineThickness: 3,
                    trendLineBrush: financialTrendlineBrush,
                    trendLineType: "exponentialAverage",
                }, {
                    type: 'line',
                    name: 'volumeSeries',
                    dataSource: data,
                    brush: volumeSeriesBrush,
                    markerBrush: volumeSeriesBrush,
                    markerOutline: volumeSeriesBrush,
                    markerType: 'circle',
                    title: 'Line Series',
                    xAxis: 'xAxis',
                    yAxis: 'vAxis',
                    valueMemberPath: 'Volume',
                }],
            });

            $("#axisStokeLines").click(function () {
                var brush = ($(this).is(":checked")) ? axisStokeLinesBrush : transperantBrush;
                $("#chart").igDataChart("option", "axes", [
                    { name: "xAxis", stroke: brush },
                    { name: "pAxis", stroke: brush }
                ]);
                $("#chart").igDataChart("styleUpdated");
            });
            $("#axisMajorLines").click(function () {
                var brush = $(this).is(":checked") ? axisMajorLinesBrush : transperantBrush;
                $("#chart").igDataChart("option", "axes", [
                    { name: "pAxis", majorStroke: brush }
                ]);
                $("#chart").igDataChart("styleUpdated");
            });
            $("#axisMinorLines").click(function () {
                var brush = $(this).is(":checked") ? axisMinorLinesBrush : transperantBrush;
                $("#chart").igDataChart("option", "axes", [
                    { name: "pAxis", minorStroke: brush }
                ]);
                $("#chart").igDataChart("styleUpdated");
            });
            $("#axisStripes").click(function () {
                var brush = $(this).is(":checked") ? axisStripBrush : transperantBrush;
                $("#chart").igDataChart("option", "axes", [
                    { name: "pAxis", strip: brush }
                ]);
                $("#chart").igDataChart("styleUpdated");
            });
            $("#axisLabels").click(function () {
                var visibility = ($(this).is(":checked")) ? "visible" : "collapsed";
                $("#chart").igDataChart("option", "axes", [
                    { name: "xAxis", labelVisibility: visibility },
                    { name: "pAxis", labelVisibility: visibility },
                    { name: "vAxis", labelVisibility: visibility }]);
                $("#chart").igDataChart("styleUpdated");
            });
            $("#axisTickmarks").click(function () {
                var isVisible = ($(this).is(":checked"));
                $("#chart").igDataChart("option", "axes", [
                    { name: "xAxis", tickLength: isVisible ? 5 : 0 },
                    { name: "pAxis", tickLength: isVisible ? 5 : 0 }
                ]);
                $("#chart").igDataChart("styleUpdated");
            });
            $("#axisTitles").click(function () {
                var isVisible = ($(this).is(":checked"));
                $("#chart").igDataChart("option", "axes", [
                    { name: "xAxis", title: isVisible ? axisTitleX : "" },
                    { name: "pAxis", title: isVisible ? axisTitleY : "" },
                    { name: "vAxis", title: isVisible ? axisTitleY : "" }]);
                $("#chart").igDataChart("styleUpdated");
            });

            $("#legendCheckbox").click(function () {
                var visibility = ($(this).is(":checked")) ? "visible" : "hidden";
                $('#chartLegend').css("visibility", visibility);
            });

            $("#financialSeries").click(function () {
                var isChecked = ($(this).is(":checked"));
                var posBrush = isChecked ? financialPositiveBrush : transperantBrush;
                var negBrush = isChecked ? financialNegativeBrush : transperantBrush;
                var posOutline = isChecked ? financialPositiveOutline : transperantBrush;
                var negOutline = isChecked ? financialNegativeOutline : transperantBrush;
                var visibility = isChecked ? "visible" : "collapsed";
                $("#chart").igDataChart("option", "series", [
                   {
                       name: "financialSeries",
                       brush: posBrush,
                       negativeBrush: negBrush,
                       outline: posOutline,
                       negativeOutline: negOutline,
                       legendItemVisibility: visibility
                   }]);
                $("#chart").igDataChart("styleUpdated");
            });

            $("#financialTrendline").click(function () {
                var isChecked = ($(this).is(":checked"));
                var pBrush = isChecked ? financialTrendlineBrush : transperantBrush;
                var vBrush = isChecked ? volumeTrendlineBrush : transperantBrush;
                $("#chart").igDataChart("option", "series", [
                    { name: "financialSeries", trendLineBrush: pBrush }
                ]);
                $("#chart").igDataChart("styleUpdated");
            });

            $("#volumeSeries").click(function () {
                var brush = ($(this).is(":checked")) ? volumeSeriesBrush : transperantBrush;
                var visibility = ($(this).is(":checked")) ? "visible" : "collapsed";
                $("#chart").igDataChart("option", "series", [
                    {
                        name: "volumeSeries", brush: brush,
                        legendItemVisibility: visibility
                    }]);
                $("#chart").igDataChart("styleUpdated");
            });

            $("#lineMarkers").click(function () {
                var mType = ($(this).is(":checked")) ? "circle" : "none";
                $("#chart").igDataChart("option", "series", [
                    { name: "volumeSeries", markerType: mType }]);
                $("#chart").igDataChart("styleUpdated");
            });

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

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

    </script>
    <style type="text/css">
        td {
            vertical-align: top;
        }

        #chart {
            position: relative;
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
        }

        #chartLegend {
            left: 10px;
            /*position: absolute;*/
            font-size: 0.857em;
            top: 0px;
        }

        .chkBoxMargin {
            margin: 4px;
        }

        .options {
            float: left;
            font-size: 0.857em;
            line-height: 1.429em;
        }
    </style>

    <table>
        <tr>
            <td>
                <div id="chart"></div>
            </td>
            <td>
                <div class="options">
                    <div class="optionContainer">

                        <div><input id="axisStokeLines" type="checkbox" class="chkBoxMargin" checked="checked" />Axis Stoke Lines</div>
                        <div><input id="axisMajorLines" type="checkbox" class="chkBoxMargin" checked="checked" />Axis Major Lines</div>
                        <div><input id="axisMinorLines" type="checkbox" class="chkBoxMargin" />Axis Minor Lines</div>
                        <div><input id="axisTickmarks" type="checkbox" class="chkBoxMargin" checked="checked" />Axis Tickmarks</div>
                        <div><input id="axisTitles" type="checkbox" class="chkBoxMargin" checked="checked" />Axis Titles</div>
                        <div><input id="axisStripes" type="checkbox" class="chkBoxMargin" />Axis Stripes</div>
                        <div><input id="axisLabels" type="checkbox" class="chkBoxMargin" checked="checked" />Axis Labels</div>
                        <div><input id="financialSeries" type="checkbox" class="chkBoxMargin" checked="checked" />Price Series</div>
                        <div><input id="financialTrendline" type="checkbox" class="chkBoxMargin" checked="checked" />Price Trend Line</div>

                        <div><input id="volumeSeries" type="checkbox" class="chkBoxMargin" checked="checked" />Line Series</div>
                        <div><input id="lineMarkers" type="checkbox" class="chkBoxMargin" checked="checked" />Line Markers</div>
                        <div><input id="legendCheckbox" type="checkbox" class="chkBoxMargin" checked="checked" />Chart Legend</div>
                        <div><input id="chartCrosshairs" type="checkbox" class="chkBoxMargin" />Chart Crosshairs</div>
                        <div><input id="chartOPD" type="checkbox" class="chkBoxMargin" />Chart Overview Pane</div>

                    </div>
                </div>
            </td>

        </tr>
        <tr>
            <td id="chartLegend" style="float: left" />

        </tr>
    </table>

    <br />
    <div class="Quandldata-attribution">
        Stock data from:<br />
        <a href="http://www.quandl.com/" target="_blank">Quandl</a>
    </div>
</body>
</html>