igDataChart legend set element option without id

I modified tooltip template in my sample and I added tooltipShowing function on the DataChart to store value of an item for a given series.valueMemberPath as item.tooltipValue property:

<!DOCTYPE html>
<html>

<head>
    <title>DC Stacked Series + Tooltip</title>
    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2020.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2020.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <!--CSS file specific for chart styling -->
    <link href="http://cdn-na.infragistics.com/igniteui/2020.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>
    
     <!-- <script type='text/javascript' src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>  -->
     
    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.dv.js"></script>
</head>

<body>
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div id="chart"></div>
        <div id="legend"></div>
    </div>

    <!-- Custom Tooltip Template -->
    <script id="tooltipTemplate" type="text/x-jquery-tmpl">
       <div>
         <div>Data Name: ${item.Year}</div>
          <div>Column Name: ${series.valueMemberPath} </div>
          <!-- note that tooltipValue is added in the tooltipShowing function -->
          <div>Column Value: ${item.tooltipValue} </div> 
                        
          <!-- note this syntax is not supported:  -->
          <!-- <div>Column Value: ${item.${series.valueMemberPath}}  </div> -->
        </div>
    </script>

    <script type="text/javascript">
       
        $(function () {

         var dataItems = getDataSource();
         var dataColumns = [];
         var dataTotals = {};
         for (i = 0; i < dataItems.length; i++) {
            for (var key in dataItems[i]) {
                if (key == "Year") continue;
                
                if (i == 0) {
                    dataColumns.push(key);
                    dataTotals[key] = 0;
                }
                dataTotals[key] += dataItems[i][key];
            }
        }
 
         $("#chart").igDataChart({
            height: "300px",
            width: "100%",
            horizontalZoomable: true,
            verticalZoomable: true,
            windowResponse: "immediate",
            title: "Stacked Bar Chart",
            legend: { element: "legend" },
            dataSource: dataItems,  
            
            // added this function to resolve displaying values in tooltip templates
            tooltipShowing: function (e, ui) {
                	var valueMemberPath = ui.series.valueMemberPath;
                  ui.item.tooltipValue = ui.item[valueMemberPath];
            },
            
            axes: [{
                name: "yAxis",
                type: "categoryY",
                label: "Year",
            }, {
                name: "xAxis",
                type: "numericX",
            }],
            series: [ CreateStackedSeries() ],
         });

         function CreateStackedSeries() {
            var series = {
                name: "stackedBarSeries",
                type: "stackedBar",
                xAxis: "xAxis",
                yAxis: "yAxis",
                showDefaultTooltip: true,
                series: CreateFragments(dataColumns)
            }
            return series;
        }

         function CreateFragments(dataColumns) {
            var fragments = [];
            for (i = 0; i < dataColumns.length; i++) {
                var key = dataColumns[i];
                console.log("CreateFragments " + key);
                var fragment = CreateStackedFragment(key);
                fragments.push(fragment); 
            }
            return fragments;
        }

         function CreateStackedFragment(memberPath) {
            var stackFragment = {
                name: memberPath + "Fragment",
                valueMemberPath: memberPath,
                type: "stackedFragment",
                showTooltip: true,
                title: memberPath + " (" + Math.round(dataTotals[memberPath]) + " Total)",
                tooltipTemplate: "tooltipTemplate"
            };
            
            return stackFragment;
        }

         function getDataSource(){
       
            var data = [
                {
                    "Year": 2005,
                    "Canada": 18.8932,
                    "Europe": 25.4401,
                    "Russia": 51.0796,
                    "America": 69.4437,
                    "China": 63.9524,
                },
                {
                    "Year": 2006,
                    "Canada": 19.2273,
                    "Europe": 24.6105,
                    "Russia": 52.0557,
                    "America": 70.7539,
                    "China": 68.2333,
                },
                {
                    "Year": 2007,
                    "Canada": 19.5439,
                    "Europe": 23.7326,
                    "Russia": 52.5599,
                    "America": 71.4000,
                    "China": 73.2809,
                },
            ];
            
            return data;
        }


        });
    </script>

</body>
</html>

<div class="chart" id="chart"></div> <div class="chart-legend chart-legend-horizontal" id="chartLegend"></div> <script type="text/x-jquery-tmpl" id="template"> <div>${series.valueMemberPath}: ${item.${series.valueMemberPath}}</div> </script> <script type="text/javascript"> function linqSelect(arr, fnSelect) { var newArr = []; for (var i = 0; i < arr.length; i++) { newArr.push(fnSelect(arr[i])); } return newArr; }; let dataSource = [{"DiaSemana":"Martes","ENF4":0,"ENFE":5,"ADAVI":1,"CAP":4},{"DiaSemana":"Lunes","ENF4":0,"ENFE":7,"ADAVI":1,"CAP":8},{"DiaSemana":"Domingo","ENF4":0,"ENFE":7,"ADAVI":1,"CAP":8},{"DiaSemana":"Sábado","ENF4":0,"ENFE":5,"ADAVI":1,"CAP":7},{"DiaSemana":"Viernes","ENF4":0,"ENFE":2,"ADAVI":1,"CAP":1},{"DiaSemana":"Jueves","ENF4":0,"ENFE":7,"ADAVI":1,"CAP":6},{"DiaSemana":"Miércoles","ENF4":0,"ENFE":3,"ADAVI":1,"CAP":4}]; let xAxis = { name: "xAxis", type: "numericX" }, yAxis = { name: "yAxis", type: "categoryY", label: "DiaSemana", gap: 0.5, }, ausencias = [], totales = {}; for (i = 0; i < dataSource.length; i++) { for (var key in dataSource[i]) { if (key == "DiaSemana") continue; if (i == 0) { ausencias.push(key); totales[key] = 0; } totales[key] += dataSource[i][key]; } } $("#chart").igDataChart({ dataSource: dataSource, height: 300, width: "100%", title: "Chart Title", axes: [xAxis, yAxis], legend: { element: "chartLegend" }, series: [ { name: "series", type: "stackedBar", xAxis: xAxis.name, yAxis: yAxis.name, outline: "transparent", isTransitionInEnabled: true, series: linqSelect(ausencias, function (a) { return { name: a + "Fragment", valueMemberPath: a, type: "stackedFragment", showTooltip: true, tooltipTemplate: "template", legendItemVisibility: "visible", title: a + " " + totales[a] }; }) } ] }); </script>

Top Replies