creativetimofficial / material-dashboard-angular2

Material Dashboard Angular
https://demos.creative-tim.com/material-dashboard-angular2/
MIT License
1.01k stars 2.09k forks source link

How to display point label in line chart? #28

Closed shivduttp closed 5 years ago

shivduttp commented 6 years ago

I am trying to use this plugin for my line charts, but the tags are not being inserted after each element like in the example on chartist shows. (https://gionkunz.github.io/chartist-js/plugins.html#point-label-plugin). I have included the plugin JS file in project, also modified angular-cli.json to include JS file, modified tsconfig.app.json & tsconfig.spec.json to set allowJs as true but still no luck. Not sure if i am missing anything. - tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "allowJs":true,
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.spec.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "baseUrl": "",  
    "allowJs":true,
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

angular-cli.json

"scripts": [
          "../node_modules/jquery/dist/jquery.js",
          "../node_modules/bootstrap/dist/js/bootstrap.js",
          "../node_modules/bootstrap-material-design/dist/js/ripples.min.js",
          "../node_modules/bootstrap-material-design/dist/js/material.min.js",
          "../node_modules/arrive/src/arrive.js",
          "../node_modules/moment/moment.js",
          "../node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js",
          "../node_modules/bootstrap-notify/bootstrap-notify.js",
          "../node_modules/chartist/dist/chartist.js",
          "./assets/js/chartist-plugin-pointlabels.js"
      ],

dashboard.components.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { EmbarkingShip } from './embarkation';
import { EmbarkationService } from './embarkation.service';
import { EmbarkationCount } from './embarkationcount';
import { EmbarkationCountService } from './embarkationcount.service';
import * as Chartist from 'chartist';

import { Observable } from "rxjs";
import { TimerObservable } from "rxjs/observable/TimerObservable";

import * as ctPointLabels from '../../assets/js/chartist-plugin-pointlabels.js';
. . . . . . . 

this.embarkationCountService.getSeriesDetails()
                .subscribe((chartData) => {
                    this.chartData = chartData;                    
                    console.log(chartData);                         
                    const optionsDailySalesChart: any = {
                        lineSmooth: Chartist.Interpolation.cardinal({
                        tension: 0
                        }),
                        low: 0,
                        high: 25,                        
                        chartPadding: { top: 0, right: 0, bottom: 0, left: 0},                        
                    }

                    var dailySalesChart = new Chartist.Line('#dailySalesChart', {labels:this.chartLabels,series:this.chartData}, optionsDailySalesChart);            
                    this.startAnimationForLineChart(dailySalesChart);

            }); 

Compilation error message -

chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [ rendered] chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial ] [rendered] chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 b ytes {inline} [initial] [rendered] chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 329 kB {inline} [ initial] [rendered] chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]

ERROR in C:/Users/Dashboard/src/app/dashboard/d ashboard.component.ts (11,32): File 'C:/Users/Dashboard/src/assets/js/chartist-plugin-pointlabels.js' is not a module.

webpack: Failed to compile.