ui.igFinancialChart

ui.igFinancialChart_image

The igFinancialChart is a lightweight, high-performance chart. This chart can be easily configured to display financial data using an extremely simple and intuitive API. All you need to do is bind your data (a collection or a collection of collections) and the chart takes care of everything else.

The following code snippet demonstrates how to initialize the igFinancialChart control.

For details on how to reference the required scripts and themes for the igFinancialChart control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

      <!DOCTYPE html>
      <html>
      <head>       
        <title>Ignite UI igFinancialChart</title>
             
        <link href="local/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
        <link href="local/css/structure/infragistics.css" rel="stylesheet" />
     
        <link rel="stylesheet" href="local/css/structure/modules/infragistics.ui.chart.css" />
        <link rel="stylesheet" href="local/css/structure/modules/infragistics.ui.financialchart.css" />
 
        <script src="https://igniteui.com/js/modernizr.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
             
        <script src="local/js/infragistics.core.js"></script>
        <script src="local/js/infragistics.dv.js"></script>     
     
      </head>
      <body>
     
        <div id="chart" style="width:800px;height:600px"></div>
     
        <script>
     
 
            $(function () {
                var data = [];
                var open = 500
                var close = 0;
                var high = 0;
                var low = 0;
                var mod = 0;
                var volume = 10000;
                var total = 30;
                var range = 5;
                var date = new Date(126240840000);
 
                for(i=1; i<total; i++){
                    low = open - (getRandomBetween(0.1, 0.9) * range);
                    high = open + (getRandomBetween(0.1, 0.9) * range);
                    mod = getRandomBetween(0.1, 0.9) - 0.4;
                    close = open + (mod * range);
 
                    var item = {"Low": low, "High": high, "Volume": volume, "Date": date, "Open": open, "Close": close};
                    data.push(item);
 
                    open = open + (mod * range * 2);
                    volume = volume + (mod * range * 100);
                    date = new Date(126240840000 + (86400000 * i));
                }
 
                $("#chart").igFinancialChart({
                    dataSource: data
                });
     
            });
 
            function getRandomBetween(min, max){
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
 
        </script>   
    </body>
</html>

Related Samples

Related Topics

Dependencies

jquery.js
jquery-ui.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.datasource.js
infragistics.templating.js
infragistics.ext_core.js
infragistics.ext_collections.js
infragistics.ext_ui.js
infragistics.dv_core.js
infragistics.dv_datasource.js
infragistics.dv_dataseriesadapter.js
infragistics.dv_geometry.js
infragistics.dv_jquerydom.js
infragistics.dv_interactivity.js
infragistics.dv_geo.js
infragistics.datachart_core.js
infragistics.datachart_interactivity.js
infragistics.datachart_extendedaxes.js
infragistics.dvcommonwidget.js
infragistics.ui.basechart.js
infragistics.financialchart.js
infragistics.ui.widget.js
infragistics.ui.financialchart.js

Inherits

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.