How to implement below charts in ionic2 ?
1)
2)
you can use chart.js for your project
you can refer josh’s demo on it
Hello @hirenkorat3,
I used chart.js and referred josh’s demo.
But I want different charts(that I mentioned in my question)
may be this kind of charts are provide by devxtreme angulr
Hello, @hirenkorat3
I am facing problem with devxtreme angular charts.
I want to implement charts which are on below links:-
https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/CustomizePointsAndLabels/Angular/Light/
Please, can you help me?
can you describe what kind of problems you are facing so i can help you 
When I run app then blank screen displayed with not a single error
Please see my code:-
My “demo.html”:-
<ion-header>
<ion-navbar color="danger">
<ion-title>
Charts in Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<dx-chart id="chart" [dataSource]="temperaturesData" title="Daily Temperature in May" [customizePoint]="customizePoint"
[customizeLabel]="customizeLabel">
<dxi-series argumentField="day" valueField="value" type="bar" color="#e7d19a"></dxi-series>
<dxi-value-axis [maxValueMargin]="0.01" [visualRange]="{startValue:40}">
<dxo-label [customizeText]="customizeText"></dxo-label>
<dxi-constant-line [width]="2" [value]="77" color="#8c8cff" dashStyle="dash">
<dxo-label text="Low Average"></dxo-label>
</dxi-constant-line>
<dxi-constant-line [width]="2" [value]="58" color="#ff7c7c" dashStyle="dash">
<dxo-label text="High Average"></dxo-label>
</dxi-constant-line>
</dxi-value-axis>
<dxo-legend [visible]="false"></dxo-legend>
<dxo-export [enabled]="true"></dxo-export>
</dx-chart>
</ion-content>
My “demo.ts”:-
import { NgModule,Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxChartModule } from 'devextreme-angular';
@IonicPage()
@Component
({
selector: 'page-demo',
templateUrl: 'demo.html',
})
export class DemoPage
{
temperaturesData: Array<{day: string,value: number}> = [];
highAverage = 77;
lowAverage = 58;
constructor(public navCtrl: NavController, public navParams: NavParams, private nativePageTransitions: NativePageTransitions)
{
//this.temperaturesData = service.getTemperaturesData();
}
customizePoint = (arg: any) =>
{
if(arg.value > this.highAverage)
{
return { color: "#ff7c7c", hoverStyle: { color: "#ff7c7c" } };
}
else if(arg.value < this.lowAverage)
{
return { color: "#8c8cff", hoverStyle: { color: "#8c8cff" } };
}
}
customizeLabel = (arg: any) =>
{
if (arg.value > this.highAverage)
{
return
{
visible: true,
backgroundColor: "#ff7c7c",
customizeText: function (e: any)
{
return e.valueText + "°F";
}
};
}
}
customizeText = (arg: any) =>
{
return arg.valueText + "°F";
}
ionViewDidLoad()
{
this.temperaturesData.push
({
day: '1',
value: 57,
});
this.temperaturesData.push
({
day: '2',
value: 57,
});
this.temperaturesData.push
({
day: '3',
value: 57,
});
this.temperaturesData.push
({
day: '4',
value: 57,
});
this.temperaturesData.push
({
day: '5',
value: 57,
});
this.temperaturesData.push
({
day: '6',
value: 57,
});
this.temperaturesData.push
({
day: '7',
value: 57,
});
this.temperaturesData.push
({
day: '8',
value: 57,
});
this.temperaturesData.push
({
day: '9',
value: 57,
});
this.temperaturesData.push
({
day: '10',
value: 57,
});
this.temperaturesData.push
({
day: '11',
value: 57,
});
this.temperaturesData.push
({
day: '12',
value: 57,
});
this.temperaturesData.push
({
day: '13',
value: 57,
});
this.temperaturesData.push
({
day: '14',
value: 57,
});
this.temperaturesData.push
({
day: '15',
value: 57,
});
this.temperaturesData.push
({
day: '16',
value: 57,
});
this.temperaturesData.push
({
day: '17',
value: 57,
});
this.temperaturesData.push
({
day: '18',
value: 57,
});
this.temperaturesData.push
({
day: '19',
value: 57,
});
this.temperaturesData.push
({
day: '20',
value: 57,
});
this.temperaturesData.push
({
day: '21',
value: 57,
});
this.temperaturesData.push
({
day: '22',
value: 57,
});
this.temperaturesData.push
({
day: '23',
value: 57,
});
this.temperaturesData.push
({
day: '24',
value: 57,
});
this.temperaturesData.push
({
day: '25',
value: 57,
});
this.temperaturesData.push
({
day: '26',
value: 57,
});
this.temperaturesData.push
({
day: '27',
value: 57,
});
this.temperaturesData.push
({
day: '28',
value: 57,
});
this.temperaturesData.push
({
day: '29',
value: 57,
});
this.temperaturesData.push
({
day: '30',
value: 57,
});
this.temperaturesData.push
({
day: '31',
value: 57,
});
console.log(this.temperaturesData);
}
}
My demo.sccs:-
page-demo
{
#chart
{
height: 440px;
width: 100%;
}
}
My demo.module.ts:-
import { NgModule,NO_ERRORS_SCHEMA } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DemoPage } from './demo';
@NgModule
({
declarations:
[
DemoPage
],
imports:
[
IonicPageModule.forChild(DemoPage),
],
schemas:
[
NO_ERRORS_SCHEMA
],
})
export class DemoPageModule {}
have you add devxtreme module in app.module.ts ?
and also add devxtreme module in your demo.module.ts
Hello,
you use an angular component, So there is no need of NO_ERRORS_SCHEMA. That this so called has sense. Remove it, as long you don’t use a web component.
After this, add you blabla.module for eager loading your lazy loading approbiate place.
Best regards, anna-liebt
Hello, @hirenkorat3
Thank you so much for guiding me.
Find below screenshots that we achieved same as in this link:-https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/CustomizePointsAndLabels/Angular/Light/
Hello, @anna_liebt
Thanks for your suggestion
I am not able to catch onclick or onchange event in devextreme charts
i dont know you find it or not but you have to handle click via programming
Hello, @hirenkorat3
Okay.