mirror of
https://github.com/bendtherules/line_chart_demo.git
synced 2026-08-18 13:52:30 +00:00
324 lines
10 KiB
HTML
324 lines
10 KiB
HTML
<html>
|
|
<head>
|
|
<title>My first chart using FusionCharts Suite XT</title>
|
|
<script type="text/javascript" src="./fusioncharts.js"></script>
|
|
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
|
|
<script type="text/javascript">
|
|
FusionCharts.ready(function(){
|
|
var fusioncharts = new FusionCharts({
|
|
type: 'column2d',
|
|
renderAt: 'chart-container1',
|
|
width: '500',
|
|
height: '300',
|
|
dataFormat: 'json',
|
|
dataSource: {
|
|
"chart": {
|
|
"caption": "First image is CORS and server-side export",
|
|
"subCaption": "Should send to server as svg with image links",
|
|
"xAxisName": "Managers",
|
|
"yAxisName": "Revenue (In USD)",
|
|
"numberPrefix": "$",
|
|
"theme": "fint",
|
|
"exportEnabled": "1",
|
|
"exportAtClient": "0",
|
|
"exportHandler": "x.com",
|
|
"LabelPadding": "50"
|
|
},
|
|
"annotations": {
|
|
"groups": [{
|
|
"id": "user-images",
|
|
"items": [{
|
|
"id": "jennifer-user-icon",
|
|
"type": "image",
|
|
"url": "http://static.fusioncharts.com/sampledata/images/round-1.png",
|
|
"x": "$xaxis.label.0.x - 24",
|
|
"y": "$xaxis.label.0.y - 48"
|
|
}, {
|
|
"id": "tom-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.1.x - 24",
|
|
"y": "$xaxis.label.1.y - 48"
|
|
}, {
|
|
"id": "Milton-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.2.x - 24",
|
|
"y": "$xaxis.label.2.y - 48"
|
|
}, {
|
|
"id": "Brian-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.3.x - 24",
|
|
"y": "$xaxis.label.3.y - 48"
|
|
}, {
|
|
"id": "Lynda-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.4.x - 24",
|
|
"y": "$xaxis.label.4.y - 48"
|
|
}]
|
|
}]
|
|
},
|
|
"data": [{
|
|
"label": "Jennifer",
|
|
"value": "92000"
|
|
}, {
|
|
"label": "Tom",
|
|
"value": "87000"
|
|
}, {
|
|
"label": "Milton",
|
|
"value": "83000"
|
|
}, {
|
|
"label": "Brian",
|
|
"value": "66000"
|
|
}, {
|
|
"label": "Lynda",
|
|
"value": "58000"
|
|
}]
|
|
}
|
|
}
|
|
);
|
|
fusioncharts.render();
|
|
|
|
var fusioncharts = new FusionCharts({
|
|
type: 'column2d',
|
|
renderAt: 'chart-container2',
|
|
width: '500',
|
|
height: '300',
|
|
dataFormat: 'json',
|
|
dataSource: {
|
|
"chart": {
|
|
"caption": "First image is CORS and no server-side",
|
|
"subCaption": "Export using front-end only with missing image",
|
|
"xAxisName": "Managers",
|
|
"yAxisName": "Revenue (In USD)",
|
|
"numberPrefix": "$",
|
|
"theme": "fint",
|
|
"exportEnabled": "1",
|
|
"exportAtClientSide": "1",
|
|
"LabelPadding": "50"
|
|
},
|
|
"annotations": {
|
|
"groups": [{
|
|
"id": "user-images",
|
|
"items": [{
|
|
"id": "jennifer-user-icon",
|
|
"type": "image",
|
|
"url": "http://static.fusioncharts.com/sampledata/images/round-2.png",
|
|
"x": "$xaxis.label.0.x - 24",
|
|
"y": "$xaxis.label.0.y - 48"
|
|
}, {
|
|
"id": "tom-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.1.x - 24",
|
|
"y": "$xaxis.label.1.y - 48"
|
|
}, {
|
|
"id": "Milton-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.2.x - 24",
|
|
"y": "$xaxis.label.2.y - 48"
|
|
}, {
|
|
"id": "Brian-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.3.x - 24",
|
|
"y": "$xaxis.label.3.y - 48"
|
|
}, {
|
|
"id": "Lynda-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.4.x - 24",
|
|
"y": "$xaxis.label.4.y - 48"
|
|
}]
|
|
}]
|
|
},
|
|
"data": [{
|
|
"label": "Jennifer",
|
|
"value": "92000"
|
|
}, {
|
|
"label": "Tom",
|
|
"value": "87000"
|
|
}, {
|
|
"label": "Milton",
|
|
"value": "83000"
|
|
}, {
|
|
"label": "Brian",
|
|
"value": "66000"
|
|
}, {
|
|
"label": "Lynda",
|
|
"value": "58000"
|
|
}]
|
|
}
|
|
}
|
|
);
|
|
fusioncharts.render();
|
|
|
|
|
|
var fusioncharts = new FusionCharts({
|
|
type: 'column2d',
|
|
renderAt: 'chart-container3',
|
|
width: '500',
|
|
height: '300',
|
|
dataFormat: 'json',
|
|
dataSource: {
|
|
"chart": {
|
|
"caption": "No CORS and no server-side",
|
|
"subCaption": "Export Image on frontend with all images",
|
|
"xAxisName": "Managers",
|
|
"yAxisName": "Revenue (In USD)",
|
|
"numberPrefix": "$",
|
|
"theme": "fint",
|
|
"exportEnabled": "1",
|
|
"exportAtClientSide": "1",
|
|
"LabelPadding": "50"
|
|
},
|
|
"annotations": {
|
|
"groups": [{
|
|
"id": "user-images",
|
|
"items": [{
|
|
"id": "jennifer-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.0.x - 24",
|
|
"y": "$xaxis.label.0.y - 48"
|
|
}, {
|
|
"id": "tom-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.1.x - 24",
|
|
"y": "$xaxis.label.1.y - 48"
|
|
}, {
|
|
"id": "Milton-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.2.x - 24",
|
|
"y": "$xaxis.label.2.y - 48"
|
|
}, {
|
|
"id": "Brian-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.3.x - 24",
|
|
"y": "$xaxis.label.3.y - 48"
|
|
}, {
|
|
"id": "Lynda-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.4.x - 24",
|
|
"y": "$xaxis.label.4.y - 48"
|
|
}]
|
|
}]
|
|
},
|
|
"data": [{
|
|
"label": "Jennifer",
|
|
"value": "92000"
|
|
}, {
|
|
"label": "Tom",
|
|
"value": "87000"
|
|
}, {
|
|
"label": "Milton",
|
|
"value": "83000"
|
|
}, {
|
|
"label": "Brian",
|
|
"value": "66000"
|
|
}, {
|
|
"label": "Lynda",
|
|
"value": "58000"
|
|
}]
|
|
}
|
|
}
|
|
);
|
|
fusioncharts.render();
|
|
|
|
|
|
var fusioncharts = new FusionCharts({
|
|
type: 'column2d',
|
|
renderAt: 'chart-container4',
|
|
width: '500',
|
|
height: '300',
|
|
dataFormat: 'json',
|
|
dataSource: {
|
|
"chart": {
|
|
"caption": "No CORS and uses server-side",
|
|
"subCaption": "Send to server as SVG for export",
|
|
"xAxisName": "Managers",
|
|
"yAxisName": "Revenue (In USD)",
|
|
"numberPrefix": "$",
|
|
"theme": "fint",
|
|
"exportEnabled": "1",
|
|
"exportAtClient": "0",
|
|
"exportHandler": "x.com",
|
|
"LabelPadding": "50"
|
|
},
|
|
"annotations": {
|
|
"groups": [{
|
|
"id": "user-images",
|
|
"items": [{
|
|
"id": "jennifer-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.0.x - 24",
|
|
"y": "$xaxis.label.0.y - 48"
|
|
}, {
|
|
"id": "tom-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.1.x - 24",
|
|
"y": "$xaxis.label.1.y - 48"
|
|
}, {
|
|
"id": "Milton-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.2.x - 24",
|
|
"y": "$xaxis.label.2.y - 48"
|
|
}, {
|
|
"id": "Brian-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.3.x - 24",
|
|
"y": "$xaxis.label.3.y - 48"
|
|
}, {
|
|
"id": "Lynda-user-icon",
|
|
"type": "image",
|
|
"url": "images/round-2.png",
|
|
"x": "$xaxis.label.4.x - 24",
|
|
"y": "$xaxis.label.4.y - 48"
|
|
}]
|
|
}]
|
|
},
|
|
"data": [{
|
|
"label": "Jennifer",
|
|
"value": "92000"
|
|
}, {
|
|
"label": "Tom",
|
|
"value": "87000"
|
|
}, {
|
|
"label": "Milton",
|
|
"value": "83000"
|
|
}, {
|
|
"label": "Brian",
|
|
"value": "66000"
|
|
}, {
|
|
"label": "Lynda",
|
|
"value": "58000"
|
|
}]
|
|
}
|
|
}
|
|
);
|
|
fusioncharts.render();
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="chart-container1">FusionCharts XT will load here!</div>
|
|
<div id="chart-container2">FusionCharts XT will load here!</div>
|
|
<div id="chart-container3">FusionCharts XT will load here!</div>
|
|
<div id="chart-container4">FusionCharts XT will load here!</div>
|
|
</body>
|
|
</html> |