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.