API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 24th, 2014
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3. <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4. <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
  5. <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  6. <head>
  7. <meta charset="utf-8">
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9. <title> Sonera Dashboard - Google DoubleClick & Snoobi data </title>
  10. <meta name="description" content="">
  11. <meta name="viewport" content="width=device-width, initial-scale=1">
  12. <link rel="stylesheet" href="css/bootstrap.css">
  13. <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin-ext' rel='stylesheet' type='text/css'>
  14. <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
  15. <link rel="stylesheet" href="css/main.css">
  16.  
  17. <script src="js/vendor/jquery-1.11.0.min.js"> </script>
  18. <script src="amcharts/amcharts.js"></script>
  19. <script src="amcharts/lang/fi.js"></script>
  20. <script src="amcharts/pie.js" type="text/javascript"></script>
  21. <script src="amcharts/funnel.js" type="text/javascript"></script>
  22. <script src="amcharts/serial.js" type="text/javascript"></script>
  23.  
  24. <script src="js/vendor/bootstrap.js" type="text/javascript"></script>
  25.  
  26. <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
  27.  
  28.  
  29.  
  30. </head>
  31. <body>
  32. <header>
  33. <div class="col-md-6 col-sm-4">
  34. <a href="http://www.sonera.fi" target="_blank">
  35. <img src="img/soneralogo.jpg" alt="Sonera" />
  36. </a>
  37. </div>
  38. <div class="col-md-5 col-md-offset-1">
  39. <div class="row">
  40. <a class="nvgmain" href="index.html"> Gdc</a>
  41. <a class="nvgmain mainactive" href="snoobi.html"> Snoobi</a>
  42. </div>
  43. </div>
  44. <div clas="clearfix"> </div>
  45. </header>
  46.  
  47. <section>&nbsp; <br/>
  48. <h1> Google Double Click</h1>
  49. <h2> Yleiskatsaus<h2>
  50. <div class="row viiva">
  51. <div class="col-md-6">
  52. <div class="row" class="margin-left: 0; margin-right: 0;">
  53. <div class="col-md-5 nosto nosto1">
  54. <p> CTR <br/> <span> 0,75% </span> </p>
  55. </div>
  56. <div class="col-md-5 nosto nosto2">
  57. <p> Kampanjaa jäljellä <br/> <span> 17 päivää </span> </p>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="col-md-6">
  62. <div class="row" class="margin: 0;" >
  63. <div class="col-md-5 nosto nosto3">
  64. <p> Näyttöjä jäljellä <br/> <span> 748 920 </span> </p>
  65. </div>
  66. <div class="col-md-5 nosto nosto4">
  67. <p> Korkein CTR <br/> <span> OKL6: 0.82% </span> </p>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. </section>
  73.  
  74.  
  75.  
  76. <section class="seccont gdc3">
  77. <div class="row">
  78. <div class="col-md-6">&nbsp; <br/>
  79. <h2>Snoobi Customer Funnel</h2>
  80.  
  81. <div id="chartdivFunnel" style="width: 500px; height: 260px; "></div>
  82. </div>
  83.  
  84. <div class="col-md-6">
  85. <div id="chartdiv2" style="width:500px; height:400px;"> </div>
  86. </div>
  87. </div>
  88.  
  89.  
  90. <script type="text/javascript">
  91.  
  92.  
  93.  
  94.  
  95. var chartFunnel;
  96. var dataFunnel = [
  97. {
  98. "title": "Banner Clicks",
  99. "value": 286,
  100. "urli": "#hashtag1"
  101.  
  102. },
  103. {
  104. "title": "Not bounce",
  105. "value": 123,
  106. "urli": "#hashtag2"
  107. },
  108. {
  109. "title": "E-Commerce",
  110. "value": 48,
  111. "urli": "#hashtag3"
  112. },
  113. {
  114. "title": "Purchased",
  115. "value": 18,
  116. "urli": "#hashtag4"
  117. }
  118. ];
  119.  
  120. $("path").each(function(idx,el){
  121. $(el).attr("index",idx);
  122. })
  123.  
  124.  
  125. AmCharts.ready(function () {
  126. chartFunnel = new AmCharts.AmFunnelChart();
  127. chartFunnel.colors = ["#341645", "#7b5596", "#a688b7", "#ac939e", "#715464", "#000000"];
  128. chartFunnel.titleField = "title";
  129. chartFunnel.balloon.cornerRadius = 0;
  130. chartFunnel.marginRight = 220;
  131. chartFunnel.marginLeft = 25;
  132. chartFunnel.labelPosition = "right";
  133. chartFunnel.funnelAlpha = 0.9;
  134. chartFunnel.valueField = "value";
  135. chartFunnel.dataProvider = dataFunnel;
  136. chartFunnel.startX = 0;
  137. chartFunnel.balloon.animationTime = 0.2;
  138. chartFunnel.neckWidth = "40%"; // default: "40%"
  139. chartFunnel.startAlpha = 0;
  140. chartFunnel.neckHeight = "50%"; // default: "30%"
  141. chartFunnel.balloonText = "[[title]]:<b>[[value]]</b>";
  142. chartFunnel.pullOutOnlyOne = true;
  143. chartFunnel.urlField = "urli";
  144. chartFunnel.marginTop = 70;
  145. chartFunnel.marginBottom = 0;
  146.  
  147. chartFunnel.creditsPosition = "top-right";
  148. chartFunnel.write("chartdivFunnel");
  149.  
  150. // Vaihtaa barchartin contenttia hashin mukaan (määritä hash jsoniin urli-valueen)
  151. /*
  152. $(window).on('hashchange', function() {
  153. if (location.hash === "#hashtag1") {
  154. console.log("Hash1 Content")
  155. } else if (location.hash === "#hashtag2"){
  156. console.log("Hash2 Content")
  157. //chartok1.dataProvider = chartDataImp;
  158. //validateNow();
  159. } else if (location.hash === "#hashtag3"){
  160. console.log("Hash3 Content")
  161. } else if (location.hash === "#hashtag4"){
  162. console.log("Hash4 Content")
  163. } else {
  164. console.log("");
  165. }
  166. });
  167. */
  168.  
  169.  
  170.  
  171.  
  172.  
  173. // Vaihtaa barchartin datasetin defaultiksi kun clickataan slice epäaktiiviseksi
  174.  
  175.  
  176.  
  177.  
  178.  
  179. });
  180. </script>
  181.  
  182.  
  183. <script type="text/javascript">
  184. var chartokl1;
  185.  
  186. var chartDataDefault = [
  187. {
  188. "country": "OKL1",
  189. "visits": 4025
  190. },
  191. {
  192. "country": "OKL2",
  193. "visits": 1882
  194. },
  195. {
  196. "country": "OKL3",
  197. "visits": 1809
  198. },
  199. {
  200. "country": "OKL4",
  201. "visits": 1322
  202. },
  203. {
  204. "country": "OKL5",
  205. "visits": 1122
  206. },
  207. {
  208. "country": "OKL6",
  209. "visits": 1114
  210. },
  211. {
  212. "country": "OKL7",
  213. "visits": 1114
  214. },
  215. {
  216. "country": "OKL8",
  217. "visits": 984,
  218. }
  219. ];
  220.  
  221. var chartDataBanner = [
  222. {
  223. "country": "OKL1",
  224. "visits": 4025
  225. },
  226. {
  227. "country": "OKL2",
  228. "visits": 1882
  229. },
  230. {
  231. "country": "OKL3",
  232. "visits": 1809
  233. },
  234. {
  235. "country": "OKL4",
  236. "visits": 1322
  237. },
  238. {
  239. "country": "OKL5",
  240. "visits": 8122
  241. },
  242. {
  243. "country": "OKL6",
  244. "visits": 6114
  245. },
  246. {
  247. "country": "OKL7",
  248. "visits": 6114
  249. },
  250. {
  251. "country": "OKL8",
  252. "visits": 6984,
  253. }
  254. ];
  255.  
  256.  
  257. var chartDataNotBounce = [
  258. {
  259. "country": "OKL1",
  260. "visits": 101
  261. },
  262. {
  263. "country": "OKL2",
  264. "visits": 101
  265. },
  266. {
  267. "country": "OKL3",
  268. "visits": 101
  269. },
  270. {
  271. "country": "OKL4",
  272. "visits": 51
  273. },
  274. {
  275. "country": "OKL5",
  276. "visits": 151
  277. },
  278. {
  279. "country": "OKL6",
  280. "visits": 201
  281. },
  282. {
  283. "country": "OKL7",
  284. "visits": 5
  285. },
  286. {
  287. "country": "OKL8",
  288. "visits": 96,
  289. }
  290. ];
  291.  
  292. var chartDataEcommerce = [
  293. {
  294. "country": "OKL1",
  295. "visits": 11
  296. },
  297. {
  298. "country": "OKL2",
  299. "visits": 501
  300. },
  301. {
  302. "country": "OKL3",
  303. "visits": 101
  304. },
  305. {
  306. "country": "OKL4",
  307. "visits": 51
  308. },
  309. {
  310. "country": "OKL5",
  311. "visits": 551
  312. },
  313. {
  314. "country": "OKL6",
  315. "visits": 201
  316. },
  317. {
  318. "country": "OKL7",
  319. "visits": 5
  320. },
  321. {
  322. "country": "OKL8",
  323. "visits": 36,
  324. }
  325. ];
  326.  
  327. var chartDataPurchase = [
  328. {
  329. "country": "OKL1",
  330. "visits": 234
  331. },
  332. {
  333. "country": "OKL2",
  334. "visits": 423
  335. },
  336. {
  337. "country": "OKL3",
  338. "visits": 21
  339. },
  340. {
  341. "country": "OKL4",
  342. "visits": 51
  343. },
  344. {
  345. "country": "OKL5",
  346. "visits": 551
  347. },
  348. {
  349. "country": "OKL6",
  350. "visits": 432
  351. },
  352. {
  353. "country": "OKL7",
  354. "visits": 88
  355. },
  356. {
  357. "country": "OKL8",
  358. "visits": 36,
  359. }
  360. ];
  361.  
  362.  
  363. AmCharts.ready(function () {
  364. // SERIAL CHART
  365. chartokl1 = new AmCharts.AmSerialChart();
  366. chartokl1.dataProvider = chartDataBanner;
  367. chartokl1.categoryField = "country";
  368. chartokl1.startDuration = 0.5;
  369. chartokl1.columnWidth = 0.8;
  370. chartokl1.colors = ["#652d86", "#000000"];
  371. // AXES
  372. // category
  373. var categoryAxis = chartokl1.categoryAxis;
  374. categoryAxis.labelRotation = 90;
  375. categoryAxis.gridPosition = "start";
  376.  
  377. // value
  378. // in case you don't want to change default settings of value axis,
  379. // you don't need to create it, as one value axis is created automatically.
  380.  
  381. // GRAPH
  382. var graph = new AmCharts.AmGraph();
  383. graph.valueField = "visits";
  384. graph.balloonText = "[[category]]: <b>[[value]]</b>";
  385. graph.type = "column";
  386. graph.lineAlpha = 0;
  387. graph.fillAlphas = 0.8;
  388. chartokl1.addGraph(graph);
  389.  
  390. chartokl1.creditsPosition = "top-right";
  391.  
  392. chartokl1.write("chartdiv2");
  393.  
  394. var charts = {
  395. "BannerClicks": chartDataBanner,
  396. "Notbounce": chartDataNotBounce,
  397. "E-Commerce": chartDataEcommerce,
  398. "Purchased":chartDataPurchase
  399. };
  400.  
  401. chartFunnel.addListener("pullOutSlice", function(event){
  402. var provider = charts[event.dataItem.title.replace(/ /g,'')]
  403. changeDataProvider(chartokl1, provider);
  404.  
  405. });
  406.  
  407. chartFunnel.addListener("pullInSlice", function(event){
  408. changeDataProvider(chartokl1, chartDataDefault);
  409. });
  410.  
  411. function changeDataProvider(chart, provider) {
  412. chart.dataProvider = provider;
  413. chart.validateData();
  414. chart.animateAgain();
  415. }
  416.  
  417.  
  418.  
  419. });
  420.  
  421.  
  422.  
  423.  
  424.  
  425.  
  426.  
  427.  
  428. /*
  429. var clicked1 = false;
  430. var clicked2 = false;
  431. var clicked3 = false;
  432. $('#chartdivFunnel').on('click', function(event) {
  433. if ($(event.target).attr('index') == "1") {
  434. clicked1 =! clicked1;
  435. console.log("arvo:",clicked1);
  436. if (clicked1) {
  437. console.log("oikea")
  438. chartokl1.dataProvider = chartData;
  439. chartokl1.validateData();
  440. chartokl1.animateAgain();
  441. } else {
  442. console.log("default")
  443. chartokl1.dataProvider = chartDataClc2;
  444. chartokl1.validateData();
  445. chartokl1.animateAgain();
  446. }
  447.  
  448. } else if ($(event.target).attr('index') == "3") {
  449. clicked2 =! clicked2;
  450. if (clicked2) {
  451. chartokl1.dataProvider = chartDataImp;
  452. chartokl1.validateData();
  453. chartokl1.animateAgain();
  454. } else {
  455. console.log("default")
  456. chartokl1.dataProvider = chartDataClc2;
  457. chartokl1.validateData();
  458. chartokl1.animateAgain();
  459. }
  460.  
  461. } else if ($(event.target).attr('index') == "5") {
  462. clicked3 =! clicked3;
  463. console.log("asd5"); if (clicked2){
  464.  
  465. chartokl1.dataProvider = chartDataClc;
  466. chartokl1.validateData();
  467. chartokl1.animateAgain();
  468. }else {
  469. console.log("default")
  470. chartokl1.dataProvider = chartDataClc2;
  471. chartokl1.validateData();
  472. chartokl1.animateAgain();
  473. }
  474.  
  475. } else {
  476.  
  477. chartokl1.dataProvider = chartData;
  478. chartokl1.validateData();
  479. }
  480. })
  481. */
  482.  
  483.  
  484.  
  485. </script>
  486. </section>
  487.  
  488.  
  489. <footer>
  490. <a href="http://www.fonectaenterprise.fi" target="_blank"> <img src="img/feslogo.jpg" alt="Fonecta Enterprise Solutions" /> </a>
  491. </footer>
  492.  
  493.  
  494.  
  495.  
  496.  
  497. </body>
  498. </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!