up

Author: rxzx

package-lock.json

@@ -9,7 +9,7 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "ng:serve":"ng serve --proxy-config proxy.config.json"
+    "ng:serve": "ng serve --proxy-config proxy.config.json"
   },
   "private": true,
   "dependencies": {
@@ -22,7 +22,9 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "angular-highcharts": "^5.2.13",
     "core-js": "^2.4.1",
+    "highcharts": "^6.1.1",
     "moment": "^2.22.2",
     "ngx-bootstrap": "^2.0.5",
     "ngx-embed-video": "^0.3.0",
@@ -36,6 +38,7 @@
     "@angular/cli": "~1.7.4",
     "@angular/compiler-cli": "^5.2.0",
     "@angular/language-service": "^5.2.0",
+    "@types/highcharts": "^5.0.26",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/lodash": "^4.14.115",

package.json

@@ -11,6 +11,7 @@ import { PublicModule } from './public/public.module';
 import { HTTPService } from './Providers/httpservice';
 import { PrivateModule } from './private/private.module';
 import { AlwaysAuthGuard, OnlyLoggedInUsersGuard } from './AlwaysAuthGuard ';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 @NgModule({
   declarations: [
     AppComponent,
@@ -28,13 +29,14 @@ import { AlwaysAuthGuard, OnlyLoggedInUsersGuard } from './AlwaysAuthGuard ';
   ],
   exports: [
     ToastrModule,
-    FormsModule,
+    FormsModule
   ],
   providers: [
     HttpClient,
     HTTPService,
     AlwaysAuthGuard,
     OnlyLoggedInUsersGuard,
+    { provide: LocationStrategy, useClass: HashLocationStrategy }
   ],
   bootstrap: [AppComponent],
   schemas: [

src/app/app.module.ts

@@ -1,7 +1,6 @@
 <div class="container">
   <div class="row">
-    <h2>Data Charts</h2>
-    <hr>
+    <h2>About Us</h2>
     <div class="col-md-12">
 
     </div>

src/app/private/about/about.component.html

@@ -1,3 +1,14 @@
-<!-- <div class="cotainer">
-  <div [chart]="chart"></div>
-</div>> -->
+<div class="cotainer">
+  <div class="row">
+    <div class="col-md-12">
+      <button (click)="add()" class="btn btn-danger">Add Point!</button>
+      <div [chart]="linechart"></div>
+    </div>
+
+    <div class="col-md-12">
+      <!-- <button (click)="add()" class="btn btn-danger">Add Point!</button> -->
+      <div [chart]="barchart"></div>
+    </div>
+  </div>
+
+</div>

src/app/private/demo-charts/demo-charts.component.html

@@ -7,31 +7,54 @@ import { Chart } from 'angular-highcharts';
   styleUrls: ['./demo-charts.component.css']
 })
 export class DemoChartsComponent implements OnInit {
-  public chart: Chart = new Chart();
+  public linechart = new Chart();
+  public barchart = new Chart();
 
   constructor() {
-
+    this.initiateLineChart();
+    this.initiateBarChart();
   }
 
   ngOnInit() {
 
-    // this.chart = new Chart({
-    //   chart: {
-    //     type: 'line'
-    //   },
-    //   title: {
-    //     text: 'Linechart'
-    //   },
-    //   credits: {
-    //     enabled: false
-    //   },
-    //   series: [
-    //     {
-    //       name: 'Line 1',
-    //       data: [1, 2, 3]
-    //     }
-    //   ]
-    // });
+  }
+
+  add() {
+    this.linechart.addPoint(Math.floor(Math.random() * 10));
+  }
+
+  initiateLineChart() {
+    this.linechart = new Chart({
+      chart: {
+        type: 'line'
+      },
+      title: {
+        text: 'Line Chart'
+      },
+      series: [
+        {
+          name: 'Line 1',
+          data: [1, 2, 3]
+        }
+      ]
+    });
+  }
+
+  initiateBarChart() {
+    this.barchart = new Chart({
+      chart: {
+        type: 'bar'
+      },
+      title: {
+        text: 'Bar Chart'
+      },
+      series: [
+        {
+          name: 'Line 1',
+          data: [1, 2, 3]
+        }
+      ]
+    });
   }
 
 }

src/app/private/demo-charts/demo-charts.component.ts

@@ -8,7 +8,6 @@ <h2> Image Gallery</h2>
       </div>
     </div>
   </div>
-  <hr>
   <div class="row">
     <h2> Video Gallery</h2>
     <hr>

src/app/private/gallery/gallery.component.html

@@ -29,16 +29,16 @@ <h2><i class="fas fa-home"></i> Admin Panel</h2>
     <div class="collapse navbar-collapse" id="myNavbar">
       <ul class="nav navbar-nav">
         <li [routerLinkActive]="['active']" [routerLink]="['/user/home']">
-          <a>Data Grid</a>
+          <a>Grid</a>
         </li>
         <li [routerLinkActive]="['active']" [routerLink]="['/user/demo-charts']">
           <a>Charts</a>
         </li>
-        <li [routerLinkActive]="['active']" [routerLink]="['/user/about']">
-          <a>Data Charts</a>
-        </li>
         <li [routerLinkActive]="['active']" [routerLink]="['/user/gallery']">
-          <a>Media Gallery</a>
+          <a>Media</a>
+        </li>
+        <li [routerLinkActive]="['active']" [routerLink]="['/user/about']">
+          <a>About</a>
         </li>
         <li>
           <a href="javascript:;">Contact</a>

src/app/private/header/header.component.html

@@ -1,3 +1,4 @@
+import { ChartModule } from 'angular-highcharts';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PrivateFooterComponent } from './footer/footer.component';
@@ -22,7 +23,8 @@ import { HttpModule } from '@angular/http';
     HttpModule,
     EmbedVideo.forRoot(),
     SharedModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ChartModule
   ],
   declarations: [
     PrivateComponent,