API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 2nd, 2016
104
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.96 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>ZC-PHP Demo</title>
  5. <script src="//cdn.zingchart.com/zingchart.min.js"></script>
  6.  
  7. </head>
  8. <body>
  9.  
  10. <h3>Simple Bar Chart (Database)</h3>
  11. <div id="myChart"></div>
  12.  
  13. <h3>Simple Area Chart (Hardcoded)</h3>
  14. <div id="myChart2"></div>
  15.  
  16. <h3>Decent Line Chart (Level 1 Functions)</h3>
  17. <div id="myChart3"></div>
  18.  
  19. <h3>Beautiful Chord Chart (Level 2 Function)</h3>
  20. <div id="myChart4"></div>
  21.  
  22. <h3>Powerfull Mixed Chart (Level 3 Function)</h3>
  23. <div id="myChart5"></div>
  24.  
  25. <?php
  26. include "zc.php";
  27.  
  28. // you can setup your own local MySQL database too. There is plenty of documentation online. Give it a try.
  29. $host = "127.0.0.1";
  30. $port = 8889;
  31. $username = "root";
  32. $password = "root";
  33. $db = "mydb";
  34.  
  35. $myQuery = "SELECT date, unitsSold FROM feed_data";
  36. $myQuery2 = "SELECT date, unitsSold AS 'Units', expected AS 'Expected', anotherMetric AS 'Competitor' FROM feed_data";
  37. $myQuery3 = "SELECT unitsSold AS 'Units', expected AS 'Expected', anotherMetric AS 'Competitor' FROM feed_data";
  38.  
  39. // ################################ CHART 1 ################################
  40.  
  41. // This chart will use data pulled from our database
  42. $zc = new ZC("myChart", "bar");
  43.  
  44. $zc->connect($host, $port, $username, $password, $db);
  45. $data = $zc->query($myQuery2, true);
  46. //$data = $zc->query($myQuery3, false);
  47. $zc->closeConnection();
  48.  
  49. $zc->setSeriesData($data);
  50. $zc->setSeriesText($zc->getFieldNames());
  51. $zc->render();
  52.  
  53.  
  54. // ################################ CHART 2 ################################
  55. // This chart will use data from our app
  56. $zc2 = new ZC("myChart2");// defaults to area type
  57.  
  58. $zc2->setSeriesData(0, [9,50,6,1,14,12]);
  59. $zc2->setSeriesData(1, [34,24,16,11,44,52]);
  60.  
  61. $zc2->render();
  62.  
  63.  
  64. // ################################ CHART 3 ################################
  65. // This chart will be built using only Level 1 functions.
  66. $zc3 = new ZC("myChart3");
  67.  
  68. // you can also set the data with an array of arrays
  69. $zc3->setSeriesData( [[9,50,6,1,14,12], [34,24,16,11,44,52], [10,9,8,7,6,5]] );
  70.  
  71. $zc3->setChartType("line");
  72. $zc3->setChartTheme("dark");
  73. $zc3->setChartWidth("50%");
  74. $zc3->setChartHeight("400");
  75.  
  76. $zc3->setTitle("Fruits Consumed");
  77. $zc3->setSubtitle("North America");
  78. $zc3->setLegendTitle("Fruits");
  79. $zc3->setScaleXTitle("Year");
  80. $zc3->setScaleYTitle("Bushels");
  81. $zc3->setSeriesText( array("Apples","Oranges","Bananas") );
  82. $zc3->setScaleXLabels( array("2011","2012","2013","2014","2015","2016") );
  83.  
  84. $zc3->render();
  85.  
  86.  
  87. // ################################ CHART 4 ################################
  88. // This chart will be built using the Level 2 function.
  89.  
  90. $seriesValues = array(
  91. array(35,42,67,89,35,42,67,89,35,42,67,89,35,42,67,0),
  92. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  93. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  94. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  95. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  96. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  97. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  98. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  99. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  100. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  101. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  102. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  103. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  104. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  105. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0),
  106. array(28,40,39,36,35,42,67,89,35,42,67,89,35,42,67,0)
  107. );
  108. $colorPalette = array(
  109. "#F44336","#E91E63","#9C27B0","#673AB7",
  110. "#3F51B5","#2196F3","#03A9F4","#00BCD4",
  111. "#009688","#4CAF50","#8BC34A","#CDDC39",
  112. "#FFEB3B","#FFC107","#FF9800","#FF5722"
  113. );
  114. $seriesText = array(
  115. "Major donors","New mixed giver","New COG","Active mixed giver",
  116. "Active COG","New cash","Lapsing COG active cash","Lapsing COG",
  117. "Active cash","Active action","Lapsed COG","Lapsed cash",
  118. "Lapsed action","Emailable","Other","New contact"
  119. );
  120.  
  121. $zc4 = new ZC("myChart4", "chord", "light", "800", "1000");// defaults to light theme
  122.  
  123. $zc4->setConfig("series", $seriesValues);
  124.  
  125. for ($i = 0; $i < count($seriesValues); $i++) {
  126. $seriesIndexValues = "series[$i].values";
  127. $seriesIndexText = "series[$i].text";
  128. $zc4->setConfig($seriesIndexValues, $seriesValues[$i]);
  129. $zc4->setConfig($seriesIndexText, $seriesText[$i]);
  130. }
  131.  
  132. $zc4->setConfig("options.angle-padding", 1);
  133. $zc4->setConfig("options.color-type", "palette");
  134. $zc4->setConfig("options.palette", $colorPalette);
  135.  
  136. $zc4->render();
  137.  
  138.  
  139. // ################################ CHART 5 ################################
  140. $myChartConfig = <<< EOT
  141. {
  142. "background-color":"#ecf2f6",
  143. "graphset":[
  144. {
  145. "type":"bar",
  146. "background-color":"#fff",
  147. "border-color":"#dae5ec",
  148. "border-width":"1px",
  149. "height":"30%",
  150. "width":"96%",
  151. "x":"2%",
  152. "y":"2%",
  153. "title":{
  154. "margin-top":"7px",
  155. "margin-left":"9px",
  156. "font-family":"Arial",
  157. "text":"DEPARTMENT PERFORMANCE",
  158. "background-color":"none",
  159. "shadow":0,
  160. "text-align":"left",
  161. "font-size":"11px",
  162. "font-weight":"bold",
  163. "font-color":"#707d94"
  164. },
  165. "scale-y":{
  166. "values":"0:300:100",
  167. "max-ticks":4,
  168. "max-items":4,
  169. "line-color":"none",
  170. "tick":{
  171. "visible":false
  172. },
  173. "item":{
  174. "font-color":"#8391a5",
  175. "font-family":"Arial",
  176. "font-size":"10px",
  177. "padding-right":"5px"
  178. },
  179. "guide":{
  180. "rules":[
  181. {
  182. "rule":"%i == 0",
  183. "line-width":0
  184. },
  185. {
  186. "rule":"%i > 0",
  187. "line-style":"solid",
  188. "line-width":"1px",
  189. "line-color":"#d2dae2",
  190. "alpha":0.4
  191. }
  192.  
  193. ]
  194. }
  195. },
  196. "scale-x":{
  197. "items-overlap":true,
  198. "max-items":9999,
  199. "values":["Apparel","Drug","Footwear","Gift Card","Home","Jewelry","Garden","Other"],
  200. "offset-y":"1px",
  201. "line-color":"#d2dae2",
  202. "item":{
  203. "font-color":"#8391a5",
  204. "font-family":"Arial",
  205. "font-size":"11px",
  206. "padding-top":"2px"
  207. },
  208. "tick":{
  209. "visible":false,
  210. "line-color":"#d2dae2"
  211. },
  212. "guide":{
  213. "visible":false
  214. }
  215. },
  216. "plotarea":{
  217. "margin":"45px 20px 38px 45px"
  218. },
  219. "plot":{
  220. "bar-width":"33px",
  221. "exact":true,
  222. "hover-state":{
  223. "visible":false
  224. },
  225. "animation":{
  226. "effect":"ANIMATION_SLIDE_BOTTOM"
  227. },
  228. "tooltip":{
  229. "font-color":"#fff",
  230. "font-family":"Arial",
  231. "font-size":"11px",
  232. "border-radius":"6px",
  233. "shadow":false,
  234. "padding":"5px 10px"
  235. }
  236. },
  237. "series":[
  238. {
  239. "values":[150,165,173,201,185,195,162,125],
  240. "styles":[
  241. {
  242. "background-color":"#4dbac0"
  243. },
  244. {
  245. "background-color":"#25a6f7"
  246. },
  247. {
  248. "background-color":"#ad6bae"
  249. },
  250. {
  251. "background-color":"#707d94"
  252. },
  253. {
  254. "background-color":"#f3950d"
  255. },
  256. {
  257. "background-color":"#e62163"
  258. },
  259. {
  260. "background-color":"#4e74c0"
  261. },
  262. {
  263. "background-color":"#9dc012"
  264. }
  265. ]
  266. }
  267. ]
  268. },
  269. {
  270. "type":"hbar",
  271. "background-color":"#fff",
  272. "border-color":"#dae5ec",
  273. "border-width":"1px",
  274. "x":"2%",
  275. "y":"35.2%",
  276. "height":"63%",
  277. "width":"30%",
  278. "title":{
  279. "margin-top":"7px",
  280. "margin-left":"9px",
  281. "text":"BRAND PERFORMANCE",
  282. "background-color":"none",
  283. "shadow":0,
  284. "text-align":"left",
  285. "font-family":"Arial",
  286. "font-size":"11px",
  287. "font-color":"#707d94"
  288. },
  289. "scale-y":{
  290. "line-color":"none",
  291. "tick":{
  292. "visible":false
  293. },
  294. "item":{
  295. "visible":false
  296. },
  297. "guide":{
  298. "visible":false
  299. }
  300. },
  301. "scale-x":{
  302. "values":["Kenmore","Craftsman","DieHard","Land's End","Laclyn Smith","Joe Boxer"],
  303. "line-color":"none",
  304. "tick":{
  305. "visible":false
  306. },
  307. "item":{
  308. "width":200,
  309. "text-align":"left",
  310. "offset-x":206,
  311. "offset-y":-12,
  312. "font-color":"#8391a5",
  313. "font-family":"Arial",
  314. "font-size":"11px",
  315. "padding-bottom":"8px"
  316. },
  317. "guide":{
  318. "visible":false
  319. }
  320. },
  321. "plot":{
  322. "bars-overlap":"100%",
  323. "bar-width":"12px",
  324. "thousands-separator":",",
  325. "tooltip":{
  326. "font-color":"#ffffff",
  327. "background-color":"#707e94",
  328. "font-family":"Arial",
  329. "font-size":"11px",
  330. "border-radius":"6px",
  331. "shadow":false,
  332. "padding":"5px 10px"
  333. },
  334. "hover-state":{
  335. "background-color":"#707e94"
  336. },
  337. "animation":{
  338. "effect":"ANIMATION_EXPAND_LEFT"
  339. }
  340. },
  341. "plotarea":{
  342. "margin":"50px 15px 10px 15px"
  343. },
  344. "series":[
  345. {
  346. "values":[103902,112352,121823,154092,182023,263523],
  347. "-animation":{
  348. "method":0,
  349. "effect":4,
  350. "speed":2000,
  351. "sequence":0
  352. },
  353. "z-index":2,
  354. "styles":[
  355. {
  356. "background-color":"#4dbac0"
  357. },
  358. {
  359. "background-color":"#4dbac0"
  360. },
  361. {
  362. "background-color":"#4dbac0"
  363. },
  364. {
  365. "background-color":"#4dbac0"
  366. },
  367. {
  368. "background-color":"#4dbac0"
  369. },
  370. {
  371. "background-color":"#4dbac0"
  372. }
  373. ],
  374. "tooltip-text":"$%node-value"
  375. },
  376. {
  377. "max-trackers":0,
  378. "values":[300000,300000,300000,300000,300000,300000],
  379. "data-rvalues":[103902,112352,121823,154092,182023,263523],
  380. "background-color":"#d9e4eb",
  381. "z-index":1,
  382. "value-box":{
  383. "visible":true,
  384. "offset-y":"-12px",
  385. "offset-x":"-54px",
  386. "text-align":"right",
  387. "font-color":"#8391a5",
  388. "font-family":"Arial",
  389. "font-size":"11px",
  390. "text":"$%data-rvalues",
  391. "padding-bottom":"8px"
  392. }
  393. }
  394. ]
  395. },
  396. {
  397. "type":"line",
  398. "background-color":"#fff",
  399. "border-color":"#dae5ec",
  400. "border-width":"1px",
  401. "width":"64%",
  402. "height":"63%",
  403. "x":"34%",
  404. "y":"35.2%",
  405. "title":{
  406. "margin-top":"7px",
  407. "margin-left":"12px",
  408. "text":"TODAY'S SALES",
  409. "background-color":"none",
  410. "shadow":0,
  411. "text-align":"left",
  412. "font-family":"Arial",
  413. "font-size":"11px",
  414. "font-color":"#707d94"
  415. },
  416. "plot":{
  417. "animation":{
  418. "effect":"ANIMATION_SLIDE_LEFT"
  419. }
  420. },
  421. "plotarea":{
  422. "margin":"50px 25px 70px 46px"
  423. },
  424. "scale-y":{
  425. "values":"0:100:25",
  426. "line-color":"none",
  427. "guide":{
  428. "line-style":"solid",
  429. "line-color":"#d2dae2",
  430. "line-width":"1px",
  431. "alpha":0.5
  432. },
  433. "tick":{
  434. "visible":false
  435. },
  436. "item":{
  437. "font-color":"#8391a5",
  438. "font-family":"Arial",
  439. "font-size":"10px",
  440. "padding-right":"5px"
  441. }
  442. },
  443. "scale-x":{
  444. "line-color":"#d2dae2",
  445. "line-width":"2px",
  446. "values":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
  447. "tick":{
  448. "line-color":"#d2dae2",
  449. "line-width":"1px"
  450. },
  451. "guide":{
  452. "visible":false
  453. },
  454. "item":{
  455. "font-color":"#8391a5",
  456. "font-family":"Arial",
  457. "font-size":"10px",
  458. "padding-top":"5px"
  459. }
  460. },
  461. "legend":{
  462. "layout":"x4",
  463. "background-color":"none",
  464. "shadow":0,
  465. "margin":"auto auto 15 auto",
  466. "border-width":0,
  467. "item":{
  468. "font-color":"#707d94",
  469. "font-family":"Arial",
  470. "padding":"0px",
  471. "margin":"0px",
  472. "font-size":"9px"
  473. },
  474. "marker":{
  475. "show-line":"true",
  476. "type":"match",
  477. "font-family":"Arial",
  478. "font-size":"10px",
  479. "size":4,
  480. "line-width":2,
  481. "padding":"3px"
  482. }
  483. },
  484. "crosshair-x":{
  485. "lineWidth":1,
  486. "line-color":"#707d94",
  487. "plotLabel":{
  488. "shadow":false,
  489. "font-color":"#000",
  490. "font-family":"Arial",
  491. "font-size":"10px",
  492. "padding":"5px 10px",
  493. "border-radius":"5px",
  494. "alpha":1
  495. },
  496. "scale-label":{
  497. "font-color":"#ffffff",
  498. "background-color":"#707d94",
  499. "font-family":"Arial",
  500. "font-size":"10px",
  501. "padding":"5px 10px",
  502. "border-radius":"5px"
  503. }
  504. },
  505. "tooltip":{
  506. "visible":false
  507. },
  508. "series":[
  509. {
  510. "values":[69,68,54,48,70,74,98,70,72,68,49,69],
  511. "text":"Kenmore",
  512. "line-color":"#4dbac0",
  513. "line-width":"2px",
  514. "shadow":0,
  515. "marker":{
  516. "background-color":"#fff",
  517. "size":3,
  518. "border-width":1,
  519. "border-color":"#36a2a8",
  520. "shadow":0
  521. },
  522. "palette":0
  523. },
  524. {
  525. "values":[51,53,47,60,48,52,75,52,55,47,60,48],
  526. "text":"Craftsman",
  527. "line-width":"2px",
  528. "line-color":"#25a6f7",
  529. "shadow":0,
  530. "marker":{
  531. "background-color":"#fff",
  532. "size":3,
  533. "border-width":1,
  534. "border-color":"#1993e0",
  535. "shadow":0
  536. },
  537. "palette":1,
  538. "visible":1
  539. },
  540. {
  541. "values":[42,43,30,50,31,48,55,46,48,32,50,38],
  542. "text":"DieHard",
  543. "line-color":"#ad6bae",
  544. "line-width":"2px",
  545. "shadow":0,
  546. "marker":{
  547. "background-color":"#fff",
  548. "size":3,
  549. "border-width":1,
  550. "border-color":"#975098",
  551. "shadow":0
  552. },
  553. "palette":2,
  554. "visible":1
  555. },
  556. {
  557. "values":[25,15,26,21,24,26,33,25,15,25,22,24],
  558. "text":"Land's End",
  559. "line-color":"#f3950d",
  560. "line-width":"2px",
  561. "shadow":0,
  562. "marker":{
  563. "background-color":"#fff",
  564. "size":3,
  565. "border-width":1,
  566. "border-color":"#d37e04",
  567. "shadow":0
  568. },
  569. "palette":3
  570. }
  571. ]
  572. }
  573. ]
  574. }
  575. EOT;
  576. // This chart will be built using the Level 3 function.
  577. $zc5 = new ZC("myChart5", "area", "classic", "100%", "500");
  578.  
  579. $zc5->trapdoor($myChartConfig);
  580. $zc5->render();
  581.  
  582. ?>
  583. </body>
  584. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!