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 aaa bbb,
As far as I can see you're using the following sample: https://www.igniteui.com/pivot-grid/chart-integration to base your application on. And I can't understand what concerns you about displaying the pivot grid data in chart. On my side everything seems to work correctly. Regarding the "All Sellers" level that acts as multi-column header, please note that this is the default layout configuration of the pivot grid and it works this way. You can see that the sample code from the API documentation demonstrates the same look: https://www.igniteui.com/help/api/2014.1/ig.OlapFlatDataSource
If I can provide further assistance, feel free to contact me.
Sincerely,
Tsanna
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.
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.
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 :)
Hello,
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?