import * as React from 'react'; import { useRef, useMemo } from 'react'; import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons'; import JqxChart, { IChartProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart'; const App = () => { const myChart = useRef(null); const chartProps: IChartProps = useMemo(() => { const source: any = { datafields: [ { name: 'Country' }, { name: 'GDP' }, { name: 'DebtPercent' }, { name: 'Debt' } ], datatype: 'csv', url: 'gdp_dept_2010.txt' }; return { description: 'GDP and Debt in 2010', padding: { left: 5, top: 5, right: 5, bottom: 5 }, seriesGroups: [ { columnsGapPercent: 50, series: [ { dataField: 'GDP', displayText: 'GDP per Capita' }, { dataField: 'Debt', displayText: 'Debt per Capita' } ], type: 'column', valueAxis: { title: { text: 'GDP & Debt per Capita($)
' }, unitInterval: 5000 } }, { series: [ { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' } ], type: 'line', valueAxis: { gridLines: { visible: false }, position: 'right', title: { text: 'Debt (% of GDP)' }, unitInterval: 10 } } ], source: new jqx.dataAdapter(source, { async: false, autoBind: true, loadError: (xhr: any, status: any, error: any) => { alert('Error loading "' + source.url + '" : ' + error); } }), title: 'Economic comparison', titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, xAxis: { dataField: 'Country' } }; }, []); const btnOnClick = (event: any) => { const content = myChart.current!.getInstance().host[0].outerHTML; const newWindow = window.open('', '', 'width=800, height=500'); const documentWindow = newWindow!.document.open(); const pageContent = '' + '' + '' + '' + 'jQWidgets Chart' + '' + '' + content + ''; try { documentWindow.write(pageContent); documentWindow.close(); newWindow!.print(); newWindow!.close(); } catch (error) { alert('error'); } }; return (


Print
); }; export default App;