Available in the Full Version

Data Chart - Series Highlighting (Financial)

This sample demonstrates the series highlighting feature which allows you to highlight the financial series.

Series type:

Chart Options

Transition Duration

1000

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

Show In JsFiddle

Copy to Clipboard

HTML
Data

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Series Highlighting Financial</title>
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
    
    <!--CSS file specific for chart styling -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>

</head>
<body>
    <script type="text/javascript" src="/data-files/financial-indicators.js"></script>
    <script type="text/javascript" src="/data-files/financial-data.js"></script>

    <script type="text/javascript">

        $(function () {
           $("#chart").igDataChart({
                width: "100%",
                height: "400px",
                dataSource: data,
                title: "Financial Chart",
                horizontalZoomable: true,
                verticalZoomable: true,
                axes: [{
                    type: "categoryX",
                    label: "Date",
                    name: "xAxis",
                    title: "Date"
                }, {
                    type: "numericY",
                    name: "yAxis",
                    title: "Price"
                }],
                series: [{
                    type: "financial",
                    displayType: "candlestick",
                    closeMemberPath: "Close",
                    highMemberPath: "High",
                    lowMemberPath: "Low",
                    openMemberPath: "Open",
                    volumeMemberPath: "Volume",
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    name: "indicatorSeries",
                    title: "Financial Indicator Data",
                    isHighlightingEnabled: true,
                    isTransitionInEnabled: true,

                }]
            });
        

           $("#seriesType").change(function (e) {
               var seriesType = $("#seriesType").val();
               var thickness = 3;
               if (seriesType == "candlestick" ||
                      seriesType == "priceChannelOverlay" ||
                      seriesType == "bollingerBandsOverlay") {
                   thickness = 1;
               }
               if (seriesType == "ohlc") {
                   thickness = 2;
               }
               
                $("#chart").igDataChart("option", "series", [{name: "indicatorSeries",remove: true}]);
               
                if (seriesType == "ohlc" || seriesType == "candlestick") {
                    $("#chart").igDataChart("option", "series", [{
                        type: "financial",
                        displayType: seriesType,
                        isTransitionInEnabled: true,
                        isHighlightingEnabled: true,
                        closeMemberPath: "Close",
                        highMemberPath: "High",
                        lowMemberPath: "Low",
                        openMemberPath: "Open",
                        volumeMemberPath: "Volume",
                        thickness: thickness,
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        name: "indicatorSeries",
                        title: "Financial Indicator Data"
                    }]);
                }
                 else {
                    $("#chart").igDataChart("option", "series", [{
                        type: seriesType,
                        isHighlightingEnabled: true,
                        isTransitionInEnabled: true,
                        closeMemberPath: "Close",
                        highMemberPath: "High",
                        lowMemberPath: "Low",
                        openMemberPath: "Open",
                        volumeMemberPath: "Volume",
                        thickness: thickness,
                        xAxis: "xAxis",
                        yAxis: "yAxis",
                        name: "indicatorSeries",
                        title: "Financial Indicator Data"
                    }]);
                }
            });
        
            // Transition Duration Slider
           $("#transitionDurationSlider").slider({
               min: 0,
               max: 2000,
               value: 1000,
               step: 50,
               slide: function (event, ui) {
                   $("#chart").igDataChart("option", "highlightingTransitionDuration", ui.value);
                   $("#transitionDurationLabel").text(ui.value);
               }
           });
        
        });
    </script>

    <style type="text/css">
       
        .selectionOptions
        {
            width: 450px;
            margin-top: 10px;
        }

        .selectionOptions > label 
        {
            display: block;
        }

        .optionContainer {
            min-width: 120px;
            max-width: 250px;
            margin: 2px;
            padding: 2px;
            display: inline-block;
            border: 1px solid #e0e0e0;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
        }

         td { vertical-align: top; }
        .chartElement {
            padding-bottom: 20px;
        }

        .sliderBounds {
            width: 95px;
            margin: 6px 3px 6px 6px;
            display: inline-block;
        }
        
        .selectBounds {
            min-width: 120px;
            max-width: 132px;
        }

    </style>
  <div class="selectionOptions" >
        Series type:
        <select id="seriesType" class="selectBounds">
            <option value="candlestick" selected="selected">Candlestick</option>
            <option value="ohlc">OHLC</option>
            <option value="absoluteVolumeOscillatorIndicator" >Absolute Volume Oscillator</option>
            <option value="averageTrueRangeIndicator">Average True Range</option>
            <option value="accumulationDistributionIndicator">Accumulation Distribution</option>
            <option value="averageDirectionalIndexIndicator">Average Directional Index</option>
            <option value="bollingerBandsOverlay">Bollinger Bands Overlay</option>
            <option value="bollingerBandWidthIndicator">Bollinger Band Width</option>
            <option value="chaikinOscillatorIndicator">Chaikin Oscillator</option>
            <option value="chaikinVolatilityIndicator">Chaikin Volatility</option>
            <option value="commodityChannelIndexIndicator">Commodity Channel Index</option>
            <option value="detrendedPriceOscillatorIndicator">Detrended Price Oscillator</option>
            <option value="easeOfMovementIndicator">Ease Of Movement</option>
            <option value="fastStochasticOscillatorIndicator">Fast Stochastic Oscillator</option>
            <option value="forceIndexIndicator">Force Index</option>
            <option value="fullStochasticOscillatorIndicator">Full Stochastic Oscillator</option>
            <option value="marketFacilitationIndexIndicator">Market Facilitation Index</option>
            <option value="massIndexIndicator">Mass Index</option>
            <option value="medianPriceIndicator">Median Price</option>
            <option value="moneyFlowIndexIndicator">Money Flow Index</option>
            <option value="movingAverageConvergenceDivergenceIndicator">Moving Average Convergence Divergence</option>
            <option value="negativeVolumeIndexIndicator">Negative Volume Index</option>
            <option value="onBalanceVolumeIndicator">On Balance Volume</option>
            <option value="percentagePriceOscillatorIndicator">Percentage Price Oscillator</option>
            <option value="percentageVolumeOscillatorIndicator">Percentage Volume Oscillator</option>
            <option value="positiveVolumeIndexIndicator">Positive Volume Index</option>
            <option value="priceChannelOverlay">Price Channel Overlay</option>
            <option value="priceVolumeTrendIndicator">Price Volume Trend</option>
            <option value="rateOfChangeAndMomentumIndicator">Rate Of Change And Momentum</option>
            <option value="relativeStrengthIndexIndicator">Relative Strength Index</option>
            <option value="slowStochasticOscillatorIndicator">Slow Stochastic Oscillator</option>
            <option value="standardDeviationIndicator">Standard Deviation</option>
            <option value="stochRSIIndicator">Stoch RSI</option>
            <option value="trixIndicator">Trix</option>
            <option value="typicalPriceIndicator">Typical Price</option>
            <option value="ultimateOscillatorIndicator">Ultimate Oscillator</option>
            <option value="weightedCloseIndicator">Weighted Close</option>
            <option value="williamsPercentRIndicator">Williams Percent R</option>
         </select>
    </div>
    <div id="chart" class="chartElement"></div>
   <div style="float: left">
        <fieldset id="chartOptions">
            <legend>Chart Options</legend>
            <div class="optionContainer">
                Transition Duration
                <br />
                <div id="transitionDurationSlider" class="sliderBounds"></div>
                <label id="transitionDurationLabel">1000</label>
            </div>
        </fieldset>    
    </div>

    <div class="selectionOptions" style="display: inline-block">
        <label>Stock data from:
            <a href="http://www.quandl.com/" target="_blank">Quandl</a>
        </label>
    </div>

</body>
</html>

                    var indicators = [
        { key: "absoluteVolumeOscillatorIndicator", text: "Absolute Volume Oscillator" },
        { key: "averageTrueRangeIndicator", text: "Average True Range" },
        { key: "accumulationDistributionIndicator", text: "Accumulation Distribution" },
        { key: "averageDirectionalIndexIndicator", text: "Average Directional Index" },
        { key: "bollingerBandsOverlay", text: "Bollinger Bands Overlay" },
        { key: "bollingerBandWidthIndicator", text: "Bollinger Bandwidth" },
        { key: "chaikinOscillatorIndicator", text: "Chaikin Oscillator" },
        { key: "chaikinVolatilityIndicator", text: "Chaikin Volatility" },
        { key: "commodityChannelIndexIndicator", text: "Commodity Channel Index" },
        { key: "detrendedPriceOscillatorIndicator", text: "Detrended Price Oscillator" },
        { key: "easeOfMovementIndicator", text: "Ease Of Movement" },
        { key: "fastStochasticOscillatorIndicator", text: "Fast Stochastic Oscillator" },
        { key: "forceIndexIndicator", text: "Force Index" },
        { key: "fullStochasticOscillatorIndicator", text: "Full Stochastic Oscillator" },
        { key: "marketFacilitationIndexIndicator", text: "Market Facilitation Index" },
        { key: "massIndexIndicator", text: "Mass Index" },
        { key: "medianPriceIndicator", text: "Median Price" },
        { key: "moneyFlowIndexIndicator", text: "Money Flow Index" },
        { key: "movingAverageConvergenceDivergenceIndicator", text: "Moving Average Convergence Divergence" },
        { key: "negativeVolumeIndexIndicator", text: "Negative Volume Index" },
        { key: "onBalanceVolumeIndicator", text: "On Balance Volume" },
        { key: "percentagePriceOscillatorIndicator", text: "Percentage Price Oscillator" },
        { key: "percentageVolumeOscillatorIndicator", text: "Percentage Volume Oscillator" },
        { key: "positiveVolumeIndexIndicator", text: "Positive Volume Index" },
        { key: "priceChannelOverlay", text: "Price Channel Overlay" },
        { key: "priceVolumeTrendIndicator", text: "Price Volume Trend" },
        { key: "rateOfChangeAndMomentumIndicator", text: "Rate Of Change And Momentum" },
        { key: "relativeStrengthIndexIndicator", text: "Relative Strength Index" },
        { key: "slowStochasticOscillatorIndicator", text: "Slow Stochastic Oscillator" },
        { key: "standardDeviationIndicator", text: "Standard Deviation" },
        { key: "stochRSIIndicator", text: "Stoch RSI" },
        { key: "trixIndicator", text: "Trix" },
        { key: "typicalPriceIndicator", text: "Typical Price" },
        { key: "ultimateOscillatorIndicator", text: "Ultimate Oscillator" },
        { key: "weightedCloseIndicator", text: "Weighted Close" },
        { key: "williamsPercentRIndicator", text: "Williams Percent R" }
    ];

Ignite UI for jQuery | Samples

Search Results

Data Chart - Series Highlighting (Financial)

Code View