• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.   </style>
    24. </head>
    25.  
    26. <body>
    27.   <div id="myChart"></div>
    28.   <script>
    29.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    30.     var barConfig = { // initial chart config
    31.       type: 'bar',
    32.       title: {
    33.         text: 'Top Stocks Portfolio'
    34.       },
    35.       plot: {
    36.         cursor: 'pointer',
    37.         valueBox: {
    38.           text: '%t'
    39.         }
    40.       },
    41.       scaleX: {
    42.         label: {
    43.           text: 'Company Price Point'
    44.         },
    45.         item: {
    46.           visible: false
    47.         }
    48.       },
    49.       series: [{
    50.           id: 'MSFT',
    51.           text: 'MSFT',
    52.           dataDescription: 'Microsoft Corporation',
    53.           values: [61.25],
    54.           dataUrl: 'https://cdn.zingchart.com/datasets/msft-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    55.         },
    56.         {
    57.           id: 'NKE',
    58.           text: 'NKE',
    59.           dataDescription: 'Nike',
    60.           values: [58.25],
    61.           dataUrl: 'https://cdn.zingchart.com/datasets/nke-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    62.         },
    63.         {
    64.           id: 'AAPL',
    65.           text: 'AAPL',
    66.           dataDescription: 'Apple Inc',
    67.           values: [148.25],
    68.           dataUrl: 'https://cdn.zingchart.com/datasets/aapl-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    69.         },
    70.         {
    71.           id: 'INTC',
    72.           text: 'INTC',
    73.           dataDescription: 'Intel Corporation',
    74.           values: [44.55],
    75.           dataUrl: 'https://cdn.zingchart.com/datasets/intc-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    76.         },
    77.         {
    78.           id: 'MMM',
    79.           text: 'MMM',
    80.           dataDescription: '3M Company',
    81.           values: [230.23],
    82.           dataUrl: 'https://cdn.zingchart.com/datasets/mmm-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    83.         },
    84.         {
    85.           id: 'MCD',
    86.           text: 'MCD',
    87.           dataDescription: 'Macdonalds',
    88.           values: [165.23],
    89.           dataUrl: 'https://cdn.zingchart.com/datasets/mcd-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    90.         },
    91.         {
    92.           id: 'DIS',
    93.           text: 'DIS',
    94.           dataDescription: 'DIS Corporation',
    95.           values: [107.67],
    96.           dataUrl: 'https://cdn.zingchart.com/datasets/dis-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    97.         },
    98.       ]
    99.     };
    100.  
    101.     var drilldownConfig = { // second config for the drilldown
    102.       type: 'line',
    103.       utc: true,
    104.       globals: {
    105.         thousandsSeparator: ','
    106.       },
    107.       title: {
    108.         text: 'Title Is N/A',
    109.         adjustLayout: true
    110.       },
    111.       plot: {
    112.         maxTrackers: 0,
    113.         maxNodes: 0,
    114.         exact: true
    115.       },
    116.       plotarea: {
    117.         margin: 'dynamic',
    118.         adjustLayout: true
    119.       },
    120.       legend: {
    121.         toggleAction: 'hide',
    122.         adjustLayout: true
    123.       },
    124.       scaleX: {
    125.         zooming: true,
    126.         transform: {
    127.           type: 'date',
    128.           all: "%Y/%m/%d"
    129.         }
    130.       },
    131.       scaleY: {
    132.  
    133.       },
    134.       scaleY2: {
    135.         short: true,
    136.         shortUnit: 'M',
    137.         guide: {
    138.           visible: false
    139.         }
    140.       },
    141.       preview: {
    142.         adjustLayout: true
    143.       },
    144.       crosshairX: {
    145.         plotLabel: {
    146.           fontSize: 14,
    147.           borderRadius: 5,
    148.           shadow: 1,
    149.           headerText: '%kv <br><hr>',
    150.           decimals: 2
    151.         }
    152.       },
    153.       scrollX: {},
    154.       series: [],
    155.       labels: [{
    156.         flat: false, // most important. Makes label register click event
    157.         text: 'Go Back',
    158.         backgroundColor: '#C4C4C4',
    159.         borderRadius: 5,
    160.         x: 45,
    161.         y: 15,
    162.         id: 'backwards',
    163.         cursor: 'hand',
    164.         padding: 5,
    165.         hoverState: {
    166.           backgroundColor: '#e0e0e0'
    167.         }
    168.       }]
    169.     };
    170.  
    171.     zingchart.render({
    172.       id: 'myChart',
    173.       data: barConfig,
    174.       height: '100%',
    175.       width: '100%'
    176.     });
    177.  
    178.     var oDataStructure = {}; // local variable cache
    179.  
    180.     /*
    181.      * Retrieve the data. It will be in specific format that can be viewed in the
    182.      * dataUrl property. We initally want to only show the first 4 plots and users can
    183.      * toggle the rest on after load.
    184.      *
    185.      * Real url example: demos.zingchart.com/view/NKVZRE4U/google.json
    186.      */
    187.     function sortAndBindData(aColumnNames, aData, sPlotId) {
    188.  
    189.       /*
    190.        * assign series attributes.
    191.        * end result is an array of objects.
    192.        * [{
    193.        *   values:[],
    194.        *   id: '',
    195.        *   text: '',
    196.        *   visible: true || false,
    197.        *   scales: 'scale-x,scale-y' || 'scale-x,scale-y-2',
    198.        *   short: false || true
    199.        *   shortUnit: 'M' || ''
    200.        * }]
    201.        */
    202.       for (var i = 1, j = 0; i < aColumnNames.length; i++, j++) {
    203.         oDataStructure[sPlotId].series[j] = {}; // create series object
    204.         oDataStructure[sPlotId].series[j].values = [];
    205.         oDataStructure[sPlotId].series[j].id = aColumnNames[i];
    206.         oDataStructure[sPlotId].series[j].text = aColumnNames[i];
    207.         oDataStructure[sPlotId].series[j].visible = true;
    208.         oDataStructure[sPlotId].series[j].scales = aColumnNames[i].includes('Volume') ? 'scale-x, scale-y-2' : 'scale-x, scale-y';
    209.         oDataStructure[sPlotId].series[j].short = aColumnNames[i].includes('Volume') ? 'true' : 'false';
    210.         oDataStructure[sPlotId].series[j].shortUnit = 'M';
    211.       }
    212.  
    213.       /* 
    214.        * force assign all values in one pass. This is the format expected from the xhr request
    215.        * ["Date","Open","High","Low","Close","Volume","Ex-Dividend","Split Ratio","Adj. Open","Adj. High","Adj. Low","Adj. Close","Adj. Volume"]
    216.        *
    217.        * aData[i][1] will access "Open" value
    218.        */
    219.       for (var i = aData.length - 1; i >= 0; i--) {
    220.         oDataStructure[sPlotId].series[0].values.push(aData[i][1]);
    221.         oDataStructure[sPlotId].series[1].values.push(aData[i][2]);
    222.         oDataStructure[sPlotId].series[2].values.push(aData[i][3]);
    223.         oDataStructure[sPlotId].series[3].values.push(aData[i][4]);
    224.         oDataStructure[sPlotId].series[4].values.push(aData[i][5]);
    225.         oDataStructure[sPlotId].series[5].values.push(aData[i][6]);
    226.         oDataStructure[sPlotId].series[6].values.push(aData[i][7]);
    227.         oDataStructure[sPlotId].series[7].values.push(aData[i][8]);
    228.         oDataStructure[sPlotId].series[8].values.push(aData[i][9]);
    229.         oDataStructure[sPlotId].series[9].values.push(aData[i][10]);
    230.         oDataStructure[sPlotId].series[10].values.push(aData[i][11]);
    231.         oDataStructure[sPlotId].series[11].values.push(aData[i][12]);
    232.       }
    233.  
    234.       // this will assign all the data to the chart at once
    235.       zingchart.exec('myChart', 'setdata', {
    236.         data: oDataStructure[sPlotId]
    237.       });
    238.     }
    239.  
    240.     /*
    241.      * Set up the config that is going to be drilled into.
    242.      */
    243.     function renderStockDataFromQuandl(sUrl, sDescription, sPlotId) {
    244.       fetch(sUrl)
    245.         .then(req => {
    246.           return req.json()
    247.         })
    248.         .then(data => {
    249.           var aColumnNames = data.dataset['column_names'];
    250.           var aData = data.dataset.data;
    251.           oDataStructure[sPlotId] = JSON.parse(JSON.stringify(drilldownConfig));
    252.           //oDataStructure[sPlotId].scaleX.minValue = Date.parse(data.dataset['start_date']);
    253.           //oDataStructure[sPlotId].scaleX.maxValue = Date.parse(data.dataset['end_date']);
    254.           oDataStructure[sPlotId].title.text = sDescription + ' Stock Data';
    255.           sortAndBindData(aColumnNames, aData, sPlotId);
    256.         });
    257.     }
    258.  
    259.     /*
    260.      * This evnet handler will either retrieve stock data from AJAX
    261.      * or retrieve the structure from our local variable cache
    262.      */
    263.     function plotClickHandler(e) {
    264.       if (e.xdata['url']) {
    265.         if (!oDataStructure[e.plotid]) { // if doesn't exist in cache. Go get it
    266.           oDataStructure[e.plotid] = {};
    267.           renderStockDataFromQuandl(e.xdata['url'], e.xdata['description'], e.plotid);
    268.         } else { // we already have the data. Render it
    269.           zingchart.exec('myChart', 'setdata', {
    270.             data: oDataStructure[e.plotid]
    271.           });
    272.         }
    273.       }
    274.     }
    275.  
    276.     /*
    277.      * Handle history buttons. You can assign
    278.      * shapes id's and based on id you can go 
    279.      * 'forward' or 'backwards'. You could 
    280.      * also handle this with HTML and register
    281.      * click events to those DOM elements.
    282.      */
    283.     function labelClickHandler(p) {
    284.       var labelId = p.labelid;
    285.       switch (labelId) {
    286.         case 'forwards':
    287.         case 'backwards':
    288.         case 'default':
    289.           zingchart.exec('myChart', 'reload'); // reload loads original JSON packet (not modified packet)
    290.           /* alternative way to reload chart
    291.           zingchart.exec('myChart', 'destroy');
    292.           zingchart.render({
    293.           	id : 'myChart', 
    294.           	data : barConfig, 
    295.             height: '100%', 
    296.           	width: '100%' 
    297.           });
    298.           */
    299.           break;
    300.       }
    301.     }
    302.  
    303.     zingchart.bind('myChart', 'label_click', labelClickHandler);
    304.     zingchart.bind('myChart', 'plot_click', plotClickHandler);
    305.   </script>
    306. </body>
    307.  
    308. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    1. var barConfig = { // initial chart config
    2.   type: 'bar',
    3.   title: {
    4.     text: 'Top Stocks Portfolio'
    5.   },
    6.   plot: {
    7.     cursor: 'pointer',
    8.     valueBox: {
    9.       text: '%t'
    10.     }
    11.   },
    12.   scaleX: {
    13.     label: {
    14.       text: 'Company Price Point'
    15.     },
    16.     item: {
    17.       visible: false
    18.     }
    19.   },
    20.   series: [{
    21.       id: 'MSFT',
    22.       text: 'MSFT',
    23.       dataDescription: 'Microsoft Corporation',
    24.       values: [61.25],
    25.       dataUrl: 'https://cdn.zingchart.com/datasets/msft-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    26.     },
    27.     {
    28.       id: 'NKE',
    29.       text: 'NKE',
    30.       dataDescription: 'Nike',
    31.       values: [58.25],
    32.       dataUrl: 'https://cdn.zingchart.com/datasets/nke-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    33.     },
    34.     {
    35.       id: 'AAPL',
    36.       text: 'AAPL',
    37.       dataDescription: 'Apple Inc',
    38.       values: [148.25],
    39.       dataUrl: 'https://cdn.zingchart.com/datasets/aapl-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    40.     },
    41.     {
    42.       id: 'INTC',
    43.       text: 'INTC',
    44.       dataDescription: 'Intel Corporation',
    45.       values: [44.55],
    46.       dataUrl: 'https://cdn.zingchart.com/datasets/intc-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    47.     },
    48.     {
    49.       id: 'MMM',
    50.       text: 'MMM',
    51.       dataDescription: '3M Company',
    52.       values: [230.23],
    53.       dataUrl: 'https://cdn.zingchart.com/datasets/mmm-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    54.     },
    55.     {
    56.       id: 'MCD',
    57.       text: 'MCD',
    58.       dataDescription: 'Macdonalds',
    59.       values: [165.23],
    60.       dataUrl: 'https://cdn.zingchart.com/datasets/mcd-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    61.     },
    62.     {
    63.       id: 'DIS',
    64.       text: 'DIS',
    65.       dataDescription: 'DIS Corporation',
    66.       values: [107.67],
    67.       dataUrl: 'https://cdn.zingchart.com/datasets/dis-stock-data.json' // retrieved from quandl and downloaded so our site demo is not dependent on their API' // retrieved from quandl and downloaded so our site demo is not dependent on their API
    68.     },
    69.   ]
    70. };
    71.  
    72. var drilldownConfig = { // second config for the drilldown
    73.   type: 'line',
    74.   utc: true,
    75.   globals: {
    76.     thousandsSeparator: ','
    77.   },
    78.   title: {
    79.     text: 'Title Is N/A',
    80.     adjustLayout: true
    81.   },
    82.   plot: {
    83.     maxTrackers: 0,
    84.     maxNodes: 0,
    85.     exact: true
    86.   },
    87.   plotarea: {
    88.     margin: 'dynamic',
    89.     adjustLayout: true
    90.   },
    91.   legend: {
    92.     toggleAction: 'hide',
    93.     adjustLayout: true
    94.   },
    95.   scaleX: {
    96.     zooming: true,
    97.     transform: {
    98.       type: 'date',
    99.       all: "%Y/%m/%d"
    100.     }
    101.   },
    102.   scaleY: {
    103.  
    104.   },
    105.   scaleY2: {
    106.     short: true,
    107.     shortUnit: 'M',
    108.     guide: {
    109.       visible: false
    110.     }
    111.   },
    112.   preview: {
    113.     adjustLayout: true
    114.   },
    115.   crosshairX: {
    116.     plotLabel: {
    117.       fontSize: 14,
    118.       borderRadius: 5,
    119.       shadow: 1,
    120.       headerText: '%kv <br><hr>',
    121.       decimals: 2
    122.     }
    123.   },
    124.   scrollX: {},
    125.   series: [],
    126.   labels: [{
    127.     flat: false, // most important. Makes label register click event
    128.     text: 'Go Back',
    129.     backgroundColor: '#C4C4C4',
    130.     borderRadius: 5,
    131.     x: 45,
    132.     y: 15,
    133.     id: 'backwards',
    134.     cursor: 'hand',
    135.     padding: 5,
    136.     hoverState: {
    137.       backgroundColor: '#e0e0e0'
    138.     }
    139.   }]
    140. };
    141.  
    142. zingchart.render({
    143.   id: 'myChart',
    144.   data: barConfig,
    145.   height: '100%',
    146.   width: '100%'
    147. });
    148.  
    149. var oDataStructure = {}; // local variable cache
    150.  
    151. /*
    152.  * Retrieve the data. It will be in specific format that can be viewed in the
    153.  * dataUrl property. We initally want to only show the first 4 plots and users can
    154.  * toggle the rest on after load.
    155.  *
    156.  * Real url example: demos.zingchart.com/view/NKVZRE4U/google.json
    157.  */
    158. function sortAndBindData(aColumnNames, aData, sPlotId) {
    159.  
    160.   /*
    161.    * assign series attributes.
    162.    * end result is an array of objects.
    163.    * [{
    164.    *   values:[],
    165.    *   id: '',
    166.    *   text: '',
    167.    *   visible: true || false,
    168.    *   scales: 'scale-x,scale-y' || 'scale-x,scale-y-2',
    169.    *   short: false || true
    170.    *   shortUnit: 'M' || ''
    171.    * }]
    172.    */
    173.   for (var i = 1, j = 0; i < aColumnNames.length; i++, j++) {
    174.     oDataStructure[sPlotId].series[j] = {}; // create series object
    175.     oDataStructure[sPlotId].series[j].values = [];
    176.     oDataStructure[sPlotId].series[j].id = aColumnNames[i];
    177.     oDataStructure[sPlotId].series[j].text = aColumnNames[i];
    178.     oDataStructure[sPlotId].series[j].visible = true;
    179.     oDataStructure[sPlotId].series[j].scales = aColumnNames[i].includes('Volume') ? 'scale-x, scale-y-2' : 'scale-x, scale-y';
    180.     oDataStructure[sPlotId].series[j].short = aColumnNames[i].includes('Volume') ? 'true' : 'false';
    181.     oDataStructure[sPlotId].series[j].shortUnit = 'M';
    182.   }
    183.  
    184.   /* 
    185.    * force assign all values in one pass. This is the format expected from the xhr request
    186.    * ["Date","Open","High","Low","Close","Volume","Ex-Dividend","Split Ratio","Adj. Open","Adj. High","Adj. Low","Adj. Close","Adj. Volume"]
    187.    *
    188.    * aData[i][1] will access "Open" value
    189.    */
    190.   for (var i = aData.length - 1; i >= 0; i--) {
    191.     oDataStructure[sPlotId].series[0].values.push(aData[i][1]);
    192.     oDataStructure[sPlotId].series[1].values.push(aData[i][2]);
    193.     oDataStructure[sPlotId].series[2].values.push(aData[i][3]);
    194.     oDataStructure[sPlotId].series[3].values.push(aData[i][4]);
    195.     oDataStructure[sPlotId].series[4].values.push(aData[i][5]);
    196.     oDataStructure[sPlotId].series[5].values.push(aData[i][6]);
    197.     oDataStructure[sPlotId].series[6].values.push(aData[i][7]);
    198.     oDataStructure[sPlotId].series[7].values.push(aData[i][8]);
    199.     oDataStructure[sPlotId].series[8].values.push(aData[i][9]);
    200.     oDataStructure[sPlotId].series[9].values.push(aData[i][10]);
    201.     oDataStructure[sPlotId].series[10].values.push(aData[i][11]);
    202.     oDataStructure[sPlotId].series[11].values.push(aData[i][12]);
    203.   }
    204.  
    205.   // this will assign all the data to the chart at once
    206.   zingchart.exec('myChart', 'setdata', {
    207.     data: oDataStructure[sPlotId]
    208.   });
    209. }
    210.  
    211. /*
    212.  * Set up the config that is going to be drilled into.
    213.  */
    214. function renderStockDataFromQuandl(sUrl, sDescription, sPlotId) {
    215.   fetch(sUrl)
    216.     .then(req => {
    217.       return req.json()
    218.     })
    219.     .then(data => {
    220.       var aColumnNames = data.dataset['column_names'];
    221.       var aData = data.dataset.data;
    222.       oDataStructure[sPlotId] = JSON.parse(JSON.stringify(drilldownConfig));
    223.       //oDataStructure[sPlotId].scaleX.minValue = Date.parse(data.dataset['start_date']);
    224.       //oDataStructure[sPlotId].scaleX.maxValue = Date.parse(data.dataset['end_date']);
    225.       oDataStructure[sPlotId].title.text = sDescription + ' Stock Data';
    226.       sortAndBindData(aColumnNames, aData, sPlotId);
    227.     });
    228. }
    229.  
    230. /*
    231.  * This evnet handler will either retrieve stock data from AJAX
    232.  * or retrieve the structure from our local variable cache
    233.  */
    234. function plotClickHandler(e) {
    235.   if (e.xdata['url']) {
    236.     if (!oDataStructure[e.plotid]) { // if doesn't exist in cache. Go get it
    237.       oDataStructure[e.plotid] = {};
    238.       renderStockDataFromQuandl(e.xdata['url'], e.xdata['description'], e.plotid);
    239.     } else { // we already have the data. Render it
    240.       zingchart.exec('myChart', 'setdata', {
    241.         data: oDataStructure[e.plotid]
    242.       });
    243.     }
    244.   }
    245. }
    246.  
    247. /*
    248.  * Handle history buttons. You can assign
    249.  * shapes id's and based on id you can go 
    250.  * 'forward' or 'backwards'. You could 
    251.  * also handle this with HTML and register
    252.  * click events to those DOM elements.
    253.  */
    254. function labelClickHandler(p) {
    255.   var labelId = p.labelid;
    256.   switch (labelId) {
    257.     case 'forwards':
    258.     case 'backwards':
    259.     case 'default':
    260.       zingchart.exec('myChart', 'reload'); // reload loads original JSON packet (not modified packet)
    261.       /* alternative way to reload chart
    262.       zingchart.exec('myChart', 'destroy');
    263.       zingchart.render({
    264.       	id : 'myChart', 
    265.       	data : barConfig, 
    266.         height: '100%', 
    267.       	width: '100%' 
    268.       });
    269.       */
    270.       break;
    271.   }
    272. }
    273.  
    274. zingchart.bind('myChart', 'label_click', labelClickHandler);
    275. zingchart.bind('myChart', 'plot_click', plotClickHandler);