Available in the Full Version

Data Chart - Charts - Financial Series

This sample demonstrates various modes of Financial Series available in the chart. Zoom in to inspect the data using both the mouse scroll wheel and, on touch devices, the pinch gesture.

Candlestick

OHLC

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>Financial Series</title>

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

    <!-- 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">
        $(function () {
            $("#candlestickChart").igDataChart({
                width: "100%",
                height: "500px",
                title: "Microsoft (MSFT) vs. Adobe (ADBE)",
                subtitle: "A comparison of stocks over time",
                horizontalZoomable: true,
                verticalZoomable: true,
                windowResponse: "immediate",
                axes: [{
                    name: "xAxis",
                    type: "categoryX",
                    dataSource: data,
                    label: "Date",
                    title: "Date",
                    interval: 10
                }, {
                    name: "yAxis",
                    type: "numericY",
                    title: "Price",
                }],
                series: [{
                    name: "series1",
                    dataSource: data,
                    title: "Price Series",
                    type: "financial",
                    displayType: "candlestick",
                    isTransitionInEnabled: true,
                    isHighlightingEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    openMemberPath: "Open",
                    highMemberPath: "High",
                    lowMemberPath: "Low",
                    closeMemberPath: "Close",
                    showTooltip: true,
                    thickness: 1,
                    trendLineBrush: "rgba(68, 172, 214, .8)",
                    trendLineThickness: 5,
                    trendLineType: "exponentialAverage",
                    negativeBrush: "rgba(198, 45, 54, .8)"
                }, {
                    name: "series2",
                    dataSource: dataAdobe,
                    title: "Price Series",
                    type: "financial",
                    isTransitionInEnabled: true,
                    isHighlightingEnabled: true,
                    displayType: "candlestick",
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    openMemberPath: "Open",
                    highMemberPath: "High",
                    lowMemberPath: "Low",
                    closeMemberPath: "Close",
                    showTooltip: true,
                    thickness: 1,
                    trendLineBrush: "rgba(73, 73, 73, .8)",
                    trendLineThickness: 5,
                    trendLineType: "exponentialAverage",
                    negativeBrush: "rgba(198, 45, 54, .8)"
                }],
           });

            $("#ohlcChart").igDataChart({
                width: "100%",
                height: "500px",
                title: "Microsoft (MSFT) vs. Adobe (ADBE)",
                subtitle: "A comparison of stocks over time",
                axes: [{
                    name: "xAxis",
                    type: "categoryX",
                    dataSource: data,
                    label: "Date",
                    interval: 10,
                    title: "Date",
                }, {
                    name: "yAxis",
                    type: "numericY",
                    title: "Price",
                }],
                series: [{
                    name: "series1",
                    dataSource: data,
                    title: "Price Series",
                    type: "financial",
                    isTransitionInEnabled: true,
                    displayType: "ohlc",
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    openMemberPath: "Open",
                    highMemberPath: "High",
                    lowMemberPath: "Low",
                    closeMemberPath: "Close",
                    showTooltip: true,
                    thickness: 2,
                    trendLineBrush: "rgba(68, 172, 214, .8)",
                    trendLineThickness: 5,
                    trendLineType: "exponentialAverage",
                    negativeBrush: "rgba(198, 45, 54, .8)"
                }, {
                    name: "series2",
                    dataSource: dataAdobe,
                    title: "Price Series",
                    type: "financial",
                    isTransitionInEnabled: true,
                    displayType: "ohlc",
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    openMemberPath: "Open",
                    highMemberPath: "High",
                    lowMemberPath: "Low",
                    closeMemberPath: "Close",
                    showTooltip: true,
                    thickness: 2,
                    trendLineBrush: "rgba(73, 73, 73, .8)",
                    trendLineThickness: 5,
                    trendLineType: "exponentialAverage",
                    negativeBrush: "rgba(198, 45, 54, .8)"
                }],
                horizontalZoomable: true,
                verticalZoomable: true,
                windowResponse: "immediate"
            });
        });
    </script>

    <style type="text/css">
        td { vertical-align: top; }
        .chartElement { margin-right: 10px; }
        .chart-container {
            width: 49%; 
            box-sizing:border-box; 
            float: left;
        }
            .chart-container h3 {
                text-align: center
            }
        #charts {
            padding : 1px;
        }
    </style>

    <div id="charts">
        <div class="chart-container">
            <h3>Candlestick</h3>
            <div id="candlestickChart" class="chartElement"></div>
        </div>
        <div class="chart-container">
            <h3>OHLC</h3>
            <div id="ohlcChart" class="chartElement"></div>
        </div>
    </div>
    <div>
        <div class="Quandldata-attribution">Stock data from: 
        <a href="http://www.quandl.com/" target="_blank">Quandl</a></div>
    </div>
</body>
</html>