NG2-Two way data binding - Searc Text Filter list of item in Array

NG2-Two way data binding - Searc Text Filter list of item in Array
============================================
Template.html
-------------

<div class="panel-default">
<div class="panel-heading">All list Data
<div>
<input [ngModel]="sectionSearch" (ngModelChange)="onSearchSection($event)" class="sidesearch" placeholder="Search...">
</div>
</div>
<div class="panel-body allDataList">
<div *ngFor="let item of alldata" routerLinkActive="active"><a routerLink="DomainSecondURL/{{item.displayName}}">{{item.displayName}}</a>
</div>
</div>
</div>


Component.ts
-------------

import {Component,ViewContainerRef,ViewEncapsulation, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { FormControl } from '@angular/forms';

@Component({
selector:'template',
template:require('./template.html')
})

export class FilterData{

public allData:any;
public filterData:any;


constructor(private route:ActivatedRoute,private allDataService:AllDataService, private router: Router){
this.url = router.url.split('/');
this.AllDataService.getleftmenuData(this.url)  
.subscribe(
(data:any)=>{    

this.allData= data.sections;
this.filterData = this.allData;

},
(error:any)=>{
console.log("error");
}
);      
}
onSearchSection(event:Event) {

this.allData = this.filterData.filter(
section => section.displayName.toLocaleLowerCase().indexOf(event) >= 0

// {section => Obj.propeName - displayName}
);

}

}

NG2- forloop and View to Component with Services

Ng2- forloop and View to Component with Services
================================================
Data render from Componet service
----------------------------------

Datatemplate.html
--------------
<div class="panel-body">
<div *ngFor="let item of allData" routerLinkActive="active">
<a routerLink="allData/{{item.displayName}}">{{item.displayName}}</a>
</div>
</div>

Datacomponent.ts
-----------------

import {Component,ViewContainerRef,ViewEncapsulation, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {DataService} from './asupDetailsSideBar.service';

export class DataComponet{

public allData: any;

constructor(private route:ActivatedRoute,private dataService:DataService, private router: Router){

this.dataService.getData(Key)
.subscribe(
(data:any)=>{
this.allData = data.Data;
},
(error:any)=>{
console.log("error");
}
);
}
}

DataService.ts
---------------

import {Injectable} from '@angular/core';
import { Http, Response, Headers } from '@angular/http';

@Injectable()
export class AsupDetailsSideBarService {

constructor(private http: Http) {

 }
    getData(...args): Observable<any>{

    var argslength=args[0].length;
    let serialNumber=args[0][argslength-3];
 
    let staticUrl=`http://domain/api/serviceCall(key)`;  
 
    return this.http.get(this.staticUrl).map(this.extractData).catch(this.handleError);
}

private extractData(res: Response) {
    let body = res.json();
    return body || { };
  }

   private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }
 }

NG2 - ToggleStyle-Apply from components:

ng2-ToggleStyle-Apply from components:
-------------------------------------

Ref: - https://plnkr.co/edit/yCalvA1OsC6w2VZUAHm6?p=preview

//our root app component
import { NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {Component} from '@angular/core';

// while using [ngdirective] import FomrsModule in your app.module.ts

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <div [ngClass]="{'my-class': isClassVisible }">
        I'm a div that wants to be styled
      </div>
      <button (click)="isClassVisible = !isClassVisible;">Toggle style</button>
    </div>
  `,
  styles: [
  `
  .my-class {
    background-color: yellow;
  }
  `
  ]
})
class App {
  isClassVisible: false;

  constructor() {
  }

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

NG2 - selectAllNotSelected-Checkbox

thanx - for Ref:
http://stackoverflow.com/questions/34219199/angular2-how-to-get-all-selected-check-boxes

.html
--------

<button value="all" (click)="bulk('all')">ALL</button>
<button value="none" (click)="bulk('none')">NONE</button>

<div *ngFor="#students of student_list #i=index">
  <input type="checkbox" value={{students.id}} class="checkedStudent"
  (change)="checkedStudents(students.id)" id={{students.id}}>
</div>

.ts
-----

abc:Array<any>= [];
checkedStudents(value) {
        console.log(value);
        if ((<HTMLInputElement>document.getElementById(value)).checked === true) {
            this.abc.push(value);
        }
        else if ((<HTMLInputElement>document.getElementById(value)).checked === false) {
            let indexx = this.abc.indexOf(value);
            this.abc.splice(indexx,1)
        }
        console.log(this.abc)
    }

// for Bulk actions

bulk(a) {
        // console.log(a);
        if (a == "all") {
            console.log("yes all");
            this.abc = [];
            for (let i = 0; i < this.student_list.length; i++) {
                (<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = true;
                this.abc.push(this.student_list[i].id);
            }
        }
        if (a == "none") {
            for (let i = 0; i < this.student_list.length; i++) {
                (<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = false;
            }
            this.abc = [];
        }
        console.log(this.abc);
    }

NG2 - Pagination- Web pack

ng2-Pagination:
----------------
Ref: http://michaelbromley.github.io/ng2-pagination/#/

npm install ng2-pagination --save

// app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Ng2PaginationModule} from 'ng2-pagination'; // <-- import the module
import {MyComponent} from './my.component';

@NgModule({
    imports: [BrowserModule, Ng2PaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}



// my.component.ts
import {Component} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    public collection: any[] = someArrayOfThings;
}


Plukr ref: http://plnkr.co/edit/JVQMPvV8z2brCIzdG3N4?p=preview

Ng2-highcharts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component }    from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { ChartModule }            from 'angular2-highcharts';

@Component({
    selector: 'my-app',
    styles: [`
      chart {
        display: block;
      }
      button {
        display: block;
        width: 100%;
        height: 25px;
      }
  `],
    template: `
        <chart [options]="options" (load)="saveChart($event.context)">
          <series (hide)="onSeriesHide($event.context)">
            <point (select)="onPointSelect($event.context)"></point>
          </series>
        </chart>
        <button (click)="addPoint()">Click to add random points</button>
    `
})
class AppComponent {
    constructor() {
        this.options = {
            title : { text : 'angular2-highcharts example' },
            series: [{
                name: 's1',
                data: [2,3,5,8,13],
                allowPointSelect: true
            },{
                name: 's2',
                data: [-2,-3,-5,-8,-13],
                allowPointSelect: true
            }]
        };
    }
    options: Object;
    chart: Object;
    saveChart(chart) {
      this.chart = chart;
    }
    addPoint() {
      this.chart.series[0].addPoint(Math.random() * 10);
      this.chart.series[1].addPoint(Math.random() * -10);
    }
    onPointSelect(point) {
      alert(`${point.y} is selected`);
    }
    onSeriesHide(series) {
      alert(`${series.name} is selected`);
    }
   
}

@NgModule({
  imports:      [BrowserModule, ChartModule],
  declarations: [AppComponent],
  bootstrap:    [AppComponent]
})
class AppModule { }


platformBrowserDynamic().bootstrapModule(AppModule);

Ng2-highcharts - Webpack installation:

Ng2-highcharts - Webpack installation:
-------------------------------------
Ref: https://www.npmjs.com/package/angular2-highcharts#installation

npm install angular2-highcharts --save

setuo App.module:->
--------------------

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import { App } from './App';

@NgModule({
    imports: [BrowserModule, ChartModule],
    declarations: [App],
    bootstrap: [App]
})
export class AppModule {}

Component.ts:
-------------

import { Component } from '@angular/core';

@Component({
    selector: 'simple-chart-example',
    template: `
        <chart [options]="options"></chart>
    `
})
export class App {
    constructor() {
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }
    options: HighchartsOptions;
}

NG2- Default Checkbox true and change Checkbox selection values:

NG2- Default Checkbox true and change Checkbox selection values:
----------------------------------------------------------------



Ref:http://plnkr.co/edit/Hxy5Jz?p=preview

@Component({

 selector: 'my-app',

  providers: [],



 template: `
  <div>
 
 
      <input type="checkbox" [checked]="isAvailable" (change)="isAvailable = $event.target.checked">

     <pre>{{ isAvailable | json }}</pre>

    </div>
  `,

 directives: []
})


export class App {

 isAvailable = true;
 
constructor() {
   
  }

}

NG2-applyCSScontion based

<tr *ngFor="let rowdata of TableRows">
          <td><a routerLink="{{rowdata.sysid}}">{{rowdata.date}}</a></td>      --> link to route
          <td [class.mycls]=getclass(rowdata)>  {{rowdata.title}}</td>         -->No need to make {{rowdata.weekly}}

</tr>

components.ts
--------------

getTableData(): void {
this._Service.getData()
    .subscribe(
res => {
this.TableData =  res;
this.TableRows = res.rows;
}
)
}

getclass(color){
if(color.weekly == 1){
return true;
}
}


service.ts
-----------

getData(): Observable<any> {
        return this._http.get('./app/systemMain/data.json')
                         .map(response => response.json())

    }

NG2- Model Change in Selection - Drop down box

NG2- Model Change in Selection - Drop down box:
-----------------------------------------------

Ref: https://plnkr.co/edit/oFADUI?p=preview


//our root app component
import {Component, Directive, Output, EventEmitter, Input, SimpleChange} from 'angular2/core'
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
//import 'rxjs/Rx';


@Component({
    selector: 'my-app',
    template: `
    <h1>Hello</h1>
<select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
   <option *ngFor="let p of prototypes" [ngValue]="p">
         {{ p.id }}
   </option>
</select>
<div>selected: {{selectedPrototypeSelector.id}}</div>
    `,
})
export class AppComponent {
  selectedPrototypeSelector;
  prototypes = [{id: 'a'}, {id: 'b'}, {id: 'c'}];
 
  constructor() {
    this.selectedPrototypeSelector = this.prototypes[1];
  }
 
  onPrototypeChange() {
    console.debug(this.selectedPrototypeSelector);
  }
}

CSS3- Transition- Left Menu Slide on Mouse Over

<html>
<head>
<style>

.slide{
 -webkit-transition:1s;
 border:1px solid red;
 float:right;
 position:relative;
 left:-50px;

}

.slide:hover{
margin-right:100px;

}

</style>
</head>
<body>

<div class="slide">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
</ul>
</div>
</body>
</html>

HTML5- colored Checkbox - customize Design

<!DOCTYPE html>
<html>

  <head>
  <style>
  input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label:before {
  border: 1px solid #7f83a2;
  content: "\00a0";
  display: inline-block;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: 0 .25em 0 0;
  padding: 0;
  vertical-align: top;
  width: 16px;
}
input[type="checkbox"]:checked + label:before {
  background: green;
  color: white;
  content: "\2713";
  text-align: center;
}
  </style>
   
  </head>

  <body>
    <h1>Hello Plunker!</h1>
   
    <div class="content">
  <div class="box">
    <p>
      <input type="checkbox" id="c1" name="cb">
      <label for="c1">Option 01</label>
    </p>
    <p>
      <input type="checkbox" id="c2" name="cb">
      <label for="c2">Option 02</label>
    </p>
    <p>
      <input type="checkbox" id="c3" name="cb">
      <label for="c3">Option 03</label>
    </p>
  </div>
</div>

  </body>

</html>

Ref: https://plnkr.co/edit/NVYkgMEC7ahYT46fHI9i?p=preview

bootstrap - Collapsesable code snippet

Bootstrap Collapse

<script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<style>


 <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
         <div id="collapseOne" class="collapse out" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
       list view
      </div>
    </div>

Angular JS1 - Disable submit button until form is valid

Disable submit button when form invalid with AngularJS

To void this, you just need to handle $pending state of the form:

<form name="myForm">
  <input name="myText" type="text" ng-model="mytext" required />
  <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>

Chrome Plugin for xhr Error - JSON view - JSONParse -load library

USe unxss is chrome plugin for cross browser origin issue solution.

After added the extenstion enable the checkbox add header and method checkbox.


Get the Json value as json formatter -> chrome plug-in => JSONView plugin


Why Lodash?

JSON Parse

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.
Lodash’s modular methods are great for:

Iterating arrays, objects, & strings
Manipulating & testing values
Creating composite functions

<script src="lodash.js"></script>

$ npm i -g npm
$ npm i --save lodash


// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');

// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');

// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

AngularJs- Toggle div show ng-click ---NG 1

AngularJs- Toggle div show ng-click - 
===================================
View:
=====
<div ng-controller="MyCtrl">
 <button ng-click="showDiv = !showDiv">test </button>
<div ng-show="!showDiv" >
    hello test
</div>
</div>


Controller:
------------

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

}

Used for dropdown list and other thinks


---- Soln2:
==========
 using contoller


 view:
-----
 
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" value="Show Hide DIV" ng-click="ShowHide()" />
        <br />
        <br />
        <div

contoller:
-----------

var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            //This will hide the DIV by default.
            $scope.IsVisible = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.IsVisible ? false : true;
            }
        });

MongoDB - Install - Windowsx64 - Insert and select -shell mode

 MongoDB - Install - 10 step Process

Windowsx64 - Insert and select -shell mode 
1
Open an Administrator command prompt.

Press the Win key, type cmd.exe, and press Ctrl + Shift + Enter to run the Command Prompt as Administrator.

Execute the remaining steps from the Administrator command prompt.

2
Create directories.

Create directories for your database and log files:

now cmd id C:\>

mkdir c:\data\db
//mkdir c:\data\log

3. install mongodb.msi at custome location
c:\mongodb

after installation run the command for running manually mdongodb.

c:\> C:\mongodb\bin\mongod.exe

It gives the status This started the MongoDB service on a default 27017 port

4.running as a Windows service

c:> mkdir c:\mongodb\log

Now, create a configuration file by executing:
c:> echo logpath=C:\mongodb\log\mongo.log > C:\mongodb\mongod.cfg

5: NEW COMMD PROMT

c:> sc.exe create MongoDB binPath= "\"C:\mongodb\bin\mongod.exe\" --service --config= \"C:\mongodb\mongod.cfg\"" DisplayName= "MongoDB" start= "auto"

[SC] CreateService SUCCESS

if (SC service already exist means
stop the mongodb and run the command

sc.exe delete MongoDB

)
Again do the step:5

6.start mongo DB

net start MongoDB

7.net Stop MongoDB

We can able to services running for MongoDB. Mycomputer->Right click->services->MongoDB->right clcik- start or stop.


8.Now to run the mongodb you need to open another command prompt+admin and issue the following command.
c:\mongodb\bin>mongo.exe
Shell version of MongoDB run

It shows mongoDB version and details

Display DB name: ->$show dbs

local , test db name

create and switch to dbs ->$use mydb

switched to bd mydb >

9.DB insert and select

>db.test.save( { a: 1 } )
>db.test.find()
{ "_id" : ObjectId(5879b0f65a56a454), "a" : 1 }
>

10. db.help

HTML5- highchart.js without jquery using runOnLoad.js

HTML5- highchart.js without jquery using runOnLoad.js
---------------------------------------------------------------------------         

<!doctype html>

<head>
<script src="runOnLoad.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>


<script>

// 3d bubblechart donut example

runOnLoad(function(){
     new Highcharts.Chart({
        chart: {
renderTo : 'bubblechartdata',
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        title: {
            text: 'Highcharts bubbles with radial gradient fill'
        },

        xAxis: {
            gridLineWidth: 1
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false
        },

        series: [{
            data: [
                [9, 81, 63],
                [98, 5, 89],
                [51, 50, 73],
                [41, 22, 14],
                [58, 24, 20],
                [78, 37, 34],
                [55, 56, 53],
                [18, 45, 70],
                [42, 44, 28],
                [3, 52, 59],
                [31, 18, 97],
                [79, 91, 63],
                [93, 23, 23],
                [44, 83, 22]
            ],
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                    ]
                }
            }
        }, {
            data: [
                [42, 38, 20],
                [6, 18, 1],
                [1, 93, 55],
                [57, 2, 90],
                [80, 76, 22],
                [11, 74, 96],
                [88, 56, 10],
                [30, 47, 49],
                [57, 62, 98],
                [4, 16, 16],
                [46, 10, 11],
                [22, 87, 89],
                [57, 91, 82],
                [45, 15, 98]
            ],
            marker: {
                fillColor: {
                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
                    ]
                }
            }
        }]

    });
});


 // 3d Highcharts donut example
runOnLoad(function(){
     new Highcharts.Chart({
        chart: {
renderTo : 'highdonut',
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },

          title: {
            text: 'Contents of Highsoft\'s weekly fruit delivery'
        },
        subtitle: {
            text: '3D donut in Highcharts'
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: [
                ['Bananas', 8],
                ['Kiwi', 3],
                ['Mixed nuts', 1],
                ['Oranges', 6],
                ['Apples', 8],
                ['Pears', 4],
                ['Clementines', 4],
                ['Reddish (bag)', 1],
                ['Grapes (bunch)', 6]
            ]
        }]

});
});
 // Pie charts 3D option example
runOnLoad(function(){
     new Highcharts.Chart({
        chart: {
renderTo : 'piechart',
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },

 title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari', 8.5],
                ['Opera', 6.2],
                ['Others', 0.7]
            ]
        }]
    });
});


// activity chart
runOnLoad(function(){
     new Highcharts.Chart({
        chart: {
renderTo : 'activity',
            type: 'solidgauge',
            marginTop: 50
        },

        title: {
            text: 'performance',
            style: {
                fontSize: '24px'
            }
        },

        tooltip: {
            borderWidth: 0,
            backgroundColor: 'none',
            shadow: false,
            style: {
                fontSize: '13px'
            },
            pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
            positioner: function (labelWidth, labelHeight) {
                return {
                    x: 150 - labelWidth / 2,
                    y: 140
                };
            }
        },


        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [
            { // Track for Move
                outerRadius: '112%',
                innerRadius: '88%',
                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
                borderWidth: 0
            }, { // Track for Exercise
                outerRadius: '87%',
                innerRadius: '63%',
                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
                borderWidth: 0
            }, { // Track for Stand
                outerRadius: '62%',
                innerRadius: '38%',
                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
                borderWidth: 0
            }]
        },

        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
        },

        plotOptions: {
            solidgauge: {
                borderWidth: '34px',
                dataLabels: {
                    enabled: false
                },
                linecap: 'round',
                stickyTracking: false
            }
        },

        series: [{
            name: 'Move',
            borderColor: Highcharts.getOptions().colors[0],
            data: [{
                color: Highcharts.getOptions().colors[0],
                radius: '100%',
                innerRadius: '100%',
                y: 80
            }]
        }, {
            name: 'Exercise',
            borderColor: Highcharts.getOptions().colors[1],
            data: [{
                color: Highcharts.getOptions().colors[1],
                radius: '75%',
                innerRadius: '75%',
                y: 65
            }]
        }, {
            name: 'Stand',
            borderColor: Highcharts.getOptions().colors[2],
            data: [{
                color: Highcharts.getOptions().colors[2],
                radius: '50%',
                innerRadius: '50%',
                y: 50
            }]
        }]
    });
  });
 
 
  //stacked bar chart
 
runOnLoad(function(){
     new Highcharts.Chart({
        chart: {
        renderTo : 'stackbarchart',
            type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 25,
                depth: 40
            }
        },

        title: {
            text: 'Total fruit consumption, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },

        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                depth: 40
            }
        },

        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
        }]
    });
});


// 3d drilldown pie example
runOnLoad(function(){
     new Highcharts.Chart({
        chart: {
        renderTo : 'drilldownpie',
            type: 'pie'
           
        },
        title: {
            text: 'Browser market shares. January, 2015 to May, 2015'
        },
        subtitle: {
            text: 'Click the slices to view versions. Source: netmarketshare.com.'
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.y:.1f}%'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        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]
                ]
            }]
        }
    });
});

//stacked storage bar chart
 runOnLoad(function(){
     new Highcharts.Chart({
        chart: {
        renderTo : 'stackedstorebarchart',
             type: 'column',
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 25,
                depth: 40
            }
        },

        title: {
            text: 'Total storage consumption, grouped by month'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'jun']
               },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            },visible: false
        },

        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                depth: 40
            }
        },

        series: [{
            name: 'Used',
            data: [5, 3, 4, 7, 2],
         
        }, {
            name: 'Availabe',
            data: [3, 4, 4, 2, 5],
           
        },  {
            name: 'Saved',
            data: [3, 0, 4, 4, 3],
         
        }]
    });
});
// end of column 3 - stacked storage bar chart

//pie donut slice 2D chart

runOnLoad(function(){
     new Highcharts.Chart({
        chart: {
        renderTo : 'piedonut',
            type: 'pie'
           
        },
plotOptions: {
            pie: {
                borderColor: '#000000',
                innerSize: '60%'
            }
        },
        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
                ]}]
    },
    // using
                                   
    function(chart) { // on complete
       
        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;
   
    // Render the circle
    chart.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#ddd',
    }).add();

    // Render the text
    chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '16px',
            textAlign: 'center'
      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999
        }).add();
    });
});


// grouped pie chart
var noBorder = {
        states:{
            hover:{
                halo: {
                    size: 1
                }    
            }
        }
    };

runOnLoad(function(){
 Highcharts.setOptions({
       colors: ['#8edce7', '#e8ebeb']
   });

        // Create the chart for completion
        var chart_completion = new Highcharts.Chart({
            chart: {
                renderTo: 'container1',
                type: 'pie',
                margin: [0,0,0,0],
                height: 100,
                width: 100

            },
            tooltip: {
                enabled: false,
            },
            plotOptions: {
                pie: {
            slicedOffset: 0,
                size: '100%',
                dataLabels: {
                    enabled: false
                }
           },
                series: noBorder
       },
            title: {
           text: 'In Prog.',
           align: 'center',
           verticalAlign: 'middle',
                style: {
                    fontSize: '9.5px'
                }
         
        },    
            credits: {
  enabled: false
},
            series: [{
                name: 'Browsers',
                data: [["MSIE",10],[,2]],
                innerSize: '80%',
                showInLegend:false,
                dataLabels: {
                    enabled: false
                },
                states:{
                    hover: {
                        enabled: false
                    }
                },
                point : {
                    events: {
                        mouseOver: function(){
                           this.oldTitle = chart_completion.options.title.text;

                           chart_completion.setTitle({
                                text: 'New title '
                            });
                         
                        },
                        mouseOut: function(){
                            chart_completion.setTitle({
                                text: this.oldTitle
                            });
                        }
                    }
                }
            }]
        });
       



        Highcharts.setOptions({
       colors: ['#f07173', '#e8ebeb']
   });

        // Create the chart for time
        var chart_time = new Highcharts.Chart({
            chart: {
                renderTo: 'container2',
                type: 'pie',
                margin: 0,
                 height: 100,
                width: 100
            },

            plotOptions: {
                pie: {
                slicedOffset: 0,
                    size: '100%',
                    dataLabels: {
                        enabled: false
                }
           },
                series : noBorder
       },
            tooltip: {
                enabled: false,
            },

            title: {
           text: 'Hours',
           align: 'center',
           verticalAlign: 'middle',
                style: {
                    fontSize: '9.5px'
                }
         
        },
           
            credits: {
  enabled: false
},
            series: [{
                name: 'Browsers',
                data: [["MSIE",10],[,2]],
                innerSize: '80%',
                showInLegend:false,
                dataLabels: {
                    enabled: false
                },
                states:{
                    hover: {
                        enabled: false
                    }
                }
            }]
        });
     
        Highcharts.setOptions({
       colors: ['#8adfb9', '#e8ebeb']
   });

        // Create the chart for Budget
        var chart_budget = new Highcharts.Chart({
            chart: {
                renderTo: 'container3',
                type: 'pie',
                margin: 0,
                 height: 100,
                width: 100
            },

            plotOptions: {
            pie: {
            slicedOffset: 0,
                size: '100%',
                dataLabels: {
                    enabled: false
                }
           },
                series: noBorder
       },
            title: {
           text: 'Budget',
           align: 'center',
           verticalAlign: 'middle',
                style: {
                    fontSize: '9.5px'
                }
        },
            tooltip: {
                enabled: false,
                animation: false,
                backgroundColor: null
            },

            credits: {
  enabled: false
},
            series: [{
                name: 'Browsers',
                data: [["MSIE",10],[,2]],
                innerSize: '80%',
                showInLegend:false,
                dataLabels: {
                    enabled: false
                },
                states:{
                    hover: {
                        enabled: false
                    }
                }
            }]
        });
    });

runOnLoad(function(){
     new Highcharts.Chart({
        chart: {
        renderTo : 'donuttext',
            type: 'pie'
           
        },
plotOptions: {
            pie: {
                innerSize: '60%'
            }
        },
        series: [{
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
                ]}]
    },
                                   
    function(chart) { // on complete
        var textX = chart.plotLeft + (chart.plotWidth  * 0.5);
        var textY = chart.plotTop  + (chart.plotHeight * 0.5);

        var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
        span += '<span style="font-size: 32px">Upper</span><br>';
        span += '<span style="font-size: 16px">Lower</span>';
        span += '</span>';

        $("#addText").append(span);
        span = $('#pieChartInfoText');
        span.css('left', textX + (span.width() * -0.5));
        span.css('top', textY + (span.height() * -0.5));
    });
});

runOnLoad(function(){
var gaugeOptions = {

        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickAmount: 2,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };
// The speed gauge

var speedmeeter = document.querySelector("#container-speed");
    speedmeeter.highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 200,
            title: {
                text: 'Speed'
            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Speed',
            data: [80],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                       '<span style="font-size:12px;color:silver">km/h</span></div>'
            },
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    }));

    // The RPM gauge
var rpmmeeter = document.getElementById("container-rpm")
    document.getElementById("container-rpm").highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 5,
            title: {
                text: 'RPM'
            }
        },

        series: [{
            name: 'RPM',
            data: [1],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
                       '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
            },
            tooltip: {
                valueSuffix: ' revolutions/min'
            }
        }]

    }));

    // Bring life to the dials
    setTimeout(function () {
        // Speed
        var chart = speedmeeter.highcharts(),
            point,
            newVal,
            inc;

        if (chart) {
            point = chart.series[0].points[0];
            inc = Math.round((Math.random() - 0.5) * 100);
            newVal = point.y + inc;

            if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
            }

            point.update(newVal);
        }

        // RPM
        chart = document.getElementById("container-rpm").highcharts();
        if (chart) {
            point = chart.series[0].points[0];
            inc = Math.random() - 0.5;
            newVal = point.y + inc;

            if (newVal < 0 || newVal > 5) {
                newVal = point.y - inc;
            }

            point.update(newVal);
        }
    }, 2000);

});
</script>
</head>

<body>
<div id="bubblechartdata" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<div id="highdonut" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<div id="piechart" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<div id="activity" style="width: 400px; height: 400px; margin: 0 auto"></div>
<div id="stackbarchart" ></div>

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

<div id="stackedstorebarchart" class="col-md-6"></div>

<div id="piedonut" style="height: 400px; width: 500px"></div>

<div id="container1" style="display:inline-block;"></div>
<div id="container2" style="display:inline-block;"></div>
<div id="container3" style="display:inline-block;"></div>


<div>
    <div id="donuttext" style="position:absolute; left:0px; top:0px;"></div>
    <div id="addText" style="position:absolute; left:0px; top:0px;"></div>
</div>



<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>
</body>
</html>


runOnLoad.js
-------------
//code.stephenmorley.org

var runOnLoad=function(c,o,d,e){function x(){for(e=1;c.length;)c.shift()()}o[d]?(document[d]('DOMContentLoaded',x,0),o[d]('load',x,0)):o.attachEvent('onload',x);return function(t){e?o.setTimeout(t,0):c.push(t)}}([],window,'addEventListener');