Chart/chart_example.html at master · LarsCJensen/Chart · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE HTML>
<html>

<head>
<script type="text/javascript">
// window.onload = function () {
// 	var chart = new CanvasJS.Chart("chartContainer",
// 	{
// 		title:{
// 			text: "Desktop Search Engine Market Share, Dec-2012"
// 		},
//                 animationEnabled: true,
// 		legend:{
// 			verticalAlign: "center",
// 			horizontalAlign: "left",
// 			fontSize: 20,
// 			fontFamily: "Helvetica"
// 		},
// 		theme: "theme2",
// 		data: [
// 		{
// 			type: "pie",
// 			indexLabelFontFamily: "Garamond",
// 			indexLabelFontSize: 20,
// 			indexLabel: "{label} {y}%",
// 			startAngle:-20,
// 			showInLegend: true,
// 			toolTipContent:"{legendText} {y}%",
// 			dataPoints: [
// 				{  y: 83.24, legendText:"Google", label: "Google" },
// 				{  y: 8.16, legendText:"Yahoo!", label: "Yahoo!" },
// 				{  y: 4.67, legendText:"Bing", label: "Bing" },
// 				{  y: 1.67, legendText:"Baidu" , label: "Baidu"},
// 				{  y: 0.98, legendText:"Others" , label: "Others"}
// 			]
// 		}
// 		]
// 	});
// 	chart.render();
// }
$("#createChart").click(function(){
	getData(function (data){

		var chart = new CanvasJS.Chart("chartContainer",
		{
			title:{
				text: "Helpdesk statistics"
			},
	                animationEnabled: true,
			legend:{
				verticalAlign: "center",
				horizontalAlign: "left",
				fontSize: 20,
				fontFamily: "Helvetica"
			},
			theme: "theme2",
			data: [
			{
				type: "pie",
				indexLabelFontFamily: "Garamond",
				indexLabelFontSize: 20,
				indexLabel: "{label} {y}%",
				startAngle:-20,
				showInLegend: true,
				toolTipContent:"{legendText} {y}%",
				dataPoints: [
					{  y: 83.24, legendText:"Google", label: "Google" },
					{  y: 8.16, legendText:"Yahoo!", label: "Yahoo!" },
					{  y: 4.67, legendText:"Bing", label: "Bing" },
					{  y: 1.67, legendText:"Baidu" , label: "Baidu"},
					{  y: 0.98, legendText:"Others" , label: "Others"}
				]
			}
			]
		});
		chart.render();
	});
	function getData(callback){
		$.ajax({
            type: 'GET',
            url: 'https://localhost/custom_endpoint/addon-helpdesk-statistics/sosstats/',
            dataType: 'JSON',
            success: function (data) {
                callback(data);
                jsonGottenCallback(jsonObj);
            },
            error: function (response) {
                myErrorhandler.logError(response.responseText);
            }
        });
	}

</script>
<script type="text/javascript" src="lib/canvasjs.min.js"></script>
</head>
<body>
	<div id="chartContainer" style="height: 300px; width: 100%;"></div>
	<input type="button" id="createChart" value="test">
</body>


</html>