on 2024 Oct 09 4:00 PM
I came across a scenario where I have to implement a donut chart and a pie chart on the same screen as displayed in screenshot. For Donut chart I followed the tutorial and successfully implemented it. I am facing challenge when trying to put the Donut chart in a Control.Type.SectionedTable, leaving donut chart all other controls are visible (Chart_Implementation_Demo.txt).
Note: When I added Donut chart in Control.Type.Extension it is working fine.
Request clarification before answering.
Hello @Girish_KR , can you describe in details what are the challenges or issues you are facing here? I am afraid I can't quite understand what issues you are seeing here.
From the screenshot I see the left side of your donut chart is cut off, is that the issue?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi mingkho,
The issue I am facing is when I tried placing Donut Chart (extension control IndentConfirmationControl.txt ) inside Control.Type.SectionedTable (as shown in Chart_Implementation_Demo.txt) the donut chart is not getting visible as a whole, while other controls are visible.
The Donut chart is getting visible only when I am using it with Control.Type.Extension.
Please guide me how to use the Donut Chart(IndentConfirmationControl.txt ) extension control with other controls added in the same page.
Hi @Girish_KR , I managed to get the working sample for the data, so don't worry about it. I noticed a few things:
Here's before I applied anything (except return false for viewIsNative):
Here's after I applied paddingLeft of the StackLayout and also set the "Height" property in the metadata:
Here's the sample codes.
Take note of the "Height" Property:
{
"_Type": "Control.Type.FormCell.Extension",
"_Name": "FormCellExtension1",
"Module": "MDKExtension",
"Control": "IndentConfirmationControl",
"Class": "IndentConfirmationClass",
"Height": 250,
"IsVisible": true,
"Separator": true,
"ExtensionProperties":{
"MinValue": 0,
"MaxValue": 100,
"Title": "Counter"
}
},
Take note of the paddingLeft and also viewIsNative:
import { IControl } from 'mdk-core/controls/IControl';
import { Label } from '@nativescript/core/ui/label';
import { Color } from '@nativescript/core/color';
import { BaseObservable } from 'mdk-core/observables/BaseObservable';
import { RadPieChart, DonutSeries, ChartSeriesSelectionMode,RadLegendView,Palette,PaletteEntry } from 'nativescript-ui-chart';
import { StackLayout } from '@nativescript/core/ui/layouts/stack-layout';
import { ObservableArray, Device } from "@nativescript/core";
import { Observable } from '@nativescript/core';
import { getPieData } from './DataService';
function getPadding() {
// Return left & right padding in dp
// For tablet we want 24dp, for other type we use 16dp
return Device.deviceType === 'Tablet' ? 24 : 16;
}
export class IndentConfirmationClass extends IControl {
private _observable: BaseObservable;
private _targetLabel: any;
private _StackLayout: any;
private oRadPieChart: any;
private oDonutSeries: any;
private Selectionmode: any;
private seriesArray: any;
private _model: any;
private service: any;
private radLegendView:any;
private palette:any;
private paletteEntries:any;
public initialize(props: any): any {
super.initialize(props);
// if (!this._model) {
// this._model = new oModel();
// };
this._StackLayout = new StackLayout();
this._StackLayout.backgroundColor = "#f2efe8";
this._StackLayout.height = 250
this._StackLayout.paddingLeft = getPadding();
// Create Label
this._targetLabel = new Label();
this._targetLabel.text = "No Sales Data";
this._StackLayout.addChild(this._targetLabel);
// Create Pie Chart using External plugin
this.oRadPieChart = new RadPieChart();
this.oRadPieChart.allowAnimations = true;
this.oRadPieChart.row = 0;
this.oDonutSeries = new DonutSeries();
this.oDonutSeries.seriesName = "myDonutSeries";
this.Selectionmode = <ChartSeriesSelectionMode>'DataPoint';
this.oDonutSeries.selectionMode = this.Selectionmode;
this.oDonutSeries.expandRadius = 0.4;
this.oDonutSeries.outerRadiusFactor = 0.7;
this.oDonutSeries.innerRadiusFactor = 0.4;
this.oDonutSeries.valueProperty = "Count";
this.oDonutSeries.legendLabel = "Status";
this.oDonutSeries.showLabels = true;
this.seriesArray = new ObservableArray();
this.seriesArray.push(this.oDonutSeries);
this.radLegendView = new RadLegendView();
this.radLegendView.position = "Floating";
this.radLegendView.title = "Status";
this.radLegendView.offsetOrigin = "TopLeft";
this.radLegendView.enableSelection = true;
this.radLegendView.height = 150;
this.radLegendView.width = 200;
this.palette = new Palette();
this.palette.seriesName = "myDonutSeries";
this.paletteEntries = new ObservableArray();
var paletteEntry = new PaletteEntry();
paletteEntry.fillColor = new Color('#FF0000');
paletteEntry.strokeColor = new Color('#FF0000');
paletteEntry.strokeWidth = 5;
this.paletteEntries.push(paletteEntry);
paletteEntry = new PaletteEntry();
paletteEntry.fillColor = new Color('#006600');
paletteEntry.strokeColor = new Color('#006600');
paletteEntry.strokeWidth = 5;
this.paletteEntries.push(paletteEntry);
this.palette.entries = this.paletteEntries;
this.oRadPieChart.palettes = this.palette;
this.oRadPieChart.legend = this.radLegendView;
this.oRadPieChart.allowAnimations = true;
this.oRadPieChart.series = this.seriesArray;
this._StackLayout.addChild(this.oRadPieChart);
// Extension Properties
let extProps = this.definition().data.ExtensionProperties;
// let tempData = new ObservableArray([
// { Brand: 'Audi', Amount: 10 },
// { Brand: 'Mercedes', Amount: 76 },
// { Brand: 'Fiat', Amount: 60 },
// { Brand: 'BMW', Amount: 24 },
// { Brand: 'Crysler', Amount: 40 }
// ]);
// try{
// this.oDonutSeries.items=tempData;
// }catch(ex){
// console.log(ex);
// }
if (extProps) {
this.valueResolver().resolveValue(extProps.Title, this.context, true).then(function (Title) {
this._targetLabel.text = "Indent Confirmation";
this._targetLabel.textAlignment = "center";
this._targetLabel.fontWeight = "bold";
// SalesData.forEach(result => {
// this._model.setSalesOrderHeader(result.SalesOrderId, result.Amount);
// });
// this.oDonutSeries.items = this._model.getSalesOrderHeader();
this.oDonutSeries.items = getPieData();
}.bind(this));
}
//return this._StackLayout;
}
public view() {
return this._StackLayout; // Return View
}
public viewIsNative() {
return false;
}
// Abstract Method
public observable() {
if (!this._observable) {
this._observable = new BaseObservable(this, this.definition(), this.page());
}
return this._observable;
}
// Abstract Method
public setValue(value: any, notify: boolean): Promise<any> {
return Promise.resolve();
}
public setContainer(container: IControl) {
// do nothing
}
}
User | Count |
---|---|
78 | |
29 | |
9 | |
7 | |
7 | |
7 | |
6 | |
6 | |
5 | |
5 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.