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.

3 comments:

  1. This code is work only developer option but if build apk and installed in phone then not working i have face hat problem

    ReplyDelete
    Replies
    1. for mine that code is working, maybe you should check it again bro

      Delete
  2. thank you so much as it worked for myself.

    ReplyDelete