Server-side Data - ComponentOne Data Services

The PivotEngine can connect to the ComponentOne Web API's DataEngine Services. Once the engine is connected to the server, you can build views and display results. This sample shows a PivotEngine connected to an AdventureWorks OLAP cube (via C1 WebAPI). You can use the PivotPanel to create views and the PivotGrid to display the results.

For more details on using wijmo.olap with ComponentOne Data Services, plase see ComponentOne Data Engine WebApi.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // initialize pivot engine var svcUrl = 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20173.114/api/dataengine/'; var ngCube = new wjOlap.PivotEngine({ // // connect to ComponentOne Data Service itemsSource: `${svcUrl}complex10`, // // build default view valueFields: ['Sales', 'Downloads'], rowFields: ['Country', 'Product'] }); // // show pivot panel var pivotPanel = new wjOlap.PivotPanel('#pivotPanel', { itemsSource: ngCube }); // // show summary var pivotGrid = new wjOlap.PivotGrid('#pivotGrid', { itemsSource: ngCube }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Engine C1 Data Engine</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <p> Drag and drop fields to build views: </p> <div id="pivotPanel"></div> </div> <div class="col-xs-6"> <p> Summary for the current view definition: </p> <div id="pivotGrid"></div> </div> </div> </div> </body> </html> .wj-flexgrid { max-height: 400px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjOlap from '@grapecity/wijmo.olap'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjOlapModule } from '@grapecity/wijmo.angular2.olap'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { ngCube: wjOlap.PivotEngine; // constructor() { var svcUrl = 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20173.114/api/dataengine/'; this.ngCube = new wjOlap.PivotEngine({ // // connect to ComponentOne Data Service itemsSource: `${svcUrl}complex10`, // // build default view valueFields: ['Sales', 'Downloads'], rowFields: ['Country', 'Product'] }); } } // @NgModule({ imports: [WjOlapModule, BrowserModule], declarations: [AppComponent], providers: [], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Engine OLAP Cubes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <p> Drag and drop fields to build views: </p> <wj-pivot-panel [itemsSource]="ngCube"></wj-pivot-panel> </div> <div class="col-xs-6"> <p> Summary for the current view definition: </p> <wj-pivot-grid [itemsSource]="ngCube"></wj-pivot-grid> </div> </div> </div> .wj-flexgrid { max-height: 400px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <p> Drag and drop fields to build views: </p> <wj-pivot-panel :items-source="ngCube"></wj-pivot-panel> </div> <div class="col-xs-6"> <p> Summary for the current view definition: </p> <wj-pivot-grid :items-source="ngCube"></wj-pivot-grid> </div> </div> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.olap'; import * as wjcOlap from '@grapecity/wijmo.olap'; let App = Vue.extend({ name: "app", data: function() { return { ngCube: new wjcOlap.PivotEngine({ // connect to ComponentOne Data Service itemsSource: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20173.114/api/dataengine/complex10', // build default view valueFields: ['Sales', 'Downloads'], rowFields: ['Country', 'Product'] }) }; } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 400px; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Engine OLAP Cubes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as Olap from '@grapecity/wijmo.react.olap'; import * as wjcOlap from '@grapecity/wijmo.olap'; class App extends React.Component { constructor(props) { super(props); this.state = { ngCube: new wjcOlap.PivotEngine({ // connect to ComponentOne Data Service itemsSource: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20173.114/api/dataengine/complex10', // build default view valueFields: ['Sales', 'Downloads'], rowFields: ['Country', 'Product'] }) }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <p> Drag and drop fields to build views: </p> <Olap.PivotPanel itemsSource={this.state.ngCube}></Olap.PivotPanel> </div> <div className="col-xs-6"> <p> Summary for the current view definition: </p> <Olap.PivotGrid itemsSource={this.state.ngCube}></Olap.PivotGrid> </div> </div> </div>); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { max-height: 400px; } body { margin-bottom: 24pt; }