jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
96 lines (83 loc) • 2.7 kB
text/typescript
import { Component, ViewChild } from '@angular/core';
import { jqxChartComponent } from 'jqwidgets-ng/jqxchart';
({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
('myChart', { static: false }) myChart: jqxChartComponent;
source: any =
{
datatype: 'csv',
datafields: [
{ name: 'Country' },
{ name: 'GDP' },
{ name: 'DebtPercent' },
{ name: 'Debt' }
],
url: './../../../sampledata/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($)<br>' }
},
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 =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<title>jQWidgets Chart</title>' +
'</head>' +
'<body>' + content + '</body></html>';
try {
document.write(pageContent);
document.close();
newWindow.print();
newWindow.close();
}
catch (error) {
}
}
}