0
266
ViewsDynamically generate multiple canvas area based on json provided
I am using angular2 and html5 canvas. Based on json provided I want to create multiple divs with canvas area inside them.
This is how generate my divs with canvas area (HTML CODE)
<div class="masterpage" *ngFor="let x of masterPages" draggable [dragScope]="'masterpage'" [dragData]="x">
<canvas #myCanvas width="105" height="149" style="background:lightgray;"></canvas>
</div>
.ts code
ngAfterViewInit() {
let canvas = this.myCanvas.nativeElement;
this.context = canvas.getContext("2d");
this.tick(this.masterPages);
}
tick(masterPages) {
var ctx = this.context;
ctx.clearRect(0, 0, 150, 150);
for (let j = 0; j < this.masterPages[this.count].areas.length; j++) {
ctx.fillStyle = this.masterPages[this.count].areas[j].type;
ctx.fillRect(masterPages[this.count].areas[j].x / 2, masterPages[this.count].areas[j].y / 2, masterPages[this.count].areas[j].width / 2, masterPages[this.count].areas[j].height / 2);
}
this.count = this.count + 1;
}
below is my json
masterPages = [{
areas: [
{
type: "FlowArea",
width: "183.0",
x: "12.0",
y: "40.0",
id: "FAR.1",
height: "237.0"
},
{
type: "StaticArea",
width: "210.0",
x: "0.0",
y: "7.0",
id: "SAR.2",
height: "25.0"
},
{
type: "StaticArea",
width: "210.0",
x: "0.0",
y: "282.0",
id: "SAR.1",
height: "15.0"
},
{
type: "StaticArea",
width: "2.0",
x: "6.0",
y: "26.0",
id: "SAR.3",
height: "256.0"
}
]
},
{
areas: [
{
type: "FlowArea",
width: "183.0",
x: "12.0",
y: "13.25",
id: "FAR.1",
height: "265.0"
},
{
type: "StaticArea",
width: "210.0",
x: "0.0",
y: "282.0",
id: "SAR.1",
height: "15.0"
}
]
}
];
according to json both canvas should have some shapes but in my case second canvas is coming empty
3 answers
Answer question0
Try using @ViewChildren instead of @ViewChild and iterate over each canvas using
let canvas = this.myCanvas.toArray()[i].nativeElement;
So who will get access to each of the canvas area created dynamically.
0
The main problem is that the identifier (#myCanvas) can handle only one reference to an element.
And unfortunately, as far as I'm aware, there's no way to generate multiple unique identifiers dinamically.
In order to update several different canvas elements, you will need to get their references by some other means. One of them is to manipulate the DOM directly, but it's not recommended, like:
let canvas = document.getElementById('canvas' + i);
Another example would be to use a querySelector (via ElementRef):
this.elementRef.nativeElement.querySelector('.myCanvasClass');
Take a look and the ViewChildren documentation. It might shed some light to what you're trying to do: https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html
0
Just get the json from server and parse it with JSON.parse.
For drawing a canvas chart.
You can used this library javaScript plotting for jQuery - http://www.flotcharts.org/
It's will help you plot a graph via JSON data.
For ajax update - http://www.flotcharts.org/flot/examples/ajax/index.html For realtime update - http://www.flotcharts.org/flot/examples/realtime/index.html Sample static plot - http://www.flotcharts.org/flot/examples/basic-usage/index.htm
var d = [];
for (var i = 0; i < 14; i += 0.5) {
d .push([i, Math.sin(i)]);
}
var do = [[0, 3], [4, 8], [8, 5], [9, 13]];
// A null signifies separate line segments
var dd = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot("#placeholder", [ d, do, dd]);