Available in the Full Version

Data Chart - Series Custom Highlighting

This sample demonstrates how to use the assigningCategoryStyle event to change the highlighting to fade non highlighted columns instead of changing the highlighted column.
Chart Options
Transition Duration
Population 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>Custom Series Highlighting</title>

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

    <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.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/uk-france-population.js"></script>

    <script type="text/javascript">
        $(function () {
            
            var data = [
                    { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
                    { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
                    { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
                    { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
                    { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
            ];

            $("#chart").igDataChart({
                width: "100%",
                height: "400px",
                title: "Population per Country",
                subtitle: "Population from 2005",
                dataSource: data,
                axes: [
                    {
                        name: "NameAxis",
                        type: "categoryX",
                        title: "Country",
                        label: "CountryName"
                    },
                    {
                        name: "PopulationAxis",
                        type: "numericY",
                        minimumValue: 0,
                        title: "Millions of People",
                    }
                ],

                series: [{
                  name: "2005Population",
                  type: "column",
                  title: "2005 Population",  
                  isHighlightingEnabled: true,
                  isTransitionInEnabled: true,
                  xAxis: "NameAxis",
                  yAxis: "PopulationAxis",
                  valueMemberPath: "Pop2005",
                  showTooltip: true,
                  isCustomCategoryStyleAllowed: true,
                  isAssigningCategoryStyleAssigned: true
                }],
                
                horizontalZoomable: true,
                assigningCategoryStyle: function (e, ui) {
                    var minOpacity = .3, opacity = 1.0, curr;
                    if (ui.sumAllSeriesHighlightingProgress > 0.0) {
                        var progress = 0;
                        if (ui.highlightingInfo !== null) {
                            progress = ui.highlightingInfo.progress;
                        }

                        progress = progress - ui.sumAllSeriesHighlightingProgress;

                        opacity = minOpacity + (1.0 + progress) * (1.0 - minOpacity);
                        ui.opacity = opacity;
                        ui.highlightingHandled = true;

                        
                    }
                },
                verticalZoomable: true,
                windowResponse: "immediate"
            });
            
            // Transiton Duration Slider
            $("#transitionDurationSlider").slider({
                min: 0,
                max: 5,
                step: 0.01,
                value: 2,
                slide: function (event, ui) {
                    $("#chart").igDataChart("option", "highlightingTransitionDuration", ui.value * 1000 );
                    $("#transitionDurationLabel").text(ui.value);
                }
            });
        });
    </script>

    <style type="text/css">
        
        td { vertical-align: top; }
        .chartElement {
            padding-bottom: 20px;
        }

        .selectionOptions
        {
            margin-bottom: 10px;   
        }
        .sliderBounds {
    	   width: 95px;
    	   margin: 6px 3px 6px 6px;
			display: inline-block;
    	}
    	
    	.selectBounds {
    	   width: 120px;
    	}
    </style>
    <div id="chart" class="chartElement"/>  
    <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">2</label>
            </div>
        </fieldset>    
    </div>
    <div style="float: right" class="Quandl-attribution">
        Population data from:
        <a href="http://www.quandl.com/" target="_blank">Quandl</a>
    </div>
</body>
</html>