import { Component, ViewChild } from '@angular/core';
import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
@ViewChild('myChart') myChart: jqxChartComponent;
source: any =
{
datatype: 'csv',
datafields: [
{ name: 'Country' },
{ name: 'GDP' },
{ name: 'DebtPercent' },
{ name: 'Debt' }
],
url: '../assets/gdp_dept_2010.txt'
};
getWidth() : any {
if (document.body.offsetWidth < 850) {
return '90%';
}
return 850;
}
dataAdapter: any = new jqx.dataAdapter(this.source, { async: false, autoBind: true, loadError: (xhr: any, status: any, error: any) => { alert('Error loading "' + this.source.url + '" : ' + error); } });
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: 'Country'
};
seriesGroups: any[] =
[
{
type: 'column',
columnsGapPercent: 50,
valueAxis:
{
unitInterval: 5000,
title: { text: 'GDP & Debt per Capita($)
' }
},
series: [
{ dataField: 'GDP', displayText: 'GDP per Capita' },
{ dataField: 'Debt', displayText: 'Debt per Capita' }
]
},
{
type: 'line',
valueAxis:
{
unitInterval: 10,
title: { text: 'Debt (% of GDP)' },
gridLines: { visible: false },
position: 'right'
},
series: [
{ dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
]
}
];
btnOnClick(): void {
let content = this.myChart.host[0].outerHTML;
let newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'' +
'' +
'' +
'' +
'jQWidgets Chart' +
'' +
'' + content + '';
try {
document.write(pageContent);
document.close();
newWindow.print();
newWindow.close();
}
catch (error) {
}
}
}