I've been working on a Web-Client project that involves visualizing sensor data such as velocity and acceleration within a coordinate system. In order to display this coordinate system, I decided to use the graph.js library from https://github.com/dhuertas/graph.js. This library worked perfectly in a traditional index.html file with regular JavaScript, but now I'm migrating to Angular7 which uses TypeScript and Angular's component-based structure.
I've tried following various advice, like this thread: Use external javaScript library in angular 4 application, but unfortunately none of it has worked for me.
Here's what I've attempted:
The HTML code in my component:
<div style="position:relative;top:100px;left:950px" id='container' class="trajStrly"></div>
<script type="module" src="../libraries/graph.js"></script>
The TypeScript code in my component.ts:
import * as Graph from '../libraries/graph';
declare var Graph: any;
// ... inside the component Class...
graph: any;
ngOnInit() {
this.graph = new Graph({
appendTo : "container",
canvasWidth : 100,
canvasHeight : 100,
colorList : ["#666666","#666666","#00F"],
xAxisTitle : "X",
yAxisTitle : "Y"
});
this.draw();
}
The draw function is functioning properly with JavaScript, so that's not the issue here. It initializes the graph with values to be drawn.
The problem arises when I receive an error stating that graph.js is not being recognized as a module. I've even tried editing graph.js by adding export default before the definition of Graph within the file. Additionally, I've reached out to the creator via email, but haven't received a response yet.