• Edit
  • Download
    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingChart Demo: Financial Widget Dashboard</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background: #fff;
    11.     }
    12.  
    13.     #myChart {
    14.       margin: 10px 0 20px;
    15.       opacity: 0;
    16.       visibility: hidden;
    17.       transition: opacity .3s;
    18.     }
    19.  
    20.     #myChart.loaded {
    21.       opacity: 1;
    22.       visibility: visible;
    23.     }
    24.  
    25.     .zc-demo {
    26.       margin: 0 auto;
    27.       width: 100%;
    28.       max-width: 910px;
    29.     }
    30.  
    31.     .zc-favorites {
    32.       z-index: 100;
    33.       position: absolute;
    34.       top: 0;
    35.       left: 0;
    36.       box-shadow: 3px 3px 3px #333;
    37.     }
    38.  
    39.     .zc-favorites-wrap {
    40.       margin-top: 10px;
    41.       margin: 0 auto;
    42.       padding: 10px;
    43.       min-height: 120px;
    44.       background: #ebebeb;
    45.       border: 0;
    46.     }
    47.  
    48.     .zc-favorites-headline {
    49.       font-size: 13px;
    50.       display: block;
    51.       margin-bottom: 7px;
    52.     }
    53.  
    54.     .zc-favorites-db {
    55.       display: grid;
    56.       grid-template-columns: repeat(4, 1fr);
    57.       grid-column-gap: 10px;
    58.       grid-row-gap: 10px;
    59.     }
    60.  
    61.     .zc-favorites-fb-db {
    62.       float: left;
    63.     }
    64.  
    65.     .zc-ref {
    66.       display: none;
    67.     }
    68.   </style>
    69. </head>
    70.  
    71. <body class="zc-body">
    72.  
    73.   <div class="zc-demo">
    74.  
    75.     <div id="myChart">
    76.       <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    77.     </div>
    78.  
    79.     <div class="zc-favorites-wrap">
    80.       <strong class="zc-favorites-headline">Favorites (drag from above)</strong>
    81.       <div id="db" class="zc-favorites-db"></div>
    82.     </div>
    83.  
    84.   </div>
    85.  
    86.   <script>
    87.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Define Module Location
    88.     zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    89.  
    90.     // DEFINE DATA
    91.     // -----------------------------
    92.     // Data config
    93.     let chartData = {
    94.       type: 'null',
    95.       backgroundColor: '#ddd #eee',
    96.       height: '100%',
    97.       width: '100%',
    98.       widgets: [{
    99.           type: 'exchange',
    100.           rate: 'EUR/USD',
    101.           colors: [
    102.             ['#55154D', '#4E0E46'], '#fff', '#ccc'
    103.           ],
    104.           refresh: 500,
    105.           ticks: 100,
    106.           width: 450,
    107.           x: '10px',
    108.           y: '10px',
    109.         },
    110.         {
    111.           type: 'exchange',
    112.           rate: 'USD/CAD',
    113.           colors: [
    114.             ['#56000E', '#5F0017'], '#fff', '#ccc'
    115.           ],
    116.           x: '470px',
    117.           y: '10px',
    118.         },
    119.         {
    120.           type: 'exchange',
    121.           rate: 'USD/JPY',
    122.           colors: [
    123.             ['#014358', '#013D52'], '#fff', '#ccc'
    124.           ],
    125.           decimals: 2,
    126.           height: 200,
    127.           width: 200,
    128.           x: '700px',
    129.           y: '10px',
    130.         },
    131.         {
    132.           type: 'exchange',
    133.           rate: 'BTC/USD',
    134.           colors: [
    135.             ['#264031', '#243C2E'], '#fff', '#ccc'
    136.           ],
    137.           decimals: 2,
    138.           refresh: 200,
    139.           ticks: 60,
    140.           x: '10px',
    141.           y: '160px',
    142.         },
    143.         {
    144.           type: 'exchange',
    145.           rate: 'CRUDE OIL WTI',
    146.           colors: [
    147.             ['#264F14', '#244B13'], '#fff', '#ccc'
    148.           ],
    149.           decimals: 2,
    150.           x: '240px',
    151.           y: '160px',
    152.         },
    153.         {
    154.           type: 'exchange',
    155.           rate: 'GOLD',
    156.           colors: [
    157.             ['#704F00', '#6B4A00'], '#fff', '#ccc'
    158.           ],
    159.           decimals: 2,
    160.           height: 260,
    161.           refresh: 2000,
    162.           x: '470px',
    163.           y: '160px',
    164.         },
    165.         {
    166.           type: 'exchange',
    167.           rate: 'GBP/USD',
    168.           colors: [
    169.             ['#262400', '#242200'], '#fff', '#ccc'
    170.           ],
    171.           height: 110,
    172.           x: '10px',
    173.           y: '310px',
    174.         },
    175.         {
    176.           type: 'exchange',
    177.           rate: 'NZD/USD',
    178.           colors: [
    179.             ['#260031', '#24002E'], '#fff', '#ccc'
    180.           ],
    181.           height: 110,
    182.           x: '240px',
    183.           y: '310px',
    184.         },
    185.         {
    186.           type: 'exchange',
    187.           rate: 'USD/CHF',
    188.           colors: [
    189.             ['#363636', '#333333'], '#fff', '#ccc'
    190.           ],
    191.           height: 200,
    192.           width: 200,
    193.           x: '700px',
    194.           y: '220px',
    195.         },
    196.       ],
    197.     };
    198.     let chartDataFB = {
    199.       backgroundColor: '#ddd #eee',
    200.       type: 'null',
    201.       widgets: [],
    202.     };
    203.     let SEQ = 0;
    204.  
    205.     // Main chart render location
    206.     let chartId = 'myChart';
    207.  
    208.     // Favorites
    209.     let fbId = 'fb';
    210.  
    211.     // INIT
    212.     // -----------------------------
    213.     // Append Amazon Script
    214.     let aws = document.createElement('script');
    215.     aws.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets.js';
    216.     document.body.appendChild(aws);
    217.     aws.addEventListener('load', init);
    218.  
    219.     // Constantly fetch new data sets
    220.     window.fetchData = function(rate, callback) {
    221.       let oRefValues = {
    222.         'EUR/USD': 1.1143,
    223.         'USD/JPY': 120.88,
    224.         'USD/CAD': 1.2219,
    225.         'BTC/USD': 232.71,
    226.         'CRUDE OIL WTI': 58.59,
    227.         GOLD: 1208.21,
    228.         'GBP/USD': 1.552,
    229.         'NZD/USD': 0.7368,
    230.         'USD/CHF': 0.9364,
    231.       };
    232.       let fRefValue = oRefValues[rate],
    233.         fDiff = fRefValue / 100;
    234.       oRefValues[rate] = fRefValue + (-fDiff / 2 + fDiff * Math.random());
    235.       let json = {
    236.         rate: rate,
    237.         ts: 100 * Math.round(new Date().getTime() / 100),
    238.         value: oRefValues[rate],
    239.       };
    240.       callback.call(window, JSON.stringify(json));
    241.     };
    242.  
    243.     // LOAD EVENTS
    244.     // -----------------------------
    245.     // Run these after AWS script is init
    246.     function init() {
    247.       // Render the main demo
    248.       zingchart.render({
    249.         id: chartId,
    250.         width: '100%',
    251.         height: 430,
    252.         output: 'svg',
    253.         strictmode: true,
    254.         data: chartData,
    255.         events: {
    256.           load: loaded,
    257.         },
    258.       });
    259.  
    260.       // Bind 'mousedown' action when you click/drag a chart
    261.       zingchart.bind(chartId, 'mousedown', md);
    262.     }
    263.  
    264.     // CHART RENDERED
    265.     // -----------------------------
    266.     // Set CSS class to show chart after render
    267.     function loaded() {
    268.       let chart = document.querySelector('#' + chartId);
    269.       chart.classList.add('loaded');
    270.     }
    271.  
    272.     // DEFINE 'MOUSE DOWN' FUNCTION
    273.     // -----------------------------
    274.     function md(p) {
    275.       // Early Exit: Element is not a button
    276.       if (p.ev.button !== 0) return;
    277.       // Add data
    278.       let wdata = getData(p, chartData);
    279.       // Early Exit: No data found
    280.       if (!wdata) return;
    281.  
    282.       // Define data for 2nd location
    283.       chartDataFB.widgets = [wdata];
    284.       p.ev.preventDefault();
    285.  
    286.       // Add data to Favorites
    287.       let appendData =
    288.         '<div id="fb" class="zc-favorites" style="width:' +
    289.         wdata.width +
    290.         'px;height:' +
    291.         wdata.height +
    292.         'px;"></div>';
    293.       document.body.insertAdjacentHTML('beforeend', appendData);
    294.  
    295.       setTimeout(function() {
    296.         // Otherwise, create mouse functions and apply to the chart
    297.         // ---
    298.         // Get the Favorites DOM element
    299.         let fb = document.querySelector('#' + fbId);
    300.         // Early Exit: Not found
    301.         if (!fb) return;
    302.  
    303.         // Position element
    304.         fb.style.top = p.ev.clientY - wdata.height / 2 + 'px';
    305.         fb.style.left = p.ev.clientX - wdata.width / 2 + 'px';
    306.  
    307.         // Bind mouse movements
    308.         document.addEventListener('mousemove', mouseMove);
    309.         document.addEventListener('mouseup', mouseUp);
    310.  
    311.         // Render 2nd chart in 'Favorites' DOM element
    312.         zingchart.render({
    313.           id: fbId,
    314.           width: wdata.width,
    315.           height: wdata.height,
    316.           output: 'svg',
    317.           strictmode: true,
    318.           data: chartDataFB,
    319.         });
    320.       }, 0);
    321.  
    322.       // MOUSE FNS
    323.  
    324.       // Mousemove
    325.       function mouseMove(ev) {
    326.         ev.preventDefault();
    327.         let fb = document.querySelector('#' + fbId);
    328.         let doc = document.documentElement;
    329.         let body = document.body;
    330.         let offsetTop = doc.scrollTop ? doc.scrollTop : document.body.scrollTop;
    331.         fb.style.top = ev.clientY - wdata.height / 2 + offsetTop + 'px';
    332.         fb.style.left = ev.clientX - wdata.width / 2 + 'px';
    333.       }
    334.  
    335.       // Mouseup
    336.       function mouseUp(ev) {
    337.         let fb = document.querySelector('#' + fbId);
    338.         if (fb) {
    339.           let db = document.querySelector('#db');
    340.           let dbData = '<div id="fb' + SEQ + '" class="zc-favorites-fb-db"></div>';
    341.           db.insertAdjacentHTML('beforeend', dbData);
    342.           zingchart.render({
    343.             id: fbId + SEQ,
    344.             width: wdata.width,
    345.             height: wdata.height,
    346.             output: 'svg',
    347.             strictmode: true,
    348.             data: chartDataFB,
    349.           });
    350.           SEQ++;
    351.           fb.remove();
    352.           zingchart.exec(fbId, 'destroy');
    353.         }
    354.         document.removeEventListener('mousemove', mouseMove);
    355.         document.removeEventListener('mouseup', mouseUp);
    356.       }
    357.     }
    358.  
    359.     // DEFINE 'GET DATA' FUNCTION
    360.     // -----------------------------
    361.     // Get the data from the clicked item
    362.     function getData(p, data) {
    363.       if (!data) return;
    364.       let wdata;
    365.       for (let w = 0; w < data.widgets.length; w++) {
    366.         let rate = data.widgets[w].rate;
    367.         let id = p.id + '-graph-' + p.id + rate.replace(/[^a-zA-Z0-9]/g, '');
    368.         if (id === p.graphid) {
    369.           wdata = data.widgets[w];
    370.           wdata.x = 0;
    371.           wdata.y = 0;
    372.           wdata.width = 220;
    373.           wdata.height = 100;
    374.         }
    375.       }
    376.       return wdata;
    377.     }
    378.   </script>
    379. </body>
    380.  
    381. </html>
    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingChart Demo: Financial Widget Dashboard</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body class="zc-body">
    11.  
    12.   <div class="zc-demo">
    13.  
    14.     <div id="myChart">
    15.       <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    16.     </div>
    17.  
    18.     <div class="zc-favorites-wrap">
    19.       <strong class="zc-favorites-headline">Favorites (drag from above)</strong>
    20.       <div id="db" class="zc-favorites-db"></div>
    21.     </div>
    22.  
    23.   </div>
    24.  
    25. </body>
    26.  
    27. </html>
    1. .zc-body {
    2.   background: #fff;
    3. }
    4.  
    5. #myChart {
    6.   margin: 10px 0 20px;
    7.   opacity: 0;
    8.   visibility: hidden;
    9.   transition: opacity .3s;
    10. }
    11.  
    12. #myChart.loaded {
    13.   opacity: 1;
    14.   visibility: visible;
    15. }
    16.  
    17. .zc-demo {
    18.   margin: 0 auto;
    19.   width: 100%;
    20.   max-width: 910px;
    21. }
    22.  
    23. .zc-favorites {
    24.   z-index: 100;
    25.   position: absolute;
    26.   top: 0;
    27.   left: 0;
    28.   box-shadow: 3px 3px 3px #333;
    29. }
    30.  
    31. .zc-favorites-wrap {
    32.   margin-top: 10px;
    33.   margin: 0 auto;
    34.   padding: 10px;
    35.   min-height: 120px;
    36.   background: #ebebeb;
    37.   border: 0;
    38. }
    39.  
    40. .zc-favorites-headline {
    41.   font-size: 13px;
    42.   display: block;
    43.   margin-bottom: 7px;
    44. }
    45.  
    46. .zc-favorites-db {
    47.   display: grid;
    48.   grid-template-columns: repeat(4, 1fr);
    49.   grid-column-gap: 10px;
    50.   grid-row-gap: 10px;
    51. }
    52.  
    53. .zc-favorites-fb-db {
    54.   float: left;
    55. }
    56.  
    57. .zc-ref {
    58.   display: none;
    59. }
    1. // Define Module Location
    2. zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/';
    3.  
    4. // DEFINE DATA
    5. // -----------------------------
    6. // Data config
    7. let chartData = {
    8.   type: 'null',
    9.   backgroundColor: '#ddd #eee',
    10.   height: '100%',
    11.   width: '100%',
    12.   widgets: [{
    13.       type: 'exchange',
    14.       rate: 'EUR/USD',
    15.       colors: [
    16.         ['#55154D', '#4E0E46'], '#fff', '#ccc'
    17.       ],
    18.       refresh: 500,
    19.       ticks: 100,
    20.       width: 450,
    21.       x: '10px',
    22.       y: '10px',
    23.     },
    24.     {
    25.       type: 'exchange',
    26.       rate: 'USD/CAD',
    27.       colors: [
    28.         ['#56000E', '#5F0017'], '#fff', '#ccc'
    29.       ],
    30.       x: '470px',
    31.       y: '10px',
    32.     },
    33.     {
    34.       type: 'exchange',
    35.       rate: 'USD/JPY',
    36.       colors: [
    37.         ['#014358', '#013D52'], '#fff', '#ccc'
    38.       ],
    39.       decimals: 2,
    40.       height: 200,
    41.       width: 200,
    42.       x: '700px',
    43.       y: '10px',
    44.     },
    45.     {
    46.       type: 'exchange',
    47.       rate: 'BTC/USD',
    48.       colors: [
    49.         ['#264031', '#243C2E'], '#fff', '#ccc'
    50.       ],
    51.       decimals: 2,
    52.       refresh: 200,
    53.       ticks: 60,
    54.       x: '10px',
    55.       y: '160px',
    56.     },
    57.     {
    58.       type: 'exchange',
    59.       rate: 'CRUDE OIL WTI',
    60.       colors: [
    61.         ['#264F14', '#244B13'], '#fff', '#ccc'
    62.       ],
    63.       decimals: 2,
    64.       x: '240px',
    65.       y: '160px',
    66.     },
    67.     {
    68.       type: 'exchange',
    69.       rate: 'GOLD',
    70.       colors: [
    71.         ['#704F00', '#6B4A00'], '#fff', '#ccc'
    72.       ],
    73.       decimals: 2,
    74.       height: 260,
    75.       refresh: 2000,
    76.       x: '470px',
    77.       y: '160px',
    78.     },
    79.     {
    80.       type: 'exchange',
    81.       rate: 'GBP/USD',
    82.       colors: [
    83.         ['#262400', '#242200'], '#fff', '#ccc'
    84.       ],
    85.       height: 110,
    86.       x: '10px',
    87.       y: '310px',
    88.     },
    89.     {
    90.       type: 'exchange',
    91.       rate: 'NZD/USD',
    92.       colors: [
    93.         ['#260031', '#24002E'], '#fff', '#ccc'
    94.       ],
    95.       height: 110,
    96.       x: '240px',
    97.       y: '310px',
    98.     },
    99.     {
    100.       type: 'exchange',
    101.       rate: 'USD/CHF',
    102.       colors: [
    103.         ['#363636', '#333333'], '#fff', '#ccc'
    104.       ],
    105.       height: 200,
    106.       width: 200,
    107.       x: '700px',
    108.       y: '220px',
    109.     },
    110.   ],
    111. };
    112. let chartDataFB = {
    113.   backgroundColor: '#ddd #eee',
    114.   type: 'null',
    115.   widgets: [],
    116. };
    117. let SEQ = 0;
    118.  
    119. // Main chart render location
    120. let chartId = 'myChart';
    121.  
    122. // Favorites
    123. let fbId = 'fb';
    124.  
    125. // INIT
    126. // -----------------------------
    127. // Append Amazon Script
    128. let aws = document.createElement('script');
    129. aws.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/widgets.js';
    130. document.body.appendChild(aws);
    131. aws.addEventListener('load', init);
    132.  
    133. // Constantly fetch new data sets
    134. window.fetchData = function(rate, callback) {
    135.   let oRefValues = {
    136.     'EUR/USD': 1.1143,
    137.     'USD/JPY': 120.88,
    138.     'USD/CAD': 1.2219,
    139.     'BTC/USD': 232.71,
    140.     'CRUDE OIL WTI': 58.59,
    141.     GOLD: 1208.21,
    142.     'GBP/USD': 1.552,
    143.     'NZD/USD': 0.7368,
    144.     'USD/CHF': 0.9364,
    145.   };
    146.   let fRefValue = oRefValues[rate],
    147.     fDiff = fRefValue / 100;
    148.   oRefValues[rate] = fRefValue + (-fDiff / 2 + fDiff * Math.random());
    149.   let json = {
    150.     rate: rate,
    151.     ts: 100 * Math.round(new Date().getTime() / 100),
    152.     value: oRefValues[rate],
    153.   };
    154.   callback.call(window, JSON.stringify(json));
    155. };
    156.  
    157. // LOAD EVENTS
    158. // -----------------------------
    159. // Run these after AWS script is init
    160. function init() {
    161.   // Render the main demo
    162.   zingchart.render({
    163.     id: chartId,
    164.     width: '100%',
    165.     height: 430,
    166.     output: 'svg',
    167.     strictmode: true,
    168.     data: chartData,
    169.     events: {
    170.       load: loaded,
    171.     },
    172.   });
    173.  
    174.   // Bind 'mousedown' action when you click/drag a chart
    175.   zingchart.bind(chartId, 'mousedown', md);
    176. }
    177.  
    178. // CHART RENDERED
    179. // -----------------------------
    180. // Set CSS class to show chart after render
    181. function loaded() {
    182.   let chart = document.querySelector('#' + chartId);
    183.   chart.classList.add('loaded');
    184. }
    185.  
    186. // DEFINE 'MOUSE DOWN' FUNCTION
    187. // -----------------------------
    188. function md(p) {
    189.   // Early Exit: Element is not a button
    190.   if (p.ev.button !== 0) return;
    191.   // Add data
    192.   let wdata = getData(p, chartData);
    193.   // Early Exit: No data found
    194.   if (!wdata) return;
    195.  
    196.   // Define data for 2nd location
    197.   chartDataFB.widgets = [wdata];
    198.   p.ev.preventDefault();
    199.  
    200.   // Add data to Favorites
    201.   let appendData =
    202.     '<div id="fb" class="zc-favorites" style="width:' +
    203.     wdata.width +
    204.     'px;height:' +
    205.     wdata.height +
    206.     'px;"></div>';
    207.   document.body.insertAdjacentHTML('beforeend', appendData);
    208.  
    209.   setTimeout(function() {
    210.     // Otherwise, create mouse functions and apply to the chart
    211.     // ---
    212.     // Get the Favorites DOM element
    213.     let fb = document.querySelector('#' + fbId);
    214.     // Early Exit: Not found
    215.     if (!fb) return;
    216.  
    217.     // Position element
    218.     fb.style.top = p.ev.clientY - wdata.height / 2 + 'px';
    219.     fb.style.left = p.ev.clientX - wdata.width / 2 + 'px';
    220.  
    221.     // Bind mouse movements
    222.     document.addEventListener('mousemove', mouseMove);
    223.     document.addEventListener('mouseup', mouseUp);
    224.  
    225.     // Render 2nd chart in 'Favorites' DOM element
    226.     zingchart.render({
    227.       id: fbId,
    228.       width: wdata.width,
    229.       height: wdata.height,
    230.       output: 'svg',
    231.       strictmode: true,
    232.       data: chartDataFB,
    233.     });
    234.   }, 0);
    235.  
    236.   // MOUSE FNS
    237.  
    238.   // Mousemove
    239.   function mouseMove(ev) {
    240.     ev.preventDefault();
    241.     let fb = document.querySelector('#' + fbId);
    242.     let doc = document.documentElement;
    243.     let body = document.body;
    244.     let offsetTop = doc.scrollTop ? doc.scrollTop : document.body.scrollTop;
    245.     fb.style.top = ev.clientY - wdata.height / 2 + offsetTop + 'px';
    246.     fb.style.left = ev.clientX - wdata.width / 2 + 'px';
    247.   }
    248.  
    249.   // Mouseup
    250.   function mouseUp(ev) {
    251.     let fb = document.querySelector('#' + fbId);
    252.     if (fb) {
    253.       let db = document.querySelector('#db');
    254.       let dbData = '<div id="fb' + SEQ + '" class="zc-favorites-fb-db"></div>';
    255.       db.insertAdjacentHTML('beforeend', dbData);
    256.       zingchart.render({
    257.         id: fbId + SEQ,
    258.         width: wdata.width,
    259.         height: wdata.height,
    260.         output: 'svg',
    261.         strictmode: true,
    262.         data: chartDataFB,
    263.       });
    264.       SEQ++;
    265.       fb.remove();
    266.       zingchart.exec(fbId, 'destroy');
    267.     }
    268.     document.removeEventListener('mousemove', mouseMove);
    269.     document.removeEventListener('mouseup', mouseUp);
    270.   }
    271. }
    272.  
    273. // DEFINE 'GET DATA' FUNCTION
    274. // -----------------------------
    275. // Get the data from the clicked item
    276. function getData(p, data) {
    277.   if (!data) return;
    278.   let wdata;
    279.   for (let w = 0; w < data.widgets.length; w++) {
    280.     let rate = data.widgets[w].rate;
    281.     let id = p.id + '-graph-' + p.id + rate.replace(/[^a-zA-Z0-9]/g, '');
    282.     if (id === p.graphid) {
    283.       wdata = data.widgets[w];
    284.       wdata.x = 0;
    285.       wdata.y = 0;
    286.       wdata.width = 220;
    287.       wdata.height = 100;
    288.     }
    289.   }
    290.   return wdata;
    291. }