I'm getting my Date from webAPI in BackEnd side and I get the value in ISO8601 format
fechaFin:Date;
fechaFin:2021-08-29T22:00:00;
But I need to show it in format dd-mm-yyyy, so, "29-08-2021"
So in my datepicker.html I have this
<input matInput
[matDatepicker]="picker"
(dateChange)="addEvent('change', $event)"
[(ngModel)]='date'
>
Then in datepicker.ts
export const MY_FORMATS = {
parse: {
dateInput: 'L',
},
display: {
dateInput: 'L',
monthYearLabel: 'MM YYYY',
dateA11yLabel: 'L',
monthYearA11yLabel: 'MM YYYY',
},
};
#Component({
selector: 'app-cabecera',
templateUrl: './cabecera.component.html',
styleUrls: ['./cabecera.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE]
},
{
provide: MAT_DATE_FORMATS,
useValue: MY_FORMATS
},
],
})
An I See this
But I don't know how to see like this "29-08-2021"
In my control panel I have this
If I try this the same result
Any idea please?
Solved
export const MY_FORMATS = {
parse: {
dateInput: 'DD-MM-YYYY',
},
display: {
dateInput: 'DD-MM-YYYY',
monthYearLabel: 'MMMM YYYY',
dateA11yLabel: 'L',
monthYearA11yLabel: 'MMMM YYYY',
},
};
Thanks
Related
I'm getting this error Type 'number' has no properties in common with type 'XrangePointOptionsObject'. I want to add bar chart using angular highchatrs in my angular project but I'm not able to add because of this error. So can you please help me to solve this error.
Thanks.
this is my component.ts file
import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts'
#Component({
selector: 'app-bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.scss']
})
export class BarChartComponent implements OnInit {
orderChart: Chart;
revenueChart: Chart;
options: Highcharts.Options;
constructor() { }
ngOnInit() {
this.init();
}
init() {
this.options = {
chart: {
type: 'column'
},
title: {
text: 'Total Predected Vs Actual'
},
xAxis:{
categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],
crosshair: true
},
yAxis : {
min: 0 ,
},
tooltip : {
headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
'<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>',
shared: true, useHTML: true
},
plotOptions : {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: "Predected",
data :[14,17,9,10,6,19,6,8]
},
{
name: "Actual",
data: [65,74,44,66,9,23,36,51]
}
]
};
let orderChart = new Chart(this.options);
this.orderChart = orderChart;
let revenueChart = new Chart(this.options);
this.revenueChart = revenueChart;
}
}
so the error is shown on the data in the series.
I was facing the same issue. you need to use following input
[runOutsideAngular]="true"
so it will be
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions.trends" [runOutsideAngular]="true"
style="width: 100%; height: 400px; display: block;">
</highcharts-chart>
I'm getting this error Type 'number' has no properties in common with type 'XrangePointOptionsObject'. I want to add bar chart using angular highchatrs in my angular project but I'm not able to add because of this error. So can you please help me to solve this error.
Thanks.
this is my component.ts file
import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts'
#Component({
selector: 'app-bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.scss']
})
export class BarChartComponent implements OnInit {
orderChart: Chart;
revenueChart: Chart;
options: Highcharts.Options;
constructor() { }
ngOnInit() {
this.init();
}
init() {
this.options = {
chart: {
type: 'column'
},
title: {
text: 'Total Predected Vs Actual'
},
xAxis:{
categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],
crosshair: true
},
yAxis : {
min: 0 ,
},
tooltip : {
headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
'<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>',
shared: true, useHTML: true
},
plotOptions : {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
{
name: "Predected",
data :[14,17,9,10,6,19,6,8]
},
{
name: "Actual",
data: [65,74,44,66,9,23,36,51]
}
]
};
let orderChart = new Chart(this.options);
this.orderChart = orderChart;
let revenueChart = new Chart(this.options);
this.revenueChart = revenueChart;
}
}
so the error is shown on the data in the series.
I was facing the same issue. you need to use following input
[runOutsideAngular]="true"
so it will be
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions.trends" [runOutsideAngular]="true"
style="width: 100%; height: 400px; display: block;">
</highcharts-chart>
I'm new to Ionic and Angular. I have a reactive form (ReactiveFormsModule) with a date field. I'm trying to use the ionic4-datepicker component created as a replacement to the ionic-datetime element. After reading their blog (https://www.logisticinfotech.com/blog/ionic4-datepicker-component/), I still have trouble getting and setting a selected date to the date field. Any help is appreciated. Thanks.
Updated 9/17/2019:
Not sure what happened, but the datepicker works after I created the form again from scratch and cleared my browser cache. I have not figured out how to trigger the function call to myFunction(). It's not a big deal since I don't to need perform any validation or business logic, but would be nice to know.
Here are the working codes. Enjoy.
create-form.page.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { FormBuilder, FormGroup, Validators } from '#angular/forms';
#Component({
selector: 'app-create-form',
templateUrl: './create-form.page.html',
styleUrls: ['./create-form.page.scss'],
})
export class CreateFormPage implements OnInit {
submitted = false;
createForm: FormGroup;
datePickerObjDefaultSettings: any = {}
datePickerObjCustomSettings: any = {
inputDate: new Date(),
fromDate: null,
toDate: null,
showTodayButton: true,
closeOnSelect: true,
disableWeekDays: [0],
mondayFirst: true,
setLabel: 'Set',
todayLabel: 'Today',
closeLabel: 'Close',
disabledDates: [],
titleLabel: 'Select a Date',
monthsList: ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"],
weeksList: ["S", "M", "T", "W", "T", "F", "S"],
dateFormat: 'YYYY-MM-DD',
clearButton: true,
momentLocale: 'en-US',
yearInAscending: true,
btnCloseSetInReverse: true,
btnProperties: {
expand: 'block',
fill: '',
size: '',
disabled: '',
strong: '',
color: ''
},
highlightedDates: []
};
validation_messages = {
'name': [
{ type: 'required', message: 'Name is required.' },
{ type: 'minlength', message: 'Name must be at least 3 characters long.' },
{ type: 'maxlength', message: 'Name cannot be more than 100 characters long.' },
]
}
constructor(private router: Router, private formBuilder: FormBuilder) { }
ngOnInit() {
this.createForm = this.formBuilder.group({
name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(100)]],
fromDate: [''],
toDate: [''],
});
}
onSubmit(value: any): void {
this.submitted = true;
if (this.createForm.invalid) {
return;
}
this.router.navigateByUrl('/home');
}
onReset() {
this.submitted = false;
this.createForm.reset();
}
// Either there is a typo in the third-party documentation or bug in the plugin.
// This function is NOT invoked.
myFunction() {
console.log("===> myFunction: ");
}
}
create-form.html
<ion-content>
<form [formGroup]="createForm" (ngSubmit)="onSubmit(createForm.value)">
<ion-item>
<ion-label position="floating" color="primary">Name</ion-label>
<ion-input type="text" formControlName="name"></ion-input>
</ion-item>
<div>
<ng-container *ngFor="let validation of validation_messages.name">
<div class="error-message"
*ngIf="createForm.get('name').hasError(validation.type) && (createForm.get('name').dirty || createForm.get('name').touched)">
<ion-icon name="information-circle-outline"></ion-icon> {{ validation.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label position="floating">From Date</ion-label>
<ion-input readonly formControlName="fromDate" [liIonic4Datepicker]="datePickerObjDefaultSettings" (ionchange)="myFunction()"></ion-input>
<!-- <ion-datetime displayFormat="MMM DD, YYYY" min="2017-01-01"></ion-datetime> -->
</ion-item>
<ion-item>
<ion-label position="floating">To Date</ion-label>
<ion-input readonly formControlName="toDate" [liIonic4Datepicker]="datePickerObjCustomSettings" (ionchange)="myFunction()"></ion-input>
<!-- <ion-datetime displayFormat="MM/DD/YYYY" min="2017-01-01"></ion-datetime> -->
</ion-item>
<ion-grid>
<ion-row>
<ion-col>
<ion-button expand="block" size="medium" type="submit" [disabled]="!createForm.valid">Create</ion-button>
</ion-col>
<ion-col>
<ion-button expand="block" size="medium" type="reset" (click)="onReset()">Reset</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-content>
create-form.scss
.error-message {
color: red;
font-size: 14px;
margin: 10px;
}
Actually, it's normal that liIonic4Datepicker has its own type of date. If you want to set default date into datepicker, you need to write util function that transform UTC date to datepicker format date. Then patch result into form (in OnInit method). Like that:
convertDate(UTCdate: Date) {
return .....
}
ngOnInit() {
this.myForm.patch({myDate: convertDate('YOUR_DATE')})
// or
this.myForm.controls.myDate.setValue(convertDate('YOUR_DATE'))
}
If you want submit form, you should do same things to convert datepicker date into normal date.
submitForm {
const { myDate } = this.myForm.value;
convertedDate = convertToUTC(myDate);
this.api.submit(convertedDate)
}
I am using high chart wrapper in my angular5 app with the help of below link.
high chart wrapper
but how can I use addSeries() to add series into the existing chart and how can I update the properties of existing chart.
how can I use addSeries() to add series into the existing chart and
how can I update the properties of existing chart.
When using highcharts-angular wrapper it is not recommended to use chart methods like addSeries() or update() directly on chart reference.
You have to update a whole component, not only chart properties. It can be achieved by updating chartOptions object (add new series, point, title etc) and setting updateFlag = true. Check the code and demo posted below.
app.module.ts:
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { HighchartsChartModule } from "highcharts-angular";
import { ChartComponent } from "./chart.component";
import { AppComponent } from "./app.component";
#NgModule({
declarations: [AppComponent, ChartComponent],
imports: [BrowserModule, HighchartsChartModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
chart.component.html:
<div class="boxChart__container">
<div>
<highcharts-chart
id="container"
[Highcharts]="Highcharts"
[constructorType]="chartConstructor"
[options]="chartOptions"
[callbackFunction]="chartCallback"
[(update)]="updateFlag"
[oneToOne]="true"
style="width: 100%; height: 400px; display: block;"
>
</highcharts-chart>
<button (click)="updateChart()">Update Chart</button>
</div>
</div>
chart.component.ts:
import { Component, OnInit } from "#angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";
HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
#Component({
selector: "app-chart",
templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
title = "app";
chart;
updateFlag = false;
Highcharts = Highcharts;
chartConstructor = "chart";
chartCallback;
chartOptions = {
series: [
{
data: [1, 2, 3, 6, 9]
}
],
exporting: {
enabled: true
},
yAxis: {
allowDecimals: false,
title: {
text: "Data"
}
}
};
constructor() {
const self = this;
this.chartCallback = chart => {
// saving chart reference
self.chart = chart;
};
}
ngOnInit() {}
updateChart() {
const self = this,
chart = this.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
self.chartOptions.series = [
{
data: [10, 25, 15]
},
{
data: [12, 15, 10]
}
];
self.chartOptions.title = {
text: "Updated title!"
};
self.updateFlag = true;
}, 2000);
}
}
Demo:
https://codesandbox.io/s/oomo7424pz
Docs reference:
updateFlag - https://github.com/highcharts/highcharts-angular#options-details
here is a very useful answer for learning how to updata a highchart.
https://www.highcharts.com/demo/chart-update
it explains a method chart.update
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Plain'
}
});
For adding series the following method is used
chart.addSerie(serie,true);
flag 'true' here is equivalent to chart.redraw();
OR
var chart = new Highcharts.Chart(options);
chart.addSeries({
name: array.name,
data: array.value
});
If you are going to add several series you should set the redraw flag to false and then call redraw manually after as that will be much faster.
var chart = new Highcharts.Chart(options);
chart.addSeries({
name: 'Bill',
data: [1,2,4,6]
}, false);
chart.addSeries({
name: 'John',
data: [4,6,4,6]
}, false);
chart.redraw();
For more information and methods you can visit the Official Highcharts API page:
https://api.highcharts.com/class-reference/Highcharts.Chart
When using angular-highcharts wrapper as
import { Chart } from 'angular-highcharts';
create charts as below
chart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Linechart'
},
credits: {
enabled: false
},
series: [
{
name: 'Line 1',
data: [1, 2, 3]
}
]
});
now you can call all API methods on this
had a tough time trying to get ng2-highcharts and angular2 to work nicely together.
what I have is;
import * as Highcharts from 'highcharts';
window['Highcharts'] = Highcharts;
bootstrap(AppComponent);
SystemJS Config;
map: {
"highcharts": "node_modules/highcharts/highcharts.js",
"ng2-highcharts": "node_modules/ng2-highcharts",
}
as you can see, this is quite a hack but its the only way I could get it working - when I remove the manual window assignment, I get
ReferenceError: Highcharts is not defined
at Ng2Highcharts.Object.defineProperty.set
So my question is, surely there is a better way? Any ideas?
I am using it like so;
import { Component, OnInit } from 'angular2/core';
import { Ng2Highcharts } from 'ng2-highcharts/ng2-highcharts';
#Component({
selector: 'component',
styleUrls: ['.comp.css'],
templateUrl: '.comp.html',
directives: [Ng2Highcharts]
})
Thanks
I have slightly modified the original implementation of ng2-highcharts I retreived few months ago to overcome some issues (I had to use jQuery - probably the most current version of the package does not need any twick any more). In any case this is the code of the directive I use
/// <reference path="../../typings/highcharts/highcharts.d.ts" />
declare var jQuery: any;
import {Directive, ElementRef, Input} from 'angular2/core';
#Directive({
selector: '[ng2-highcharts]'
})
export class Ng2Highcharts {
hostElement: ElementRef;
chart: HighchartsChartObject;
constructor(ele: ElementRef) {
this.hostElement = ele;
}
#Input('ng2-highcharts') set options(opt:HighchartsOptions) {
if(!opt) {
console.log('No valid options...');
console.log(opt);
return;
}
if(opt.series || opt.data) {
let nativeEl = this.hostElement.nativeElement;
let jQ = jQuery(nativeEl);
this.chart = jQ.highcharts(opt);
} else {
console.log('No valid options...');
console.dir(opt);
}
}
}
In index.html I have
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
ng2Highcharts: {
format: 'register',
defaultExtension: 'js'
},
.....
.....
}})
and
<script src="./lib/jquery/dist/jquery.js"></script>
<script src="./lib/highcharts/highstock.js"></script>
<script src="./lib/highcharts/modules/exporting.js"></script>
<script src="./lib/highcharts/highcharts-more.js"></script>
In the components that need to use the directive the html code looks like the following:
<div [ng2-highcharts]="chartOptions"></div>
chartOptions are created with code like this
createNewchartOptions() {
return {
title: {text: "Performance vs Benchmark (" + this.periodText + ")"},
rangeSelector: {
selected: 4},
xAxis: {
type: 'datetime'
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'}]
},
plotOptions: {
series: {
compare: 'percent'}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2}
};
}
Last thing you need to do is to set the series in the chartOptions (I do not put code since too linked to my app).
I hope this helps