How to add highchart in angular 5

Highchart is an popular libary to implement charts in your application. Highcharts comes with both personal and commercial version.

Users can purchase based on needs.

Here the steps to implement in Angular 5 Application.

Step 1:

# install angular-highcharts and highcharts
npm i --save angular-highcharts highcharts

# install highcharts typings
npm i --save-dev @types/highcharts

Step 2:

// app.module.ts
import { ChartModule } from 'angular-highcharts';</code>

@NgModule({
imports: [
ChartModule // add ChartModule to your imports
]
})
export class AppModule {} 

Step 3:


// chart.component.ts
import { Chart } from 'angular-highcharts';

@Component({
  template: `
    <button (click)="add()">Add Point!</button>
    <div [chart]="chart"></div>
  `
})
export class ChartComponent {
  chart = new Chart({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Linechart'
    },
    credits: {
      enabled: false
    },
    series: [
      {
        name: 'Line 1',
        data: [1, 2, 3]
      }
    ]
  });

  // add point to chart serie
  add() {
    this.chart.addPoint(Math.floor(Math.random() * 10));
  }
}

More Information: github.com

How to change port in GIT

When you clone repository from git using SSH you may get following error message

ssh: connect to host github.com port 22: Bad file number 
ssh: connect to host (some host or IP address) port 22: Bad file number

Solution :

Step 1: open gitbash
Step 2: > touch ~/.ssh/config
Step 3: > Paste following code in config file

Host github.com
   User git
   Hostname ssh.github.com
   PreferredAuthentications publickey
   IdentityFile ~/.ssh/id_rsa
   Port 443

Get started with React js – Tutorial for React JS Beginners

Create new reactapp using NPM

npm install -g create-react-app
create-react-app my-app
--------
cd my-app
npm start

Advantages using reactJS over AngularJS

  • Component Structured
  • SEO friendly because of virtual DOM
  • JSX and reactNative
  • Used in Facebook and Instagram
  • Virtual Dom in main advanatage of using reactjs

JSX indepth

  • Javascript XML

More on – JXS In Depth

Basic Syntax

createClass in React < 15.0.0

import React from 'react';

const Contacts = React.createClass({
render() {
return (
<div></div>
);
}
});

export default Contacts;

Note : react.createclass is deprecated since react 15.5.0

Components

class Comment extends React.Component {
  constructor(props) {
        super(props);
        this.state = {
            counter: 0
        };
  }
  render(){
    return <h1>{this.props.name}</h1>;
  }
}

React.render(<Comment name={'Comment'}/>, document.getElementById('container'));

Stateless Components

  const Headline = () => {
  return <h1>React Cheat Sheet</h1>
}

Props
Props – Read only & not be modified

State
state changes async
can be modidfied using this.setState