Saturday, 18 November 2017

HighCharts Column Drilldown Chart Implementation in ionic 2 and 3

HighCharts DrillDown Chart Implementation in ionic 2 and 3 Highcharts are interactive charts for web pages, which makes it easy for developers to integrate live charts in to their project.
In this tutorial we will be working on how to implement HighCharts column drilldown chart in ionic 2 and 3 project.
First of all modify your Project code as shown below,
Note: if you want to check out the code or you only want the code, you can download the component HERE, after downloading just copy and paste the component in to your projects src/pages folder that's it.
Copy & Paste the below code to your Components html page

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>HIghChart</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</ion-content>

this div container with id "container" is the place where the highchart is rendered.
Copy & Paste the ts code to your Components .ts file.


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var Highcharts;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    
  }
  
  
  ionViewDidLoad() {
    console.log('ionViewDidLoad DateTimePickerPage');
 this.drilldown();
  }
  
  drilldown(){
     // Create the chart
  Highcharts.chart('container', {
   chart: {
    type: 'column'
   },
   title: {
    text: 'Browser market shares. January, 2015 to May, 2015'
   },
   subtitle: {
    text: 'Click the columns to view versions. Source: netmarketshare.com.'
   },
   xAxis: {
    type: 'category'
   },
   yAxis: {
    title: {
     text: 'Total percent market share'
    }

   },
   legend: {
    enabled: false
   },
   plotOptions: {
    series: {
     borderWidth: 0,
     dataLabels: {
      enabled: true,
      format: '{point.y:.1f}%'
     }
    }
   },

   tooltip: {
    headerFormat: '{series.name}
', pointFormat: '{point.name}: {point.y:.2f}% of total
' }, series: [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Microsoft Internet Explorer', y: 56.33, drilldown: 'Microsoft Internet Explorer' }, { name: 'Chrome', y: 24.03, drilldown: 'Chrome' }, { name: 'Firefox', y: 10.38, drilldown: 'Firefox' }, { name: 'Safari', y: 4.77, drilldown: 'Safari' }, { name: 'Opera', y: 0.91, drilldown: 'Opera' }, { name: 'Proprietary or Undetectable', y: 0.2, drilldown: null }] }], drilldown: { series: [{ name: 'Microsoft Internet Explorer', id: 'Microsoft Internet Explorer', data: [ [ 'v11.0', 24.13 ], [ 'v8.0', 17.2 ], [ 'v9.0', 8.11 ], [ 'v10.0', 5.33 ], [ 'v6.0', 1.06 ], [ 'v7.0', 0.5 ] ] }, { name: 'Chrome', id: 'Chrome', data: [ [ 'v40.0', 5 ], [ 'v41.0', 4.32 ], [ 'v42.0', 3.68 ], [ 'v39.0', 2.96 ], [ 'v36.0', 2.53 ], [ 'v43.0', 1.45 ], [ 'v31.0', 1.24 ], [ 'v35.0', 0.85 ], [ 'v38.0', 0.6 ], [ 'v32.0', 0.55 ], [ 'v37.0', 0.38 ], [ 'v33.0', 0.19 ], [ 'v34.0', 0.14 ], [ 'v30.0', 0.14 ] ] }, { name: 'Firefox', id: 'Firefox', data: [ [ 'v35', 2.76 ], [ 'v36', 2.32 ], [ 'v37', 2.31 ], [ 'v34', 1.27 ], [ 'v38', 1.02 ], [ 'v31', 0.33 ], [ 'v33', 0.22 ], [ 'v32', 0.15 ] ] }, { name: 'Safari', id: 'Safari', data: [ [ 'v8.0', 2.56 ], [ 'v7.1', 0.77 ], [ 'v5.1', 0.42 ], [ 'v5.0', 0.3 ], [ 'v6.1', 0.29 ], [ 'v7.0', 0.26 ], [ 'v6.2', 0.17 ] ] }, { name: 'Opera', id: 'Opera', data: [ [ 'v12.x', 0.34 ], [ 'v28', 0.24 ], [ 'v27', 0.17 ], [ 'v29', 0.16 ] ] }] } }); } }
try running the code now, you will get an error saying "Highcharts" is not declared, that's because we had'nt imported the highcharts js into our app.
Copy & Paste the below CDN links to your index.html.


<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

That's it, now save it and run the code. you should see you highcard working.

Friday, 17 November 2017

How to Implement Form Validations in Ionic 2 and 3

We generally implement input fields with [(ngModel)] which uses two way data binding between template and variable, so that what you type or enter in the input field gets binded to variable that is accessible in the .ts file. for example if you have an input field like below:


<ion-input type="text" [(ngModel)]="myInput"></ion-input>


the value you entered in the above input gets binded to this.myInput which can be accesses from respective class definition.
Although the above procedure is fair to use, but if you want to implement validations, it can be somewhat time consuming.
So, to overcome this in this tutorial we are going to learn, how to implement complex form validations ionic 2/3 applications.
Note: if you want to check out the code or you only want the code, you can download the component here, after downloading just copy and paste the component in to your projects src/pages folder that's it.
Now lets get to implemeting form validatons in ionic framework,

We will be using FormGroup & FormControl in this tutorial to create and validate form's in ionic 2/3.
This tutorial assumes that you already have the project created in ionic 2/3.

Copy & Paste the below code to your Components html page


<ion-header>
  
    <ion-navbar>

	    <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
      <ion-title>Form Validation</ion-title>

    </ion-navbar>
  
</ion-header>

<ion-content>
  
<ion-list no-lines>
      <p style="padding: 15px;"><b>Title:</b> A tutorial to demonstrate Form Validations in ionic 2/3.</p>
	  
      <form [formGroup]="signUp" (ngSubmit)="SignUpForm()">

        <ion-item class="itemStyle">
          <ion-label>Name</ion-label>
          <ion-input type="text" formControlName="name" clearInput [class.invalid]="!signUp.controls.name.valid && signUp.controls.name.dirty"></ion-input>
        </ion-item>

        <ion-item class="itemStyle">
          <ion-label>Email</ion-label>
          <ion-input type="email" formControlName="email" clearInput [class.invalid]="!signUp.controls.email.valid && signUp.controls.email.dirty"></ion-input>
        </ion-item>

        <ion-item class="itemStyle">
          <ion-label>Contact Number</ion-label>
          <ion-input type="number" formControlName="contactnumber" clearInput [class.invalid]="!signUp.controls.contactnumber.valid && signUp.controls.contactnumber.dirty"></ion-input>
        </ion-item>

        <ion-item class="itemStyle">
          <ion-label>Password</ion-label>
          <ion-input type="password" formControlName="password" clearInput [class.invalid]="!signUp.controls.password.valid && signUp.controls.password.dirty"></ion-input>
        </ion-item>

        <button ion-button block type="submit" [disabled]="!signUp.valid" style="background-color: #343434;width: 90%;margin: auto;color:white;font-weight: 600;margin-top:20px;">Sign Up</button>
      
      </form>
</ion-list>

</ion-content>



Here, we have a formGroup property with a value of signUp which we are going to create the form with. if not, You might have already observed that we dont have [(ngModel)] here because its work is carried out by formControlName here. every input here has an formControlName which are used to carry and validate input values.
[class.invalid] is applied if the particular formControlName is invalid or dirty. [disabled]="!signUp.valid" disables submit button until the form is valid.
Copy & Paste the ts code to your Components .ts file.


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams} from 'ionic-angular';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';

/**
 * Generated class for the FormcontrolPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-formcontrol',
  templateUrl: 'formcontrol.html',
})
export class FormcontrolPage {

  private signUp : FormGroup;

  constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder) {
    
    let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
    
    this.signUp = this.formBuilder.group({

            name: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
            password: ['', Validators.compose([Validators.maxLength(10), Validators.required])],
            email: ['', Validators.compose([Validators.required, Validators.pattern(EMAIL_REGEXP)])],
            contactnumber: ['', Validators.compose([Validators.maxLength(10), Validators.required])],
    
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FormcontrolPage');
  }
  
  SignUpForm(){
	  console.log(this.signUp.value)
  }

}


dont forget to include this in you .scss file.

Copy and Paste the Below css code to you components .scss file.


    .itemStyle{
        margin-bottom: 15px !important;
        width: 90%;
        margin: auto;
        border-radius: 8px;
        background-color: #eaeaea;
    }  

    .invalid {
		border: 1px solid #f90000;
		border-radius: 5px;
    }


Now that you have all the code in place, lets get to the explanation part, shall we.
Here we are importing Validators, FormBuilder, FormGroup into our page/component from @angular/forms. FormBuilder will be used to create FormGroup which have all the FormControls, which intern have all the values that you entered into the form.
Create a member variable signUp of type FormGroup. Now can use this signUp member variable to create our form.The formBuilder.group function is used to create our FormGroup by supplying an object containing each of our FormControls(ie. formControlName).
Validators.compose function is used to set multiple validators. default validators that are commonly used for validation are,
.Validators.required
.Validators.minLength
.Validators.maxLength
.Validators.pattern


The required validator requires that the value is not empty, minLength and maxLength ensure that the length of the input is of a certain length, and where as pattern uses a regex pattern to validate the form input.