Table of Contents
Introduction
Introduction to VizFrame Chart in SAP UI5 using Local JSON or OData:
VizFrame is a powerful data visualization control in SAP UI5 that empowers developers to create stunning charts and graphs for displaying data in a user-friendly and interactive manner. With VizFrame, you can visualize data from various sources, including local JSON and OData services. This introduction will explore how VizFrame can be leveraged to create dynamic and visually appealing charts using data from local JSON or OData services.
1. Local JSON Data Source:
Local JSON serves as an ideal data source for small to medium-sized datasets that are readily available within the application without the need for server-side communication. By utilizing the JSONModel in SAP UI5, developers can easily bind the local JSON data to the VizFrame control, allowing seamless data visualization directly within the application.
2. OData Service Data Source:
For larger datasets or real-time data, SAP UI5 offers integration with OData services. OData provides a standardized way to interact with remote data sources, enabling the VizFrame chart to visualize live data fetched from an external service. Leveraging the ODataModel, developers can efficiently connect the VizFrame chart to the OData service and automatically update the visualization as the data changes in the backend.
Key Features of VizFrame Chart:
– **Rich Chart Types:** VizFrame offers a wide range of chart types, including column charts, line charts, pie charts, bar charts, and more. You can select the most suitable chart type to present your data effectively.
– **Interactive and Responsive:** VizFrame charts come with interactive features such as zooming, panning, and tooltips, providing users with a dynamic and engaging experience. The charts are responsive and adapt gracefully to various screen sizes and devices.
– **Data Binding and Aggregation:** Whether using local JSON or OData services, VizFrame seamlessly binds data to the chart, allowing you to leverage data aggregation to summarize and group information for a clearer presentation.
– **Customization and Theming:** Developers can easily customize the appearance of VizFrame charts by adjusting colors, labels, axis properties, and more. SAP UI5’s theming capabilities enable charts to harmonize with the overall application design.
– **Integration with Other UI5 Controls:** VizFrame can be seamlessly integrated with other UI5 controls to build comprehensive and feature-rich analytical dashboards and applications.
In conclusion, VizFrame in SAP UI5 is a versatile and user-friendly charting solution that enables developers to create visually compelling data visualizations using local JSON or OData services. By leveraging the power of VizFrame, developers can transform raw data into meaningful insights, empowering users to make informed decisions and gain valuable insights from their data.
Important Terms to Understand
In SAP UI5, the concept of Model, FlattenedDataset, and FeedItem is related to data visualization using VizFrame controls. VizFrame is a versatile UI5 control that allows you to create various types of charts and graphs for data representation.
1. Model:
A Model in SAP UI5 is an abstraction of data that allows you to access and manipulate data in a consistent way. It is a data binding concept that separates the control logic from the data. The Model provides a standard API to interact with the data, irrespective of the data source. There are various types of models, such as JSONModel, ODataModel, etc., which can be used based on the data source and requirements.
2. FlattenedDataset:
The FlattenedDataset is a specialized dataset used by VizFrame controls to represent data in a flattened format suitable for visualization. It takes tabular data and converts it into a format that can be easily understood by charts and graphs. The FlattenedDataset provides configuration options for defining dimensions (e.g., categories, groups) and measures (e.g., values, quantities) of the chart.
3. FeedItem:
The FeedItem is used in conjunction with the FlattenedDataset to define the mapping between the dimensions and measures of the FlattenedDataset and the corresponding axes of the chart. It defines which dimensions should be represented on which axis and which measures should be used for different aspects of the chart (e.g., axis values, colors, sizes).
4. addFeed:
In the context of VizFrame, addFeed is a method used to associate FeedItems with the FlattenedDataset. By adding FeedItems to the FlattenedDataset, you define how the data should be visualized in the chart. For example, you can specify that a particular dimension should be shown on the X-axis, or a certain measure should be used to determine the color of the chart elements.
In summary, when using VizFrame for data visualization in SAP UI5, you create a FlattenedDataset to convert your tabular data into a suitable format for charting. You then use FeedItems to map dimensions and measures from the FlattenedDataset to specific aspects of the chart. Finally, you add these FeedItems to the FlattenedDataset using the addFeed method, allowing you to visualize the data in a meaningful and informative way.
VizFrame Chart in UI5 using local JSON or OData
View
<mvc:View controllerName="vizChartJSON.vizChartJSON.controller.Main" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="My Project Ideas: VizFrame Chart in UI5 using local JSON or OData">
<content>
<RadioButtonGroup id='datasetRadioGroup'>
<buttons>
<RadioButton class='settingsRadio' text="Line" select="onDatasetSelectedLine"/>
<RadioButton class='settingsRadio' text="Column" select="onDatasetSelecteColumn"/>
<RadioButton class='settingsRadio' text="Bullet" select="onDatasetSelecteBullet"/>
<RadioButton class='settingsRadio' text="Area" select="onDatasetSelecteArea"/>
</buttons>
</RadioButtonGroup>
<viz:VizFrame id="chartContainer" vizType="line" width="600px" height="400px"/>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
Controller
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/viz/ui5/data/FlattenedDataset",
"sap/viz/ui5/controls/common/feeds/FeedItem"
], function (Controller, FlattenedDataset, FeedItem) {
"use strict";
return Controller.extend("vizChartJSON.vizChartJSON.controller.Main", {
onInit: function () {
var data = [{
"Category": "Category 1",
"Revenue": 100
}, {
"Category": "Category 2",
"Revenue": 200
}, {
"Category": "Category 3",
"Revenue": 300
}, {
"Category": "Category 4",
"Revenue": 400
}, {
"Category": "Category 5",
"Revenue": 500
}];
// Load local JSON data
var oDataModel = new sap.ui.model.json.JSONModel(data);
// Use this line in case you are loading from external OData url
// oDataModel.loadData(data);
// Get the VizFrame control
var oChartContainer = this.getView().byId("chartContainer");
// Set the data model to the VizFrame
oChartContainer.setModel(oDataModel);
// Create a FlattenedDataset
var oDataset = new FlattenedDataset({
dimensions: [{
name: "Category",
value: "{Category}"
}],
measures: [{
name: "Revenue",
value: "{Revenue}"
}],
data: {
path: "/"
}
});
// Add the dataset to the VizFrame
oChartContainer.setDataset(oDataset);
// Create a FeedItem for Category dimension
var oCategoryFeed = new FeedItem({
uid: "categoryAxis",
type: "Dimension",
values: ["Category"]
});
// Create a FeedItem for Revenue measure
var oRevenueFeed = new FeedItem({
uid: "valueAxis",
type: "Measure",
values: ["Revenue"]
});
// Add the FeedItems to the VizFrame
oChartContainer.addFeed(oCategoryFeed);
oChartContainer.addFeed(oRevenueFeed);
},
onDatasetSelectedLine: function(oEvent){
this.byId("chartContainer").setVizType('line');
},
onDatasetSelecteColumn: function(oEvent){
this.byId("chartContainer").setVizType('column');
},
onDatasetSelecteBullet: function(oEvent){
this.byId("chartContainer").setVizType('bullet');
},
onDatasetSelecteArea: function(oEvent){
this.byId("chartContainer").setVizType('area');
}
});
});
Output
0 Comments