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,I created an example how you can choose which stacked fragments to show (using fragment's legendItemVisibility property) in the legend as well as display sum of values in a given stacked fragment (using fragment's title property).Let me know if you have more questions.
<!DOCTYPE html> <html> <head> <title>DC Stacked Series + Legend</title> <!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2019.2/latest/css/structure/infragistics.css" rel="stylesheet" /> <!--CSS file specific for chart styling --> <link href="http://cdn-na.infragistics.com/igniteui/2019.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/2019.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.dv.js"></script> </head> <body> <script type="text/javascript" src="https://www.igniteui.com/data-files/world-energy-production.js"></script> <script> $(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(false, "China"), CreateStackedWithLegend(true, "UnitedStates"), CreateStackedWithLegend(false, "SaudiArabia"), ] } return series; } function CreateStackedWithLegend(showLegendItem, memberPath) { var stackFragment = { name: memberPath + "Fragment", valueMemberPath: memberPath, type: "stackedFragment", showTooltip: true, tooltipTemplate: memberPath, }; if (!showLegendItem) { stackFragment.legendItemVisibility = "collapsed"; stackFragment.title = memberPath; } 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 = memberPath + ": " + 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> <div style="width: 100%; height: 100%; display: flex; flex-direction: column;"> <div id="chart"></div> <div id="legend" ></div> </div> </body> </html>
Hello Martin, thanks for the quick reply.
I want to show the name of its fragment and the total ammount on all bars (i.e.: SUM). It would look something like "Canada: 102"
Thanks
Hello Hugo,
Thank you for getting back to me!
Could you please elaborate on the following: “value for that fragment in the whole graph”? I have prepared the following sample for you. As you can observe the legend is showing only the fragment name by default. Do you expect something like Canada – 16.9873 (an average value) or like Canada – 2005: 16.8, 2006: 17.3, 2007: 17.0 and so on. This information is going to be very helpful for determining whether such behavior is possible.
Looking forward to hearing from you!
Best Regards,Martin EvtimovAssociate Software DeveloperInfragistics, Inc.
Hi Martin, thanks for the reply.
I've just suggested the product idea although at this point of maturity of the product I think this kind of things are closer to an issue rather than just a suggestion.
Anyways, I'd also very much appreciate your help with another thing related to chart's legend. I have a stacked-bar chart like so:
The legend I want to show is regarding each fragment on the bars (i.e., each color). But I want to show not only the fragment name but also a value for that fragment in the whole graph. I cannot seem to find how can I customize the legend's content. How can I do this?
Thank you for contacting Infragistics Support!
After doing some research, I found that when the legend property of the igDataChart is set (legend: { element: “elementID” }) it internally tries to find a DOM element with id = “elemendID”. As soon as such element has been found an html table would be rendered within it. Each row of this table will represent a particular series of the chart.
Having this in mind you can consider this element (which could be actually not only <div> but any other selector as well (span, p etc.)) as a hook which will indicate the igDataChart where to render its legend.
Having this in mind I can verify that currently the only way of using the build-in legend functionality is via providing the id of some DOM element to the igDataChart. In case your requirements is to pass not an id but an HTML element or something else I can suggest submitting a new product idea. You can suggest new product ideas for future versions (or vote for existing ones) here.
There are many benefits to submitting a product idea:
- Direct communication with our product management team regarding your product idea.
- Notifications whenever new information regarding your idea becomes available.
- Ability to vote on your favorite product ideas to let us know which ones are the most important to you. You will have ten votes for this and can change which ideas you are voting for at any time.
- Allow you to shape the future of our products by requesting new controls and products altogether.
- You and other developers can discuss existing product ideas with members of our Product Management team.
Steps to create your idea:
The Product Idea site puts you in the driver’s seat and allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
Please let me know if you need any further information!
Best Regards, Martin Evtimov Associate Software Developer Infragistics, Inc.