vaadin flow 14 with amCharts

Hi,

I would like to integrate amChart to my vaadin flow 14 project and i would to know if anyone of you have experience with this?
Should i use Webpack for this?

Thanks for you response,
regards,

Nobody can help me?

You might be successful by applying this approach: https://github.com/appreciated/apexcharts-flow.

Please share if you are successful. Good luck…!

I’ve looked at little bit at amCharts. It is really a wonderful component, but the API is very large, which means that a wrapper would also be very large / take a lot of effort to write.

To get an impression, find a dependency graph of the amCharts TypeScript attached (created with https://github.com/pahen/madge).

Hi,

Here an example of how you can integrate Amcharts in a Vaadin 14 project.
https://github.com/jcgueriaud1/amcharts-demo

As Mark said it before, the API is very large. In my example you can only set the data from Java. All configuration is set in javascript.

I only translated this example https://www.amcharts.com/docs/v4/getting-started/integrations/using-webpack/ (a XY Chart).

I don’t use webpack, and I get the amcharts from the CDN. With webpack, it may be problematic :p.

If you have some questions about it, don’t hesitate.

\u0000Thank you, Jean-Christophe. Great example and inspiration…! \uD83D\uDC4D\uD83C\uDFFB

\u0000Thanks a lot Jean-Christophe. \uD83D\uDC4D\uD83C\uDFFB

Anything better on this yet?

Nemanja Kostic:
Anything better on this yet?

Hi,

What do you mean?

I didn’t update my example, I don’t remember if I tried with webpack.

I’m trying with webpack but have no success.

https://www.amcharts.com/docs/v4/getting-started/integrations/using-webpack/

I added:

 "@amcharts/amcharts4": "4.9.23",
 "@amcharts/amcharts4-geodata": "4.1.15"

under devDependencies in package.json

and imported in js polymer template :

import '@polymer/polymer/polymer-legacy.js';
import '@vaadin/vaadin-lumo-styles/badge.js';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import am4geodata_worldHigh from "@amcharts/amcharts4-geodata/worldHigh";

import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';

Under my node_modules folder in project root now I have @amcharts folders with js files but I don’t see anything in page, nothing, ofcourse I created:

// Create map instance
var chart = am4core.create(this.$.container, am4maps.MapChart);

I’ve updated my example with webpack. https://github.com/jcgueriaud1/amcharts-demo/tree/webpack

It seems ok.
Do you have any error in your code? (Javascript error or webpack error)

Maybe amcharts doesn’t work well in the shadow dom and polymer template. I’m using pure javascript so I won’t have this error.

Why did add this as a devDependency? It should be a dependency

Jean-Christophe Gueriaud:
I’ve updated my example with webpack. https://github.com/jcgueriaud1/amcharts-demo/tree/webpack

It seems ok.
Do you have any error in your code? (Javascript error or webpack error)

Maybe amcharts doesn’t work well in the shadow dom and polymer template. I’m using pure javascript so I won’t have this error.

Why did add this as a devDependency? It should be a dependency

I moved from devDependencies to dependencies. Got Javascript error:

Uncaught TypeError: classType is not a constructor
    at Container.createChild (Container.ts:753)
    at createChild (Instance.ts:74)
    at Module.create (Instance.ts:361)
    at HTMLElement.ready (48b5:134)
    at HTMLElement._enableProperties (properties-changed.js? [sm]
:333)
    at HTMLElement.connectedCallback (properties-mixin.js? [sm]
:214)
    at HTMLElement.connectedCallback (element-mixin.js? [sm]
:619)
    at 48b5:294

It’s in this part on create map instance in ready() function:

	  // Create map instance
      var chart = am4core.create(this.$.container, am4maps.MapChart);

I have imports for am4core and am4maps and div with id = “container” and don’t know what is problem there.

Thank you very much for help.

Is it because of this?

import * as am4maps from "@amcharts/amcharts4/charts";

Instead of this

import * as am4maps from "@amcharts/amcharts4/maps";

Ahh, found an error! It was bad import:

import * as am4maps from "@amcharts/amcharts4/charts";

instead of:

import * as am4maps from "@amcharts/amcharts4/maps";

Now everything works fine. Btw I don’t have connector.js as you.

Jean-Christophe Gueriaud:
Is it because of this?

import * as am4maps from "@amcharts/amcharts4/charts";

Instead of this

import * as am4maps from "@amcharts/amcharts4/maps";

Exactly! :)))

Thanks again!

Now everything works fine. Btw I don’t have connector.js as you.

Great!

You can use polymer template or pure javascript, it’s a matter of preferences and the way you code the client side :slight_smile: