I have to draw a line graph for a project. I based my graph on the example provided at https://stackblitz.com/edit/swimlane-line-chart?embed=1&file=app/app.component.ts
i got the example to work and transformed my data to refelct the necessary interfaces. my data now looks like this:
[
{
"name": "SEM+",
"series": [
{
"name": "30",
"value": 0
},
{
"name": "90",
"value": 0
},
{
"name": "120",
"value": 0
},
{
"name": "150",
"value": 56.2
},
{
"name": "180",
"value": 0
},
{
"name": "210",
"value": 2.5999999999999996
},
{
"name": "240",
"value": 1.4
},
{
"name": "300",
"value": 0.2
},
{
"name": "360",
"value": 3.5999999999999996
}
]
},
{
"name": "mean",
"series": [
[
{
"name": "30",
"value": -0.1
},
{
"name": "90",
"value": -0.1
},
{
"name": "120",
"value": -0.1
},
{
"name": "150",
"value": 28
},
{
"name": "180",
"value": -0.1
},
{
"name": "210",
"value": 1.2
},
{
"name": "240",
"value": 0.7
},
{
"name": "300",
"value": 0.1
},
{
"name": "360",
"value": 1.7
}
]
]
},
{
"name": "SEM-",
"series": [
[
{
"name": "30",
"value": -0.2
},
{
"name": "90",
"value": -0.2
},
{
"name": "120",
"value": -0.2
},
{
"name": "150",
"value": -0.1999999999999993
},
{
"name": "180",
"value": -0.2
},
{
"name": "210",
"value": -0.19999999999999996
},
{
"name": "240",
"value": 0
},
{
"name": "300",
"value": 0
},
{
"name": "360",
"value": -0.19999999999999996
}
]
]
}
]
fields in my component:
// data for the graph
@Input() timeData: TimeData[];
@Input() color: string;
@Input('activeSubstance') yAxisLabel;
transformedData: any[];
// options
xAxisLabel = 'time (min)';
legend = true;
xAxis = true;
yAxis = true;
showYAxisLabel = true;
showXAxisLabel = true;
timeline = true;
dimensions: any[] = [700, 300];
ticks: any[] = [30, 90, 120, 150, 180, 210, 240, 300, 360];
colorScheme = {
domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']
};
html:
<ngx-charts-line-chart
[view]="dimensions"
[scheme]="colorScheme"
[legend]="legend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxis]="xAxis"
[yAxis]="yAxis"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[results]="transformedData"
[xAxisTicks]="ticks">
</ngx-charts-line-chart>
first of all, i had to manually input the xAxisTicks since the ngx chart didn't recognize them. with that i got the tick contructor error to disappear.
adding the [timeline] attribute throws more error but i think i won't need that.
however, the errors that i am getting with the data i put in are:
Error: attribute d: Expected number, "…521739130434781,NaNL60.739130434…". at platform-browser.js:1151
and
Error: attribute d: Expected number, "…521739130434781,NaNL60.739130434…" at attrTween.js:5
with this configuration I now also get the same error with the testdata that previously worked. It does still draw the lines though, which it does not for my data.
i also tried other browsers, the issue persists....
edit: posting the full code
component.ts:
import {Component, Input, OnInit} from '@angular/core';
import {TimeData} from '../../../models/TimeData';
@Component({
selector: 'app-line-graph',
templateUrl: './line-graph.component.html',
styleUrls: ['./line-graph.component.scss']
})
export class LineGraphComponent implements OnInit {
data = [
{
'name': 'Germany',
'series': [
{
'name': '1990',
'value': 62000000
},
{
'name': '2010',
'value': 73000000
},
{
'name': '2011',
'value': 89400000
}
]
},
{
'name': 'USA',
'series': [
{
'name': '1990',
'value': 250000000
},
{
'name': '2010',
'value': 309000000
},
{
'name': '2011',
'value': 311000000
}
]
},
{
'name': 'France',
'series': [
{
'name': '1990',
'value': 58000000
},
{
'name': '2010',
'value': 50000020
},
{
'name': '2011',
'value': 58000000
}
]
},
{
'name': 'UK',
'series': [
{
'name': '1990',
'value': 57000000
},
{
'name': '2010',
'value': 62000000
}
]
}
];
// data for the graph
@Input() timeData: TimeData[];
@Input() color: string;
@Input('activeSubstance') yAxisLabel;
transformedData: any[];
// options
xAxisLabel = 'time (min)';
legend = true;
xAxis = true;
yAxis = true;
showYAxisLabel = true;
showXAxisLabel = true;
timeline = true;
dimensions: any[] = [700, 300];
ticks: any[] = [30, 90, 120, 150, 180, 210, 240, 300, 360];
colorScheme = {
domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']
};
constructor() {
}
ngOnInit(): void {
this.colorScheme = {domain: ['#868686', this.color, '#868686']};
this.transformedData = this.createTransfromedData();
console.log(this.transformedData);
console.log(this.data);
}
createTransfromedData() {
const data = [];
data.push({name: 'SEM+', series: [this.makeSeries('SEM+')]});
data.push({name: 'mean', series: [this.makeSeries('mean')]});
data.push({name: 'SEM-', series: [this.makeSeries('SEM-')]});
return data;
}
makeSeries(funcName: string) {
const seriesData = [];
for (const stamp of this.timeData) {
if (parseFloat(stamp.data.SEM)) {
if (parseFloat(stamp.data.MEAN)) {
if (funcName === 'SEM+') {
seriesData.push(
{
name: stamp.time.toString(),
value: parseFloat(stamp.data.MEAN) + parseFloat(stamp.data.SEM)
});
}
if (funcName === 'mean') {
seriesData.push(
{
name: stamp.time.toString(),
value: parseFloat(stamp.data.MEAN)
});
}
if (funcName === 'SEM-') {
seriesData.push(
{
name: stamp.time.toString(),
value: parseFloat(stamp.data.MEAN) - parseFloat(stamp.data.SEM)
});
}
}
}
}
return seriesData;
}
}
html code is just the one i posted above
The component is called within another component like so:
<app-line-graph [timeData]="report.experiments[0].timeData"
[activeSubstance]="report.activeSubstance"
[color]="experimentColors[0]">
</app-line-graph>
