ui.igShapeChart

ui.igShapeChart_image

The igShapeChart is a lightweight, highly performant chart. This chart can be easily configured to display numeric or shapefile 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 igShapeChart control.

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

Code Sample

      <!DOCTYPE html>
      <html>
      <head>
        <title>Ignite UI igShapeChart</title>
 
        <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>
 
        <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />   
        <link href="css/structure/modules/infragistics.ui.shared.css" rel="stylesheet" />
        <link href="css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />
          <link href="css/structure/modules/infragistics.ui.shapechart.css" rel="stylesheet" />   
   
        <script src="js/infragistics.core.js"></script>
        <script src="js/infragistics.dv.js"></script>  
   
      </head>
 
      <body>
 
      <style>
          div
        {
            display: inline-block;
            vertical-align: top
        }
      </style>
 
 
      <div id="shapeChart"></div>
      <div id="legend"></div>
 
      <script>
         
            var data = [
            {
                "Units": 100, "Revenue": 1800, "VariableCost": 600, "FixedCost": 1000,
            }];
              
         $(function () {            
            $("#shapeChart").igShapeChart({               
                dataSource: data,
                        thickness: 3,
                width: "500px",
                height: "500px",
                yAxisTitle: "Price ($)",
                xAxisTitle: "Number of Units",               
                brushes: ["#7F2AFA", "#FF3100", "#02B602", "#7222E7", "#C62600", "#808080", "#282828", "#029802", "#078FE4"],
                legend: $("#legend")
            });
 
            $("#legend").igChartLegend({});
        });
 
      </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.datachart_scatter.js
infragistics.datachart_shape.js
infragistics.shapechart.js
infragistics.ui.widget.js
infragistics.ui.shapechart.js

Inherits

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