Soonsu_chart.js.soonsu 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471
  1. function dataCharPicture()
  2. {
  3. var arArg = arguments;
  4. if (arArg.length <= 0)
  5. {
  6. return;
  7. }
  8. switch (arArg[0])
  9. {
  10. case "line":
  11. {
  12. dataCharPicture_line(arArg[1], arArg[3], arArg[4], arArg[5], arArg[6], arArg[7], arArg[2]);
  13. break;
  14. }
  15. case "column":
  16. {
  17. dataCharPicture_column(arArg[1], arArg[3], arArg[4], arArg[5], arArg[6], arArg[7], arArg[2]);
  18. break;
  19. }
  20. case "pie":
  21. {
  22. dataCharPicture_pie(arArg[1], arArg[3], arArg[4], arArg[5], arArg[6], arArg[7], arArg[2]);
  23. break;
  24. }
  25. }
  26. }
  27. function dataCharPicture_line()
  28. {
  29. var arArg = arguments;
  30. if (arArg.length <= 0)
  31. {
  32. return;
  33. }
  34. if (null != arArg[4] && null != arArg[5])
  35. {
  36. var heCont = document.getElementById("container");
  37. heCont.style.setWidth(parseInt(arArg[4]) + "px");
  38. heCont.style.setHeight(parseInt(arArg[5]) + "px");
  39. }
  40. var objPrint = arArg[0]?{}:{buttons : null};
  41. var strTitle = arArg[1];
  42. var arCategories = arArg[2].split("^");
  43. var arSeries = new Array();
  44. var arSeqData = arArg[3].split("|");
  45. var arStatus = new Array();
  46. for (var i=0; i<arSeqData.length; i++)
  47. {
  48. var arStrList = arSeqData[i].split("^");
  49. var strName = arStrList[0];
  50. var arData = new Array();
  51. for (var j=1; j<arStrList.length; j++)
  52. {
  53. if ("" == arStrList[j])
  54. {
  55. arData.push(null);
  56. }
  57. else
  58. {
  59. if (isNaN(parseFloat(arStrList[j])))
  60. {
  61. arData.push(null);
  62. }
  63. else
  64. {
  65. arData.push(parseFloat(arStrList[j]));
  66. arStatus[j-1] = true;
  67. }
  68. }
  69. }
  70. arSeries.push({
  71. name: strName,
  72. data: arData
  73. });
  74. }
  75. var nDataLength = arCategories.length;
  76. var ntempCnt = 0;
  77. for (var i=0; i<nDataLength; i++)
  78. {
  79. if (!arStatus[i])
  80. {
  81. arCategories.splice(ntempCnt,1);
  82. for (var j=0; j<arSeries.length; j++)
  83. {
  84. arSeries[j].data.splice(ntempCnt,1);
  85. }
  86. }
  87. else
  88. {
  89. ntempCnt++;
  90. }
  91. }
  92. $(document).ready(function() {
  93. chart = new Highcharts.Chart({
  94. chart: {
  95. renderTo: 'container',
  96. defaultSeriesType: 'line',
  97. marginRight: 130,
  98. marginBottom: 25
  99. },
  100. credits: {
  101. enabled: false
  102. },
  103. exporting:objPrint,
  104. title: {
  105. text: arArg[6],
  106. x: -20
  107. },
  108. subtitle: {
  109. text: '',
  110. x: -20
  111. },
  112. xAxis: {
  113. categories: arCategories
  114. },
  115. yAxis: {
  116. title: {
  117. text: strTitle
  118. },
  119. plotLines: [{
  120. value: 0,
  121. width: 1,
  122. color: '#808080'
  123. }]
  124. },
  125. tooltip: {
  126. formatter: function() {
  127. return '<b>'+ this.series.name +'</b><br/>'+
  128. this.x +': '+ this.y ;
  129. }
  130. },
  131. legend: {
  132. layout: 'vertical',
  133. align: 'right',
  134. verticalAlign: 'top',
  135. x: -10,
  136. y: 100,
  137. borderWidth: 0
  138. },
  139. series: arSeries
  140. });
  141. });
  142. }
  143. function dataCharPicture_column()
  144. {
  145. var arArg = arguments;
  146. if (arArg.length <= 0)
  147. {
  148. return;
  149. }
  150. if (null != arArg[4] && null != arArg[5])
  151. {
  152. var heCont = document.getElementById("container");
  153. heCont.style.setWidth(parseInt(arArg[4]) + "px");
  154. heCont.style.setHeight(parseInt(arArg[5]) + "px");
  155. }
  156. var objPrint = arArg[0]?{}:{buttons : null};
  157. var strTitle = arArg[1];
  158. var heTable = document.getElementById("datatable");
  159. document.body.removeChild(heTable);
  160. heTable = document.createElement("table");
  161. var heHead = document.createElement("thead");
  162. var heBody = document.createElement("tbody");
  163. heTable.id = "datatable";
  164. heTable.style.display = "none";
  165. heTable.appendChild(heHead);
  166. heTable.appendChild(heBody);
  167. for (var i=2; i<4; i++)
  168. {
  169. if (2 == i)
  170. {
  171. var arData = arArg[i].split("^");
  172. var heTr = document.createElement("tr");
  173. heHead.appendChild(heTr);
  174. heTr.appendChild(document.createElement("th"));
  175. for (var j=0; j<arData.length; j++)
  176. {
  177. var heTh = document.createElement("th");
  178. heTh.innerHTML = arData[j];
  179. heTr.appendChild(heTh);
  180. }
  181. }
  182. else
  183. {
  184. var arSeqData = arArg[i].split("|");
  185. for (var k=0; k<arSeqData.length; k++)
  186. {
  187. var arData = arSeqData[k].split("^");
  188. var heTr = document.createElement("tr");
  189. heBody.appendChild(heTr);
  190. for (var j=0; j<arData.length; j++)
  191. {
  192. if (0 == j)
  193. {
  194. var heTh = document.createElement("th");
  195. heTh.innerHTML = arData[j];
  196. heTr.appendChild(heTh);
  197. }
  198. else
  199. {
  200. var heTd = document.createElement("td");
  201. heTd.innerHTML = arData[j];
  202. heTr.appendChild(heTd);
  203. }
  204. }
  205. }
  206. }
  207. }
  208. document.body.appendChild(heTable);
  209. $(document).ready(function() {
  210. var table = document.getElementById('datatable'),
  211. options = {
  212. chart: {
  213. renderTo: 'container',
  214. defaultSeriesType: 'column'
  215. },
  216. credits: {
  217. enabled: false
  218. },
  219. exporting:objPrint,
  220. title: {
  221. text: arArg[6]
  222. },
  223. xAxis: {
  224. },
  225. yAxis: {
  226. title: {
  227. text: strTitle
  228. }
  229. },
  230. tooltip: {
  231. formatter: function() {
  232. return '<b>'+ this.series.name +'</b><br/>'+
  233. this.x.toLowerCase() + ':' + this.y ;
  234. }
  235. }
  236. };
  237. Highcharts.visualize(table, options);
  238. });
  239. }
  240. function dataCharPicture_pie()
  241. {
  242. var arArg = arguments;
  243. if (arArg.length <= 0)
  244. {
  245. return;
  246. }
  247. if (null != arArg[4] && null != arArg[5])
  248. {
  249. var heCont = document.getElementById("container");
  250. heCont.style.setWidth(parseInt(arArg[4]) + "px");
  251. heCont.style.setHeight(parseInt(arArg[5]) + "px");
  252. }
  253. var objPrint = arArg[0]?{}:{buttons : null};
  254. var strTitle = arArg[1];
  255. var arCategories = arArg[2].split("^");
  256. var arSeries = new Array();
  257. var arSeqData = arArg[3].split("|");
  258. var arDataMatrix = new Array();
  259. for (var i=0; i<arSeqData.length; i++)
  260. {
  261. var arStrList = arSeqData[i].split("^");
  262. arDataMatrix.push(arStrList);
  263. }
  264. var arData = new Array();
  265. for (var i=0; i<arCategories.length; i++)
  266. {
  267. var arPieData = new Array();
  268. var nTotal = 0;
  269. for (var j=0; j<arSeqData.length; j++)
  270. {
  271. nTotal += parseFloat(arDataMatrix[j][i+1]);
  272. }
  273. if (0 == i)
  274. {
  275. arData.push({
  276. name : arCategories[i],
  277. y : nTotal,
  278. sliced: true,
  279. selected: true
  280. }
  281. );
  282. }
  283. else
  284. {
  285. arPieData.push(arCategories[i]);
  286. arPieData.push(nTotal);
  287. arData.push(arPieData);
  288. }
  289. }
  290. arSeries.push({
  291. type: 'pie',
  292. name: strTitle,
  293. data: arData
  294. });
  295. $(document).ready(function() {
  296. chart = new Highcharts.Chart({
  297. chart: {
  298. renderTo: 'container',
  299. plotBackgroundColor: null,
  300. plotBorderWidth: null,
  301. plotShadow: false
  302. },
  303. credits: {
  304. enabled: false
  305. },
  306. exporting:objPrint,
  307. title: {
  308. text: arArg[6]
  309. },
  310. plotOptions: {
  311. pie: {
  312. allowPointSelect: true,
  313. cursor: 'pointer',
  314. dataLabels: {
  315. enabled: true,
  316. color: '#000000',
  317. connectorColor: '#000000',
  318. formatter: function() {
  319. return '<b>'+ this.point.name +'</b>: '+ this.y ;
  320. }
  321. }
  322. }
  323. },
  324. series:arSeries,
  325. tooltip: {
  326. formatter: function() {
  327. return '<b>'+ this.point.name +'</b>: '+ this.y ;
  328. }
  329. }
  330. });
  331. });
  332. }
  333. function dataCharPicture_combo()
  334. {
  335. var arArg = arguments;
  336. if (arArg.length <= 0)
  337. {
  338. return;
  339. }
  340. var objPrint = arArg[0]?{}:{buttons : null};
  341. var strTitle = arArg[1];
  342. var arCategories = arArg[2].split("^");
  343. var arSeries = new Array();
  344. var arSeqData = arArg[3].split("|");
  345. var arDataMatrix = new Array();
  346. for (var i=0; i<arSeqData.length; i++)
  347. {
  348. var arStrList = arSeqData[i].split("^");
  349. arDataMatrix.push(arStrList);
  350. }
  351. var arData = new Array();
  352. for (var i=0; i<arCategories.length; i++)
  353. {
  354. var arPieData = new Array();
  355. var nTotal = 0;
  356. for (var j=0; j<arSeqData.length; j++)
  357. {
  358. nTotal += parseInt(arDataMatrix[j][i+1]);
  359. }
  360. if (0 == i)
  361. {
  362. arData.push({
  363. name : arCategories[i],
  364. y : nTotal,
  365. sliced: true,
  366. selected: true
  367. }
  368. );
  369. }
  370. else
  371. {
  372. arPieData.push(arCategories[i]);
  373. arPieData.push(nTotal);
  374. arData.push(arPieData);
  375. }
  376. }
  377. arSeries.push({
  378. type: 'pie',
  379. name: strTitle,
  380. data: arData
  381. });
  382. $(document).ready(function() {
  383. chart = new Highcharts.Chart({
  384. chart: {
  385. renderTo: 'container'
  386. },
  387. title: {
  388. text: 'Combination chart'
  389. },
  390. xAxis: {
  391. categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
  392. },
  393. tooltip: {
  394. formatter: function() {
  395. var s;
  396. if (this.point.name) {
  397. s = ''+
  398. this.point.name +': '+ this.y +' fruits';
  399. } else {
  400. s = ''+
  401. this.x +': '+ this.y;
  402. }
  403. return s;
  404. }
  405. },
  406. labels: {
  407. items: [{
  408. html: 'Total fruit consumption',
  409. style: {
  410. left: '40px',
  411. top: '8px',
  412. color: 'black'
  413. }
  414. }]
  415. },
  416. series: [{
  417. type: 'column',
  418. name: 'Jane',
  419. data: [3, 2, 1, 3, 4]
  420. }, {
  421. type: 'column',
  422. name: 'John',
  423. data: [2, 3, 5, 7, 6]
  424. }, {
  425. type: 'column',
  426. name: 'Joe',
  427. data: [4, 3, 3, 9, 0]
  428. }, {
  429. type: 'spline',
  430. name: 'Average',
  431. data: [3, 2.67, 3, 6.33, 3.33]
  432. }, {
  433. type: 'pie',
  434. name: 'Total consumption',
  435. data: [{
  436. name: 'Jane',
  437. y: 13,
  438. color: '#4572A7'
  439. }, {
  440. name: 'John',
  441. y: 23,
  442. color: '#AA4643'
  443. }, {
  444. name: 'Joe',
  445. y: 19,
  446. color: '#89A54E'
  447. }],
  448. center: [100, 80],
  449. size: 100,
  450. showInLegend: false,
  451. dataLabels: {
  452. enabled: false
  453. }
  454. }]
  455. });
  456. });
  457. }