0

I'm trying to load data into some charts in the ng2-admin template using an API running on another server (or port to be exact).

My code inside the lineChart.service.ts is as follows:

return {
  type: 'serial',
  theme: 'blur',
  marginTop: 15,
  marginRight: 15,
  responsive: {
    'enabled': true
  },
  dataLoader: {
    url: 'http://localhost:4000/reporting/temperatures',
    format: 'json',
    showErrors: true,
    noStyles: true,
    async: true
  },

  categoryField: 'MeasureMoment',
  categoryAxis: {
    parseDates: true,
    gridAlpha: 0,
    inside: true,
    color: layoutColors.defaultText,
    axisColor: layoutColors.defaultText
  },
  valueAxes: [
    {
      minVerticalGap: 50,
      gridAlpha: 0,
      color: layoutColors.defaultText,
      axisColor: layoutColors.defaultText,
      labelFunction: this.formatLabel
    }
  ],
  graphs: [
    {
      id: 'g0',
      bullet: 'none',
      useLineColorForBulletBorder: true,
      lineColor: colorHelper.hexToRgbA(graphColor, 0.3),
      lineThickness: 1,
      negativeLineColor: layoutColors.danger,
      type: 'smoothedLine',
      valueField: 'Temperature',
      fillAlphas: 1,
      fillColorsField: 'lineColor'
    }
  ],
  chartCursor: {
    categoryBalloonDateFormat: 'MM YYYY',
    categoryBalloonColor: '#4285F4',
    categoryBalloonAlpha: 0.7,
    cursorAlpha: 0,
    valueLineEnabled: true,
    valueLineBalloonEnabled: true,
    valueLineAlpha: 0.5
  },
  dataDateFormat: 'MM YYYY',
  export: {
    enabled: true
  },
  creditsPosition: 'bottom-right',
  zoomOutButton: {
    backgroundColor: '#fff',
    backgroundAlpha: 0
  },
  zoomOutText: '',
  pathToImages: layoutPaths.images.amChart
};

This is not much other than the default page, except for the part of the data, where in the original template there is a dataProvider element with the data in it and I replaced that by a dataLoader, which I've used successfully before.

I replaced the valueField and CategoryField values by the elements my API returns. As far as I know that should do the trick. When I reload the page I don't see any chart.

I've tested the API, which returns data. I added a log row to the console every time the API is called showing a request is made. I see no requests being made when the ng2-admin page reloads.

When I make some error and see an error message I could look into that, but there's no error message whatsoever.

I could use some help figuring this one out. If more information is needed I'll be glad to share.

Thanks!

Arno
  • 73
  • 1
  • 9
  • Did you include the dataLoader plugin (`dataloader.min.js`) somewhere in your app? – xorspark Jun 13 '17 at 14:26
  • No I did not. I'm new to Angular2 and the ng2-admin template. Finding out how stuff works by trial and error :) I would not know were to add the usual include statement – Arno Jun 13 '17 at 14:33
  • 1
    Gotcha. :) I'm also not familiar with Angular2 or Typescript, but however you're currently including the amcharts js files in your app (`amcharts.js`, `serial.js`, etc), you'll want to include the dataloader plugin after the chart libraries, which should make the dataloader config actually work for you. – xorspark Jun 13 '17 at 14:46
  • 1
    Gotcha indeed! After your comment I still didn't know where to put these includes as I used to do in ancient plain script, so I searched the /src folder of the ng2-admin app and found the right location. In ng2-admin/src/app/theme/components/baAmChart/baAmChart.component.ts are the imports located. I added the dataloader.js import and now I see some data being loaded! Thanks a lot!! – Arno Jun 13 '17 at 17:20

1 Answers1

1

So, for any one who is looking for the same functionality, the solution is as follows:

As xorspark stated: to use the dataLoader functionality you should include the dateloader.js or dataloader.min.js But as the Angular framework / CLI framework (not sure which one is causing this) does not use the regular structures by default I was a little confused. Searching in the source of the ng2-admin template learned that the file baAmChart.compo‌​nent.ts contains the imports (the "replacements") for amchart:

import 'amcharts3';
import 'amcharts3/amcharts/plugins/responsive/responsive.js';
import 'amcharts3/amcharts/serial.js';

I just added the dataloader import 

import 'amcharts3/amcharts/plugins/dataloader/dataloader.js';

That solved the "not loading" issue. And of course one could add other plugins here a well.

Thanks again for pointing me to the dataloader.js xorspark!

Arno
  • 73
  • 1
  • 9