Helo there, I hope my subject isn't too general.
I was experimenting with your trial and came across the pivotgrid with the dataselector, it works pretty well, I could reproduce some examples and experiment some new things, but then I came across this situation. I would also need the information displayed in the table on a chart too. I saw that you have an example for this, it works well, but as I see, with two conditions.
You cant drag another item to rows, columns and only the rowheaders can expand.
In my case I would need it to work like this example https://www.igniteui.com/pivot-grid/overview but with a chart. Is it possible ?
I'm facing problems with these two examples together because when you expand rows and columns, the row or column with colspan mess things up.
If there isn't a way to work with your chart, is there any way I could retrieve the information from the grid to put it in a chart ? I tried to work with the codes from the examples (adapting it a little, debugging) but without success either.
Is there a way to retrieve the data from the grid ? Or I don't know, get the items dragged to the grid and then access their data ? Or get the two examples to work together ?
Cheers
Hello,
I have looked into the specified samples and what I could share is (in the context of this online sample )
$pivotGrid.data("igPivotGrid")._tableView is the igPivotGrid’s data, which could be used for the igDataChart as a dataSource. In the sample, you could find the updateChart function to accept both the tableView and transpose. Also a check is made and if the data is not appropriate - igDataChart is destroyed and created anew. This function should be different for any particular scenario, depending on the rows and columns items in the igPivotGrid.
So summarizing,
Is there a way to retrieve the data from the grid ?
I suggest referring to the $pivotGrid.data("igPivotGrid")._tableView, and further building the necessary custom functionality based on the online sample .
Well, first thanks for the reply.
I'll try to be more specific about my case.
My table look like this now: https://i.imgur.com/WxwQXnX.jpg
Sellers and periods expanded. My problem is the cell marked in the image below:
https://i.imgur.com/DgQtAGG.jpg
And then the chart looks like this:
https://i.imgur.com/hNdlljJ.jpg
Did you get the problem ? I was wondering if there is a workaround for this kind of thing.
Since it is a code specific issue, could you please share the CodeSample you have being working on, so I could look at it and debug it?
Sure
<!DOCTYPE html><html><head> <title></title>
<!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/jquery/20141/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/jquery/20141/latest/css/structure/infragistics.css" rel="stylesheet" /> <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.dv.js"></script> <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.lob.js"></script> <style> .ig-chart-root { width: 79%; float: left; margin-right: 1%; margin-bottom: 10px; }
.ig-chart-legend { width: 19%; float: left; } </style></head><body> <script type="text/javascript" src="http://www.igniteui.com/data-files/sales.js"></script>
<script> $(function () { var $pivotGrid = $("#pivotGrid"), $transposeCheckBox = $("#transpose"), $chart = $("#olapChart"), hasValue = function (value) { return value !== undefined && value !== null && value.count() > 0; }, dataSource = new $.ig.OlapFlatDataSource({ dataSource: sales, metadata: { cube: { name: "Sales", caption: "Sales", measuresDimension: { caption: "Measures", measures: [ { caption: "Units Sold", name: "UnitsSold", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitsSold') }, { caption: "Unit Price", name: "UnitPrice", aggregator: $.ig.OlapUtilities.prototype.sumAggregator('UnitPrice', 2) }] }, dimensions: [ { caption: "Date", name: "Date", hierarchies: [ $.ig.OlapUtilities.prototype.getDateHierarchy( "Date", ["year", "quarter", "month", "date"], "Dates", "Date", ["Year", "Quarter", "Month", "Day"], "All Periods")] }, { caption: "Location", name: "Location", hierarchies: [{ caption: "Location", name: "Location", levels: [ { name: "AllLocations", levelCaption: "All Locations", memberProvider: function (item) { return "All Locations"; } }, { name: "Country", levelCaption: "Country", memberProvider: function (item) { return item.Country; } }, { name: "City", levelCaption: "City", memberProvider: function (item) { return item.City; } }] }] }, { caption: "Product", name: "Product", hierarchies: [{ caption: "Product", name: "Product", levels: [ { name: "AllProducts", levelCaption: "All Products", memberProvider: function (item) { return "All Products"; } }, { name: "ProductCategory", levelCaption: "Category", memberProvider: function (item) { return item.ProductCategory; } }] }] }, { caption: "Seller", name: "Seller", hierarchies: [{ caption: "Seller", name: "Seller", levels: [ { name: "AllSellers", levelCaption: "All Sellers", memberProvider: function (item) { return "All Sellers"; } }, { name: "SellerName", levelCaption: "Seller", memberProvider: function (item) { return item.SellerName; } }] }] } ] } }, rows: "[Date].[Dates]", measures: "[Measures].[UnitsSold],[Measures].[UnitPrice]" }), getCellData = function (rowIndex, columnIndex, columnCount, cells) { var cellOrdinal = (rowIndex * columnCount) + columnIndex; if (!hasValue(cells)) { return 0; } for (var index = 0; index < cells.count() ; index++) { var cell = cells.item(index); if (cell.cellOrdinal() == cellOrdinal) { return new Number(cell.value()); } } return 0; }, updateChart = function (tableView, transpose) { var columnHeaders, rowHeaders, cells = tableView.resultCells(), dataArray = [], series = [], rowHeaderIndex, columnHeaderIndex, ds, headerCell, columnCount, rowCount, data;
if (transpose) { columnHeaders = tableView.rowHeaders(), rowHeaders = tableView.columnHeaders() } else { columnHeaders = tableView.columnHeaders(), rowHeaders = tableView.rowHeaders() }
if (!hasValue(cells) && !hasValue(rowHeaders) && !hasValue(columnHeaders)) { $chart.igDataChart("destroy"); return; }
if (!hasValue(rowHeaders)) { rowHeaders = [{ caption: function () { return ""; } }]; }
if (!hasValue(columnHeaders)) { columnHeaders = [{ caption: function () { return ""; } }]; }
for (rowHeaderIndex = 0; rowHeaderIndex < rowHeaders.count() ; rowHeaderIndex++) { headerCell = rowHeaders.item(rowHeaderIndex); columnCount = columnHeaders.count(); rowCount = rowHeaders.count(); data = { caption: headerCell.caption() }; var value; for (columnHeaderIndex = 0; columnHeaderIndex < columnCount; columnHeaderIndex++) { if (transpose) { value = getCellData(columnHeaderIndex, rowHeaderIndex, rowCount, cells, transpose); } else { value = getCellData(rowHeaderIndex, columnHeaderIndex, columnCount, cells, transpose); } data["col" + columnHeaderIndex] = value; }
dataArray[rowHeaderIndex] = data; console.log("Col name " + headerCell.caption()); console.log("Value " + value.toString()); };
for (columnHeaderIndex = 0; columnHeaderIndex < columnHeaders.count() ; columnHeaderIndex++) { series[columnHeaderIndex] = { name: "series" + columnHeaderIndex, title: columnHeaders.item(columnHeaderIndex).caption(), type: "column", xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "col" + columnHeaderIndex }; };
ds = new $.ig.DataSource({ dataSource: dataArray });
if ($chart.data("igDataChart")) { $chart.igDataChart("destroy"); } $chart.igDataChart({ width: "700px", height: "500px", dataSource: ds, series: series, legend: { element: "olapChartLegend" }, axes: [{ name: "xAxis", type: "categoryX", label: "caption" }, { name: "yAxis", type: "numericY" }], verticalZoomable: true, horizontalZoomable: true, windowResponse: "immediate" }); }; $('#dataSelector').igPivotDataSelector({ dataSource: dataSource, height: "565px", width: "230px" }); $pivotGrid.igPivotGrid({ dataSource: dataSource, pivotGridRendered: function () { updateChart($pivotGrid.data("igPivotGrid")._tableView, $transposeCheckBox.is(':checked')); } }); $transposeCheckBox.click(function () { updateChart($pivotGrid.data("igPivotGrid")._tableView, $transposeCheckBox.is(':checked')); }); }); </script> <div style="height: 500px"> <div id="olapChart" class="ig-chart-root"></div> <div id="olapChartLegend" class="ig-chart-legend"></div> <div style="float: left; margin-top: 10px"> <label for="transpose" style="vertical-align: text-bottom">Transpose chart</label> <input type="checkbox" id="transpose" style="vertical-align: text-bottom" /> </div> </div> <div id="dataSelector"></div> <div id="pivotGrid"></div></body></html>
Thanks :)
It is interesting when running this sample, the last value does not appear on my side, and yet there is an empty space reserved for it in the chart. I will further look into this and come back to you.
Hope you can do better than I did. Also, did you try to drag another fields to columns, measures... as I showed in my example ? Expanding rows and columns results in something worse than your graph.
Hello aaa bbb,
We will update the demo too.
If I can provide further assistance, feel free to contact me.
Sincerely,
Tsanna
Hello Tsanna,
Apparently it works great. Are you planning to update the demo too ? I'm sure a lot of people would like this to work for them too.
No more questions for now, thank you very much Tsanna and Ivaylo.
After further testing, I found that the logic that is related to the adding of the respective columns to the chart is not correct. It seems that "All Sellers" column that spans all columns under it (seller's names) is added to the chart with 0 value at last position, although the last column should be the one that summarizes all sellers data. Therefore I've added the following code to the updateChart function:
for (i = 0; i < columnCount; i++) { if (typeof columnHeaders[i].columnSpan === "function" && columnHeaders[i].columnSpan() > 1) { continue; }
actualColumnsCount++; }
It iterates through the columns and checks whether the respective columnHeader spans more than one other columnHeader. If true, then the columnHeader is skipped (not added to the chart). Now the chart displays the data the way that it should be. I'm attaching the sample with these modifications for your reference.
If you have any questions, please let me know.
After following the steps to reproduce the issue, I was able to reproduce it on my side too.
Currently I'm looking into this matter what could be the reason that causes the columns from every next chart to increase with one. I will update you with any available information as soon as possible.
I think you didn't really try to reproduce the problem. Yes, I'm using that example of integration together with this other sample of pivot grid that you provided.
I don't remember how the columns/rows are arranged by default in the sample that I posted, but to reproduce the problem you must drag all period to rows, unit solds as measure and sellers to the column. If you expand only the sellers, then you'll have the same graph as Ivaylo which is already wrong as he posted. AND, if you expand the rows (periods), then you'll get the same ugly graph that I got. Do you get it now ? You can see that it has a problem just by looking at the end of the groups. For "All Periods" you'll have 1 bar more than you should, for the next you'll have 2 more and so on.
Also, I'm not telling you must modify or remove the "All Sellers" header, I was just pointing that because of it, the error was ocurring.
Thanks in advance.