Styling igFunnelChart

Topic Overview

Purpose

This topic explains how to customize the look-and-feel of the igFunnelChart™ control.

Required background

The following table lists the concepts and topics required as a prerequisite to understanding this topic.

• Concepts
  • Cascading Style Sheets
  • Applying themes by changing linked CSS files
• Topics
  • Styling and Theming Ignite UI for jQuery: This topic provides general information and a procedure for updating styles and themes in Ignite UI for jQuery® library.
  • igFunnelChart Overview: This topic provides conceptual information about the igFunnelChart control including its main features, minimum requirements, and user functionality.
  • Adding igFunnelChart: This topic demonstrates how to add the igFunnelChart control to an HTML page and bind it to data.

In this topic

This topic contains the following sections:

• Introduction
• Themes Overview
  • Themes summary chart
• Required Cascading Style Sheets (CSS)
  • Required CSS resources code: HTML
  • Required CSS resources code: MVC
• Funnel Chart Styles Reference
• igFunnelChart Styling Options
  • Style reference summary
  • Style reference summary chart
• Code Examples
  • Code Example: Configuring Inner and Outer Label Templates
  • Code Example: Configuring Slice Colors by CSS
  • Code Example: Configuring Slice Colors by Control Options
• Related Content
  • Topics
  • Samples
  • Resources

Introduction

The igFunnelChart control allows developers to create easily funnel chart in applications or web sites. The igFunnelChart control uses the jQuery UI CSS Framework for the purposes of applying styles and themes. By default, the igFunnelChart uses the IG theme which is a jQuery UI theme provided by Infragistics® for use in your applications. In addition to that, the IG theme has some specific styles that support funnel charts. This is needed because, for the purpose of customizing the look and feel of funnel charts, a general jQuery UI theme would not be sufficient. You must provide additional styles classes for altering elements specific to funnel charts like tooltips, and slices.

Detailed information about using themes with Ignite UI for jQuery library is available in the Styling and Theming Ignite UI for jQuery topic.

Note: The base theme of Ignite UI for jQuery is unnecessary for charts and may be omitted on pages that contain only charts.

Themes Overview

Ignite UI for jQuery offers the following themes for use with the igFunnelChart control:

• IG
• Metro

Refer to the summary chart below for a detailed explanation.

Themes summary chart

The following table summarizes the themes available with the igFunnelChart.

Theme	Description
IG	Path: <IG CSS root>/themes/infragistics/ File: infragistics.theme.css This theme defines general visual features for all Ignite UI for jQuery controls. Detailed information for using the IG theme is available in the Styling and Theming Ignite UI for jQuery topic.
Metro	Path: <IG CSS root>/themes/metro/ File: infragistics.theme.css This theme defines visual features with regard to the new Windows® 8 user interface and touch enabled devices. It features sharp corners and some different colors for slices.

Required Cascading Style Sheets (CSS)

The following CSS resources are necessary to correctly render funnel charts:

• infragistics.theme.css – contains the IG Theme

• infragistics.ui.chart.css – contains the Chart Structure classes

The following code snippets assume that the CSS resources reside in the Content/ig folder below the web site/application root.

Note: The following blocks provide information on manually including required CSS files; however, we recommend using the Infragistics Loader control to load these files into your page.

Required CSS resources code: HTML

In HTML:

Required CSS resources code: HTML
<link href="Content/ig/themes/Infragistics/infragistics.theme.css" rel="Stylesheet" />
<link href="Content/ig/structure/modules/infragistics.ui.chart.css" rel="Stylesheet" />

Required CSS resources code: MVC

In ASPX:

Required CSS resources code: MVC
<link href='@Url.Content("~/Content/ig/themes/Infragistics/infragistics.theme.css")'
      rel="stylesheet" type="text/css" />
<link href='@Url.Content("~/Content/ig/structure/modules/infragistics.ui.chart.css")'
      rel="stylesheet" type="text/css" />

Funnel Chart Styles Reference

The following table summarizes the purpose and functionality of the style classes used in the igFunnelChart control.

igFunnelChart Styling Options

Style reference summary

The igFunnelChart control is all about visual content and has a lot of properties and styling options for changing a charts layout and colors. Use CSS to define:

• Colors of slices
• Colors, shades, fonts and other CSS properties for tooltip formatting

With individual funnel chart control options you can define:

• Colors and outline for slices
• Style for slice labels text.

The following reference table catalogs all options for changing chart element colors and their purpose. When set, funnel chart options have precedence over style classes defined in CSS files. These options provide programmatic runtime changes to the rendering of charts.

Style reference summary chart

The following table summarizes the purpose and functionality of the igFunnelChart control’s styling properties.

Code examples summary

The following table lists the code examples included in this topic.

Code Example: Configuring Inner and Outer Label Templates

Description

This code example shows how to configure funnel chart templates for inner and outer labels by defining and invoking callback functions for each slice on the chart. The callback functions pass with arguments enabling considerable flexibility in creating a suitable label. The functions must return a string which is drawn on the chart.

Code

The following code snippet demonstrates how to configure callback functions for inner and outer labels in a funnel chart. The functions perform string manipulation on the input arguments and return a string that appears on the chart as a label for the corresponding slice.

In JavaScript:

$("#funnelChart").igFunnelChart({
    . . .
    formatInnerLabel: function (value, sliceNo, chart) {
        return "$" + value + " million";
    },
    formatOuterLabel: function (value, sliceNo, chart) {
        return "Division: " + value;
    }
});

Callback function arguments reference

Code Example: Configuring Slice Colors by CSS

Description

This code example shows how to customize slice colors by overriding CSS styles governing slice look and feel.

Code

The following code snippet overrides multiple igFunnelChart styles. It redefines background and outline colors for the first six slices and sets both the selected and unselected slice styles.

In HTML:

<style type="text/css">
    /* Redefine the styles from infragistics.theme.css that define fill and border colors for slices */
    .ui-chart-palette-1 { border-color: #00AADE; background-color: #00AADE }
    .ui-chart-palette-2 { border-color: #4B4B4D; background-color: #4B4B4D }
    .ui-chart-palette-3 { border-color: #FCB025; background-color: #FCB025 }
    .ui-chart-palette-4 { border-color: #EC6C2B; background-color: #EC6C2B }
    .ui-chart-palette-5 { border-color: #36C0F3; background-color: #36C0F3 }
    .ui-chart-palette-6 { border-color: #5B17A8; background-color: #5B17A8 }
    /* Redefine slice selected and unselected styles */
    .ui-funnel-slice-selected { opacity: 1; }
    .ui-funnel-slice-unselected { opacity: 0.4; border: 1px solid black; }
</style>

Code Example: Configuring Slice Colors by Control Options

Description

This code example shows how to customize slice colors by changing the funnel chart options controlling look and feel of the slice. When configuring the brushes, outlines and outlineThickness options this configuration takes precedence over CSS for the corresponding visual elements.

Code

The code example below shows how to configure custom colors for slice backgrounds and outlines. The example only provides the essential code for brushes, outlines and outlineThickness omitting all other igFunnelChart configurations.

In JavaScript:

$("#funnelChart").igFunnelChart({
    . . .
    brushes: ["#7DC3D9", "#3e5354", "#9EB5B4", "#5DD1C6", "#AFD1CE", "#2B768E"],
    outlines: [ "#3189A6", "#212D2E", "#5C7877", "#2FA498", "#487D78", "#163F4B" ],
    outlineThickness: 3
});

Related Content

Topics

The following topics provide additional information related to this topic.

• Binding igFunnelChart to Data: This topic explains how to bind the igFunnelChart control to various data sources.

• Configuring igFunnelChart: This topic explains how to configure different visual features and behavior of the igFunnelChart control.

• Styling igFunnelChart: This topic explains how to customize the look-and-feel of the igFunnelChart control.

• Accessibility Compliance (igFunnelChart): This topic explains the igFunnelChart control’s accessibility features and provides advice on how to achieve accessibility compliance for pages containing charts.

• Known Issues and Limitations (igFunnelChart): This topic lists the known issues related to the igFunnelChart control.

• jQuery and MVC API Links (igFunnelChart): This topic lists the links to the API reference documentation for the igFunnelChart control.

Samples

The following sample provides additional information related to this topic.

• Slice Selection: This sample demonstrates enabling the slice selection functionality and handling the sliceClicked event.

Resources

The following material (available outside the Infragistics family of content) provides additional information related to this topic.

• jQuery Themeroller: Provides jQuery UI themes for preview and download.