Hi,
I'm using the igDataChart and I want to show the legends of a particular series. The only way I found to do this is to create a custom <div> in wich legend are going to be shown, assign an id and then set the id in the element option of the legend.
<div>
element
legend
To start with, I'm not even sure why I need to create the div element as it perfectly could be created by the igDataChart control itself. Besides, I don't want to have an id in that div as I will be showing multiple charts on the same page and having ids could lead to an id duplication. How can I do to set the element option in some other way (i.e. custom selector, jQuery object or DOM Element)?
Thanks,
Hello Hugo, actually, this template should work for you. Note that you were close in your simple approach but instead of using square brackets [] after an item object, you should have used just a dot, e.g.
<div> ${series.valueMemberPath}: ${item.${series.valueMemberPath}}</div>
to provide better solution, I will need your data source and source code that you use to create the chart. So can you post it here?
Hi Martin.
Thanks for your example. That works and its close from what I need. I still have one issue though. I do not have fixed categories for each fragment that I can write in the template (like Canada, China, etc.).
So I've tried different approaches to get the template as I need it but none of them worked. I'll share the details one by one.
Simple approach:
Template:
<span>${series.valueMemberPath}</span> <span>${item[${series.valueMemberPath}]}</span>
Result:
Function approach
<span>${globalGetValue(item, series.valueMemberPath)}</span>
Function defined in JS file in a global scope:
function globalGetValue(item, prop) { console.log("function called!"); return item[prop]; }
Tooltip is shown but uses the variables/functions defined in the template litarally:
Iteration approach:
{{each(prop, val) item}} {{if ${series.valueMemberPath} === ${prop}}} <span>${prop}</span> <span>${val}</span> {{/if}} {{/each}}
No tooltip is shown at all.
I implemented custom tooltip that displays fragment name and its value when the end-user hovers over fragments.
<!DOCTYPE html> <html> <head> <title>DC Stacked Series + Legend</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> <!-- 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> {{if ${series.valueMemberPath} === "Canada"}} Country: <span style="font-weight: bold">Canada</span><br/> Value: <span style="font-weight: bold">${item.Canada} M</span><br/> {{elseif ${series.valueMemberPath} === "China"}} Country: <span style="font-weight: bold">China</span><br/> Value: <span style="font-weight: bold">${item.China} M</span><br/> {{elseif ${series.valueMemberPath} === "UnitedStates"}} Country: <span style="font-weight: bold">United States</span><br/> Value: <span style="font-weight: bold">${item.UnitedStates} M</span><br/> {{elseif ${series.valueMemberPath} === "Russia"}} Country: <span style="font-weight: bold">Russia</span><br/> Value: <span style="font-weight: bold">${item.Russia} M</span><br/> {{elseif ${series.valueMemberPath} === "SaudiArabia"}} Country: <span style="font-weight: bold">Saudi Arabia</span><br/> Value: <span style="font-weight: bold">${item.SaudiArabia} M</span><br/> {{/if}} Year: <span style="font-weight: bold">${item.Year}</span><br/> </div> </script> <script type="text/javascript"> $(function () { var dataItems = getDataSource(); $("#chart").igDataChart({ height: "300px", width: "100%", horizontalZoomable: true, verticalZoomable: true, windowResponse: "immediate", title: "Stacked Bar Chart", legend: { element: "legend" }, dataSource: dataItems, 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", outline: "transparent", series: [ // create stacked fragment and show it legend item based on passed boolean CreateStackedWithLegend(true, "Canada"), CreateStackedWithLegend(true, "Russia"), CreateStackedWithLegend(true, "China"), CreateStackedWithLegend(true, "UnitedStates"), CreateStackedWithLegend(true, "SaudiArabia"), ] } return series; } function CreateStackedWithLegend(showLegendItem, memberPath) { var stackFragment = { name: memberPath + "Fragment", valueMemberPath: memberPath, type: "stackedFragment", showTooltip: true, // setting custom tooltip tooltipTemplate: "tooltipTemplate" }; var country = memberPath; if (country === "UnitedStates") country = "United States"; if (country === "SaudiArabia") country = "Saudi Arabia"; if (!showLegendItem) { stackFragment.legendItemVisibility = "collapsed"; stackFragment.title = country; } else { stackFragment.legendItemVisibility = "visible"; // calculating total for the stacked fragment and setting to it to title that will show in legend let total = 0; for (const item of dataItems) { total += item[memberPath]; } stackFragment.title = country + ": " + Math.round(total) + "M (total)"; } return stackFragment; } function getDataSource(){ var data = [ { "Year": 2005, "Canada": 18.8932, "SaudiArabia": 25.4401, "Russia": 51.0796, "UnitedStates": 69.4437, "China": 63.9524, }, { "Year": 2006, "Canada": 19.2273, "SaudiArabia": 24.6105, "Russia": 52.0557, "UnitedStates": 70.7539, "China": 68.2333, }, { "Year": 2007, "Canada": 19.5439, "SaudiArabia": 23.7326, "Russia": 52.5599, "UnitedStates": 71.4000, "China": 73.2809, }, { "Year": 2008, "Canada": 19.0196, "SaudiArabia": 25.1682, "Russia": 52.5460, "UnitedStates": 73.2178, "China": 78.3599, }, { "Year": 2009, "Canada": 18.3249, "SaudiArabia": 22.837, "Russia": 50.4291, "UnitedStates": 72.6409, "China": 84.0643, }, { "Year": 2010, "Canada": 18.3358, "SaudiArabia": 24.7442, "Russia": 53.2232, "UnitedStates": 74.7951, "China": 90.3918, } ]; return data; } }); </script> </body> </html>
Hi Martin. That worked awesome, thanks for your fast reply!
There is one last thing you can help me with. I'd also like to show the value of each fragment somehow. For example, Canada in 2005: 18.8923. As far as I understand, showing text on the bar itself is currently not supported. I thought I could use the tooltips instead. How can I customize them so that they show both the fragment name and the value in the bar where the mouse is.
For example, if I were to put the cursor over the purple on 2005 it should show "Canada 18.8923" but in 2006 "Canada 19.2273".
Thank you very much