How to implement charts in ionic2?

#1

How to implement below charts in ionic2 ?
1)43%20AM

2)33%20AM

#2

you can use chart.js for your project

#3

you can refer josh’s demo on it

#4

Hello @hirenkorat3,

I used chart.js and referred josh’s demo.
But I want different charts(that I mentioned in my question)

#5

may be this kind of charts are provide by devxtreme angulr

#6

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?

#7

can you describe what kind of problems you are facing so i can help you :slight_smile:

#8

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 + "&#176F";
                }
            };
        }
    }

    customizeText = (arg: any) => 
    {
        return arg.valueText + "&#176F";
    }


  	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 {}
#9

have you add devxtreme module in app.module.ts ?
and also add devxtreme module in your demo.module.ts

#10

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

#11

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/

#12

Hello, @anna_liebt

Thanks for your suggestion

#13

I am not able to catch onclick or onchange event in devextreme charts

#14

i dont know you find it or not but you have to handle click via programming

https://js.devexpress.com/Documentation/Guide/Widgets/Common/Data_Visualization_Widgets/Charts_-_End-User_Interaction/Click_Handling/

#15

Hello, @hirenkorat3

Okay.