• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    8.   <script nonce="undefined" src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
    9.   <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    10.  
    11.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12.   <style>
    13.     .container {
    14.       width: 400px;
    15.       height: 200px;
    16.       min-width: 400px;
    17.       border: 1px dashed #777;
    18.     }
    19.  
    20.     #myChart {
    21.       width: 100%;
    22.       height: 100%;
    23.     }
    24.   </style>
    25. </head>
    26.  
    27. <body>
    28.   <div class='container'>
    29.     <div id='myChart'></div>
    30.   </div>
    31.   <script>
    32.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    33.     let chartConfig = {
    34.       type: 'stock',
    35.       title: {
    36.         text: 'Responsive Stock Chart at 100% width',
    37.         adjustLayout: true,
    38.         fontFamily: 'Georgia',
    39.         fontSize: 20,
    40.         mediaRules: [{
    41.             maxWidth: 500,
    42.             text: 'Responsive Stock Chart at 500 pixels',
    43.             fontSize: 14
    44.           },
    45.           {
    46.             maxWidth: 300,
    47.             text: 'Responsive Stock Chart at 300 pixels',
    48.             fontSize: 12,
    49.             fontWeight: 'normal'
    50.           }
    51.         ]
    52.       },
    53.       plot: {
    54.         aspect: 'candlestick',
    55.         tooltip: {
    56.           visible: false
    57.         },
    58.         preview: {
    59.           type: 'area',
    60.           lineColor: '#ED008E',
    61.           lineWidth: 1,
    62.           lineStyle: 'solid',
    63.           backgroundColor: '#F0592B',
    64.           alpha: 1,
    65.           alphaArea: 0.3,
    66.           mediaRules: [{
    67.               maxWidth: 500,
    68.               backgroundColor: '#ED008E',
    69.             },
    70.             {
    71.               maxWidth: 300,
    72.               type: 'line'
    73.             }
    74.           ]
    75.         },
    76.         trendUp: {
    77.           backgroundColor: '#ED008E',
    78.           lineColor: '#ED008E',
    79.           borderColor: '#ED008E'
    80.         },
    81.         trendDown: {
    82.           backgroundColor: '#F0592B',
    83.           lineColor: '#F0592B',
    84.           borderColor: '#F0592B'
    85.         }
    86.       },
    87.       plotarea: {
    88.         adjustLayout: true
    89.       },
    90.       preview: {
    91.         adjustLayout: true,
    92.         height: '15%',
    93.         borderWidth: 1
    94.       },
    95.       scaleX: {
    96.         minValue: 1420232400000,
    97.         step: 'day',
    98.         transform: {
    99.           type: 'date',
    100.           all: '%M %d'
    101.         },
    102.         item: {
    103.           fontSize: 10
    104.         },
    105.         maxItems: 9,
    106.         zooming: true,
    107.         zoomToValues: [1420232400000, 1425070800000],
    108.         mediaRules: [{
    109.             maxWidth: 500,
    110.             transform: {
    111.               all: '%m/%d'
    112.             }
    113.           },
    114.           {
    115.             maxWidth: 300,
    116.             item: {
    117.               fontSize: 9
    118.             }
    119.           }
    120.         ]
    121.       },
    122.       scaleY: {
    123.         values: '28:34:1',
    124.         format: '$%v',
    125.         item: {
    126.           fontSize: 10
    127.         },
    128.         guide: {
    129.           lineStyle: 'dotted'
    130.         },
    131.         mediaRules: [{
    132.             maxWidth: 500,
    133.             values: '28:34:2'
    134.           },
    135.           {
    136.             maxWidth: 300,
    137.             item: {
    138.               fontSize: 9
    139.             }
    140.           }
    141.         ]
    142.       },
    143.       crosshairX: {
    144.         plotLabel: {
    145.           text: 'Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close',
    146.           decimals: 2,
    147.           multiple: true,
    148.           placement: 'node-top',
    149.           textAlpha: 1,
    150.           alpha: 0.7,
    151.           borderRadius: '3px'
    152.         },
    153.         scaleLabel: {
    154.           text: '%v',
    155.           transform: {
    156.             type: 'date',
    157.             all: '%M %d, %Y'
    158.           },
    159.           borderRadius: '3px'
    160.         },
    161.         mediaRules: [{
    162.             maxWidth: 500,
    163.             scaleLabel: {
    164.               transform: {
    165.                 all: '%m/%d/%y'
    166.               }
    167.             }
    168.           },
    169.           {
    170.             maxWidth: 300,
    171.             plotLabel: {
    172.               fontSize: 9
    173.             },
    174.             scaleLabel: {
    175.               fontSize: 9
    176.             }
    177.           }
    178.         ]
    179.       },
    180.       series: [{
    181.         values: [
    182.           [1420232400000, [31.34, 31.46, 30.87, 31.06]], //01/02/15
    183.  
    184.           [1420491600000, [31.80, 32.25, 31.52, 32.05]], //01/05/15
    185.           [1420578000000, [32.05, 32.57, 31.93, 32.30]], //01/06/15
    186.           [1420664400000, [32.21, 32.39, 31.98, 32.08]], //01/07/15
    187.           [1420750800000, [32.32, 32.38, 32.13, 32.37]], //01/08/15
    188.           [1420837200000, [32.52, 32.53, 31.95, 32.03]], //01/09/15
    189.  
    190.           [1421096400000, [32.07, 32.14, 31.77, 31.98]], //01/12/15
    191.           [1421182800000, [32.26, 32.33, 31.61, 31.86]], //01/13/15
    192.           [1421269200000, [31.65, 31.85, 31.41, 31.78]], //01/14/15
    193.           [1421355600000, [31.86, 31.97, 31.56, 31.58]], //01/15/15
    194.           [1421442000000, [31.51, 31.65, 31.45, 31.59]], //01/16/15
    195.  
    196.           [1421787600000, [31.84, 31.87, 31.55, 31.85]], //01/20/15
    197.           [1421874000000, [31.83, 32.08, 31.71, 32.04]], //01/21/15
    198.           [1421960400000, [32.30, 32.36, 31.96, 32.28]], //01/22/15
    199.           [1422046800000, [32.43, 32.88, 32.29, 32.48]], //01/23/15
    200.  
    201.           [1422306000000, [32.72, 32.74, 32.40, 32.60]], //01/26/15
    202.           [1422392400000, [32.39, 32.46, 32.20, 32.38]], //01/27/15
    203.           [1422478800000, [32.47, 32.49, 31.81, 31.84]], //01/28/15
    204.           [1422565200000, [31.84, 32.20, 31.78, 32.08]], //01/29/15
    205.           [1422651600000, [31.88, 32.11, 31.82, 31.89]], //01/30/15
    206.  
    207.           [1422910800000, [32.00, 32.22, 31.90, 32.21]], //02/02/15
    208.           [1422997200000, [32.29, 32.52, 32.26, 32.47]], //02/03/15
    209.           [1423083600000, [32.41, 32.43, 32.08, 32.16]], //02/04/15
    210.           [1423170000000, [32.25, 32.50, 32.23, 32.50]], //02/05/15
    211.           [1423256400000, [32.54, 32.75, 32.47, 32.52]], //02/06/15
    212.  
    213.           [1423515600000, [32.47, 32.75, 31.50, 31.64]], //02/09/15
    214.           [1423602000000, [31.77, 32.05, 31.55, 31.96]], //02/10/15
    215.           [1423688400000, [31.49, 31.82, 31.35, 31.77]], //02/11/15
    216.           [1423774800000, [31.70, 31.99, 30.71, 30.89]], //02/12/15
    217.           [1423861200000, [30.99, 31.57, 30.50, 31.55]], //02/13/15
    218.  
    219.           [1424206800000, [30.02, 30.30, 29.98, 30.27]], //02/17/15
    220.           [1424293200000, [30.34, 30.90, 30.15, 30.80]], //02/18/15
    221.           [1424379600000, [30.85, 30.91, 30.05, 30.15]], //02/19/15
    222.           [1424466000000, [29.88, 30.21, 29.80, 30.21]], //02/20/15
    223.  
    224.           [1424725200000, [30.22, 30.30, 30.10, 30.17]], //02/23/15
    225.           [1424811600000, [30.15, 30.45, 30.01, 30.39]], //02/24/15
    226.           [1424898000000, [30.45, 31.06, 30.40, 30.91]], //02/25/15
    227.           [1424984400000, [30.94, 31.01, 30.81, 30.89]], //02/26/15
    228.           [1425070800000, [30.83, 31.27, 30.75, 30.99]], //02/27/15
    229.  
    230.           [1425330000000, [30.90, 31.12, 30.85, 31.11]], //03/02/15
    231.           [1425416400000, [31.05, 31.08, 30.78, 30.86]], //03/03/15
    232.           [1425502800000, [30.76, 30.77, 30.47, 30.66]], //03/04/15
    233.           [1425589200000, [30.62, 30.82, 30.57, 30.82]], //03/05/15
    234.           [1425675600000, [30.71, 30.78, 30.33, 30.42]], //03/06/15
    235.  
    236.           [1425934800000, [30.52, 30.70, 30.49, 30.64]], //03/09/15
    237.           [1426021200000, [30.50, 30.64, 30.17, 30.17]], //03/10/15
    238.           [1426107600000, [30.28, 30.49, 30.15, 30.19]], //03/11/15
    239.           [1426194000000, [30.27, 30.41, 30.17, 30.40]], //03/12/15
    240.           [1426280400000, [30.28, 30.36, 29.81, 30.04]], //03/13/15
    241.  
    242.           [1426539600000, [30.06, 30.48, 29.96, 30.45]], //03/16/15
    243.           [1426626000000, [30.30, 30.39, 30.09, 30.31]], //03/17/15
    244.           [1426712400000, [30.18, 30.85, 30.11, 30.64]], //03/18/15
    245.           [1426798800000, [30.44, 30.61, 30.26, 30.33]], //03/19/15
    246.           [1426885200000, [30.34, 30.53, 30.30, 30.40]], //03/20/15
    247.  
    248.           [1427144400000, [30.48, 30.74, 30.45, 30.47]], //03/23/15
    249.           [1427230800000, [30.38, 30.48, 30.27, 30.28]], //03/24/15
    250.           [1427317200000, [30.23, 30.33, 29.91, 29.91]], //03/25/15
    251.           [1427403600000, [30.80, 30.92, 30.17, 30.30]], //03/26/15
    252.           [1427490000000, [30.34, 30.90, 29.60, 29.64]], //03/27/15
    253.  
    254.           [1427749200000, [29.98, 30.20, 29.97, 30.12]], //03/30/15
    255.           [1427835600000, [30.15, 30.90, 29.81, 30.81]], //03/31/15
    256.           [1427922000000, [31.34, 31.46, 30.87, 31.06]], //04/01/15
    257.           [1428008400000, [31.80, 32.25, 31.52, 32.05]], //04/02/15
    258.  
    259.           [1428354000000, [32.05, 32.57, 31.93, 32.30]], //04/06/15
    260.           [1428440400000, [32.21, 32.39, 31.98, 32.08]], //04/07/15
    261.           [1428526800000, [32.32, 32.38, 32.13, 32.37]], //04/08/15
    262.           [1428613200000, [32.52, 32.53, 31.95, 32.03]], //04/09/15
    263.           [1428699600000, [32.07, 32.14, 31.77, 31.98]], //04/10/15
    264.  
    265.           [1428958800000, [32.26, 32.33, 31.61, 31.86]], //04/13/15
    266.           [1429045200000, [31.65, 31.85, 31.41, 31.78]], //04/14/15
    267.           [1429131600000, [31.86, 31.97, 31.56, 31.58]], //04/15/15
    268.           [1429218000000, [31.51, 31.65, 31.45, 31.59]], //04/16/15
    269.           [1429304400000, [31.84, 31.87, 31.55, 31.85]], //04/17/15
    270.  
    271.           [1429563600000, [31.83, 32.08, 31.71, 32.04]], //04/20/15
    272.           [1429650000000, [32.30, 32.36, 31.96, 32.28]], //04/21/15
    273.           [1429736400000, [32.43, 32.88, 32.29, 32.48]], //04/22/15
    274.           [1429822800000, [32.72, 32.74, 32.40, 32.60]], //04/23/15
    275.           [1429909200000, [32.39, 32.46, 32.20, 32.38]], //04/24/15
    276.  
    277.           [1430168400000, [32.47, 32.49, 31.81, 31.84]], //04/27/15
    278.           [1430254800000, [31.84, 32.20, 31.78, 32.08]], //04/28/15
    279.           [1430341200000, [31.88, 32.11, 31.82, 31.89]], //04/29/15
    280.           [1430427600000, [32.00, 32.22, 31.90, 32.21]], //04/30/15
    281.           [1430514000000, [32.29, 32.52, 32.26, 32.47]], //05/01/15
    282.  
    283.           [1430773200000, [32.41, 32.43, 32.08, 32.16]], //05/04/15
    284.           [1430859600000, [32.25, 32.50, 32.23, 32.50]], //05/05/15
    285.           [1430946000000, [32.54, 32.75, 32.47, 32.52]], //05/06/15
    286.           [1431032400000, [32.47, 32.75, 31.50, 31.64]], //05/07/15
    287.           [1431118800000, [31.77, 32.05, 31.55, 31.96]], //05/08/15
    288.  
    289.           [1431378000000, [31.49, 31.82, 31.35, 31.77]], //05/11/15
    290.           [1431464400000, [31.70, 31.99, 30.71, 30.89]], //05/12/15
    291.           [1431550800000, [30.99, 31.57, 30.50, 31.55]], //05/13/15
    292.           [1431637200000, [30.02, 30.30, 29.98, 30.27]], //05/14/15
    293.           [1431723600000, [30.34, 30.90, 30.15, 30.80]], //05/15/15
    294.  
    295.           [1431982800000, [30.85, 30.91, 30.05, 30.15]], //05/18/15
    296.           [1432069200000, [29.88, 30.21, 29.80, 30.21]], //05/19/15
    297.           [1432155600000, [30.22, 30.30, 30.10, 30.17]], //05/20/15
    298.           [1432242000000, [30.15, 30.45, 30.01, 30.39]], //05/21/15
    299.           [1432328400000, [30.45, 31.06, 30.40, 30.91]], //05/22/15
    300.  
    301.           [1432674000000, [30.94, 31.01, 30.81, 30.89]], //05/26/15
    302.           [1432760400000, [30.83, 31.27, 30.75, 30.99]], //05/27/15
    303.           [1432846800000, [30.90, 31.12, 30.85, 31.11]], //05/28/15
    304.           [1432933200000, [31.05, 31.08, 30.78, 30.86]], //05/29/15
    305.  
    306.           [1433192400000, [30.76, 30.77, 30.47, 30.66]], //06/01/15
    307.           [1433278800000, [30.62, 30.82, 30.57, 30.82]], //06/02/15
    308.           [1433365200000, [30.71, 30.78, 30.33, 30.42]], //06/03/15
    309.           [1433451600000, [30.52, 30.70, 30.49, 30.64]], //06/04/15
    310.           [1433538000000, [30.50, 30.64, 30.17, 30.17]], //06/05/15
    311.  
    312.           [1433797200000, [30.28, 30.49, 30.15, 30.19]], //06/08/15
    313.           [1433883600000, [30.27, 30.41, 30.17, 30.40]], //06/09/15
    314.           [1433970000000, [30.28, 30.36, 29.81, 30.04]], //06/10/15
    315.           [1434056400000, [30.06, 30.48, 29.96, 30.45]], //06/11/15
    316.           [1434142800000, [30.30, 30.39, 30.09, 30.31]], //06/12/15
    317.  
    318.           [1434402000000, [30.18, 30.85, 30.11, 30.64]], //06/15/15
    319.           [1434488400000, [30.44, 30.61, 30.26, 30.33]], //06/16/15
    320.           [1434574800000, [30.34, 30.53, 30.30, 30.40]], //06/17/15
    321.           [1434661200000, [30.48, 30.74, 30.45, 30.47]], //06/18/15
    322.           [1434747600000, [30.38, 30.48, 30.27, 30.28]], //06/19/15
    323.  
    324.           [1435006800000, [30.23, 30.33, 29.91, 29.91]], //06/22/15
    325.           [1435093200000, [30.80, 30.92, 30.17, 30.30]], //06/23/15
    326.           [1435179600000, [30.34, 30.90, 29.60, 29.64]], //06/24/15
    327.           [1435266000000, [29.98, 30.20, 29.97, 30.12]], //06/25/15
    328.           [1435352400000, [30.15, 30.90, 29.81, 30.81]], //06/26/15
    329.  
    330.           [1435611600000, [29.98, 30.20, 29.97, 30.12]], //06/29/15
    331.           [1435698000000, [30.15, 30.90, 29.81, 30.81]], //06/30/15
    332.         ]
    333.       }]
    334.     };
    335.  
    336.     // adjust the refresh rate of the chart
    337.     zingchart.DEV.RESIZESPEED = 50;
    338.     zingchart.DEV.DEBOUNCESPEED = 50;
    339.  
    340.     zingchart.render({
    341.       id: 'myChart',
    342.       data: chartConfig,
    343.       height: '100%',
    344.       width: '100%'
    345.     });
    346.  
    347.     // initiate jquery resizable container for demo purposes
    348.     $('.container').resizable();
    349.   </script>
    350. </body>
    351.  
    352. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    8.   <script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
    9.   <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    10.  
    11.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    12. </head>
    13.  
    14. <body>
    15.   <div class='container'>
    16.     <div id='myChart'></div>
    17.   </div>
    18. </body>
    19.  
    20. </html>
    1. .container {
    2.   width: 400px;
    3.   height: 200px;
    4.   min-width: 400px;
    5.   border: 1px dashed #777;
    6. }
    7.  
    8. #myChart {
    9.   width: 100%;
    10.   height: 100%;
    11. }
    1. let chartConfig = {
    2.   type: 'stock',
    3.   title: {
    4.     text: 'Responsive Stock Chart at 100% width',
    5.     adjustLayout: true,
    6.     fontFamily: 'Georgia',
    7.     fontSize: 20,
    8.     mediaRules: [{
    9.         maxWidth: 500,
    10.         text: 'Responsive Stock Chart at 500 pixels',
    11.         fontSize: 14
    12.       },
    13.       {
    14.         maxWidth: 300,
    15.         text: 'Responsive Stock Chart at 300 pixels',
    16.         fontSize: 12,
    17.         fontWeight: 'normal'
    18.       }
    19.     ]
    20.   },
    21.   plot: {
    22.     aspect: 'candlestick',
    23.     tooltip: {
    24.       visible: false
    25.     },
    26.     preview: {
    27.       type: 'area',
    28.       lineColor: '#ED008E',
    29.       lineWidth: 1,
    30.       lineStyle: 'solid',
    31.       backgroundColor: '#F0592B',
    32.       alpha: 1,
    33.       alphaArea: 0.3,
    34.       mediaRules: [{
    35.           maxWidth: 500,
    36.           backgroundColor: '#ED008E',
    37.         },
    38.         {
    39.           maxWidth: 300,
    40.           type: 'line'
    41.         }
    42.       ]
    43.     },
    44.     trendUp: {
    45.       backgroundColor: '#ED008E',
    46.       lineColor: '#ED008E',
    47.       borderColor: '#ED008E'
    48.     },
    49.     trendDown: {
    50.       backgroundColor: '#F0592B',
    51.       lineColor: '#F0592B',
    52.       borderColor: '#F0592B'
    53.     }
    54.   },
    55.   plotarea: {
    56.     adjustLayout: true
    57.   },
    58.   preview: {
    59.     adjustLayout: true,
    60.     height: '15%',
    61.     borderWidth: 1
    62.   },
    63.   scaleX: {
    64.     minValue: 1420232400000,
    65.     step: 'day',
    66.     transform: {
    67.       type: 'date',
    68.       all: '%M %d'
    69.     },
    70.     item: {
    71.       fontSize: 10
    72.     },
    73.     maxItems: 9,
    74.     zooming: true,
    75.     zoomToValues: [1420232400000, 1425070800000],
    76.     mediaRules: [{
    77.         maxWidth: 500,
    78.         transform: {
    79.           all: '%m/%d'
    80.         }
    81.       },
    82.       {
    83.         maxWidth: 300,
    84.         item: {
    85.           fontSize: 9
    86.         }
    87.       }
    88.     ]
    89.   },
    90.   scaleY: {
    91.     values: '28:34:1',
    92.     format: '$%v',
    93.     item: {
    94.       fontSize: 10
    95.     },
    96.     guide: {
    97.       lineStyle: 'dotted'
    98.     },
    99.     mediaRules: [{
    100.         maxWidth: 500,
    101.         values: '28:34:2'
    102.       },
    103.       {
    104.         maxWidth: 300,
    105.         item: {
    106.           fontSize: 9
    107.         }
    108.       }
    109.     ]
    110.   },
    111.   crosshairX: {
    112.     plotLabel: {
    113.       text: 'Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close',
    114.       decimals: 2,
    115.       multiple: true,
    116.       placement: 'node-top',
    117.       textAlpha: 1,
    118.       alpha: 0.7,
    119.       borderRadius: '3px'
    120.     },
    121.     scaleLabel: {
    122.       text: '%v',
    123.       transform: {
    124.         type: 'date',
    125.         all: '%M %d, %Y'
    126.       },
    127.       borderRadius: '3px'
    128.     },
    129.     mediaRules: [{
    130.         maxWidth: 500,
    131.         scaleLabel: {
    132.           transform: {
    133.             all: '%m/%d/%y'
    134.           }
    135.         }
    136.       },
    137.       {
    138.         maxWidth: 300,
    139.         plotLabel: {
    140.           fontSize: 9
    141.         },
    142.         scaleLabel: {
    143.           fontSize: 9
    144.         }
    145.       }
    146.     ]
    147.   },
    148.   series: [{
    149.     values: [
    150.       [1420232400000, [31.34, 31.46, 30.87, 31.06]], //01/02/15
    151.  
    152.       [1420491600000, [31.80, 32.25, 31.52, 32.05]], //01/05/15
    153.       [1420578000000, [32.05, 32.57, 31.93, 32.30]], //01/06/15
    154.       [1420664400000, [32.21, 32.39, 31.98, 32.08]], //01/07/15
    155.       [1420750800000, [32.32, 32.38, 32.13, 32.37]], //01/08/15
    156.       [1420837200000, [32.52, 32.53, 31.95, 32.03]], //01/09/15
    157.  
    158.       [1421096400000, [32.07, 32.14, 31.77, 31.98]], //01/12/15
    159.       [1421182800000, [32.26, 32.33, 31.61, 31.86]], //01/13/15
    160.       [1421269200000, [31.65, 31.85, 31.41, 31.78]], //01/14/15
    161.       [1421355600000, [31.86, 31.97, 31.56, 31.58]], //01/15/15
    162.       [1421442000000, [31.51, 31.65, 31.45, 31.59]], //01/16/15
    163.  
    164.       [1421787600000, [31.84, 31.87, 31.55, 31.85]], //01/20/15
    165.       [1421874000000, [31.83, 32.08, 31.71, 32.04]], //01/21/15
    166.       [1421960400000, [32.30, 32.36, 31.96, 32.28]], //01/22/15
    167.       [1422046800000, [32.43, 32.88, 32.29, 32.48]], //01/23/15
    168.  
    169.       [1422306000000, [32.72, 32.74, 32.40, 32.60]], //01/26/15
    170.       [1422392400000, [32.39, 32.46, 32.20, 32.38]], //01/27/15
    171.       [1422478800000, [32.47, 32.49, 31.81, 31.84]], //01/28/15
    172.       [1422565200000, [31.84, 32.20, 31.78, 32.08]], //01/29/15
    173.       [1422651600000, [31.88, 32.11, 31.82, 31.89]], //01/30/15
    174.  
    175.       [1422910800000, [32.00, 32.22, 31.90, 32.21]], //02/02/15
    176.       [1422997200000, [32.29, 32.52, 32.26, 32.47]], //02/03/15
    177.       [1423083600000, [32.41, 32.43, 32.08, 32.16]], //02/04/15
    178.       [1423170000000, [32.25, 32.50, 32.23, 32.50]], //02/05/15
    179.       [1423256400000, [32.54, 32.75, 32.47, 32.52]], //02/06/15
    180.  
    181.       [1423515600000, [32.47, 32.75, 31.50, 31.64]], //02/09/15
    182.       [1423602000000, [31.77, 32.05, 31.55, 31.96]], //02/10/15
    183.       [1423688400000, [31.49, 31.82, 31.35, 31.77]], //02/11/15
    184.       [1423774800000, [31.70, 31.99, 30.71, 30.89]], //02/12/15
    185.       [1423861200000, [30.99, 31.57, 30.50, 31.55]], //02/13/15
    186.  
    187.       [1424206800000, [30.02, 30.30, 29.98, 30.27]], //02/17/15
    188.       [1424293200000, [30.34, 30.90, 30.15, 30.80]], //02/18/15
    189.       [1424379600000, [30.85, 30.91, 30.05, 30.15]], //02/19/15
    190.       [1424466000000, [29.88, 30.21, 29.80, 30.21]], //02/20/15
    191.  
    192.       [1424725200000, [30.22, 30.30, 30.10, 30.17]], //02/23/15
    193.       [1424811600000, [30.15, 30.45, 30.01, 30.39]], //02/24/15
    194.       [1424898000000, [30.45, 31.06, 30.40, 30.91]], //02/25/15
    195.       [1424984400000, [30.94, 31.01, 30.81, 30.89]], //02/26/15
    196.       [1425070800000, [30.83, 31.27, 30.75, 30.99]], //02/27/15
    197.  
    198.       [1425330000000, [30.90, 31.12, 30.85, 31.11]], //03/02/15
    199.       [1425416400000, [31.05, 31.08, 30.78, 30.86]], //03/03/15
    200.       [1425502800000, [30.76, 30.77, 30.47, 30.66]], //03/04/15
    201.       [1425589200000, [30.62, 30.82, 30.57, 30.82]], //03/05/15
    202.       [1425675600000, [30.71, 30.78, 30.33, 30.42]], //03/06/15
    203.  
    204.       [1425934800000, [30.52, 30.70, 30.49, 30.64]], //03/09/15
    205.       [1426021200000, [30.50, 30.64, 30.17, 30.17]], //03/10/15
    206.       [1426107600000, [30.28, 30.49, 30.15, 30.19]], //03/11/15
    207.       [1426194000000, [30.27, 30.41, 30.17, 30.40]], //03/12/15
    208.       [1426280400000, [30.28, 30.36, 29.81, 30.04]], //03/13/15
    209.  
    210.       [1426539600000, [30.06, 30.48, 29.96, 30.45]], //03/16/15
    211.       [1426626000000, [30.30, 30.39, 30.09, 30.31]], //03/17/15
    212.       [1426712400000, [30.18, 30.85, 30.11, 30.64]], //03/18/15
    213.       [1426798800000, [30.44, 30.61, 30.26, 30.33]], //03/19/15
    214.       [1426885200000, [30.34, 30.53, 30.30, 30.40]], //03/20/15
    215.  
    216.       [1427144400000, [30.48, 30.74, 30.45, 30.47]], //03/23/15
    217.       [1427230800000, [30.38, 30.48, 30.27, 30.28]], //03/24/15
    218.       [1427317200000, [30.23, 30.33, 29.91, 29.91]], //03/25/15
    219.       [1427403600000, [30.80, 30.92, 30.17, 30.30]], //03/26/15
    220.       [1427490000000, [30.34, 30.90, 29.60, 29.64]], //03/27/15
    221.  
    222.       [1427749200000, [29.98, 30.20, 29.97, 30.12]], //03/30/15
    223.       [1427835600000, [30.15, 30.90, 29.81, 30.81]], //03/31/15
    224.       [1427922000000, [31.34, 31.46, 30.87, 31.06]], //04/01/15
    225.       [1428008400000, [31.80, 32.25, 31.52, 32.05]], //04/02/15
    226.  
    227.       [1428354000000, [32.05, 32.57, 31.93, 32.30]], //04/06/15
    228.       [1428440400000, [32.21, 32.39, 31.98, 32.08]], //04/07/15
    229.       [1428526800000, [32.32, 32.38, 32.13, 32.37]], //04/08/15
    230.       [1428613200000, [32.52, 32.53, 31.95, 32.03]], //04/09/15
    231.       [1428699600000, [32.07, 32.14, 31.77, 31.98]], //04/10/15
    232.  
    233.       [1428958800000, [32.26, 32.33, 31.61, 31.86]], //04/13/15
    234.       [1429045200000, [31.65, 31.85, 31.41, 31.78]], //04/14/15
    235.       [1429131600000, [31.86, 31.97, 31.56, 31.58]], //04/15/15
    236.       [1429218000000, [31.51, 31.65, 31.45, 31.59]], //04/16/15
    237.       [1429304400000, [31.84, 31.87, 31.55, 31.85]], //04/17/15
    238.  
    239.       [1429563600000, [31.83, 32.08, 31.71, 32.04]], //04/20/15
    240.       [1429650000000, [32.30, 32.36, 31.96, 32.28]], //04/21/15
    241.       [1429736400000, [32.43, 32.88, 32.29, 32.48]], //04/22/15
    242.       [1429822800000, [32.72, 32.74, 32.40, 32.60]], //04/23/15
    243.       [1429909200000, [32.39, 32.46, 32.20, 32.38]], //04/24/15
    244.  
    245.       [1430168400000, [32.47, 32.49, 31.81, 31.84]], //04/27/15
    246.       [1430254800000, [31.84, 32.20, 31.78, 32.08]], //04/28/15
    247.       [1430341200000, [31.88, 32.11, 31.82, 31.89]], //04/29/15
    248.       [1430427600000, [32.00, 32.22, 31.90, 32.21]], //04/30/15
    249.       [1430514000000, [32.29, 32.52, 32.26, 32.47]], //05/01/15
    250.  
    251.       [1430773200000, [32.41, 32.43, 32.08, 32.16]], //05/04/15
    252.       [1430859600000, [32.25, 32.50, 32.23, 32.50]], //05/05/15
    253.       [1430946000000, [32.54, 32.75, 32.47, 32.52]], //05/06/15
    254.       [1431032400000, [32.47, 32.75, 31.50, 31.64]], //05/07/15
    255.       [1431118800000, [31.77, 32.05, 31.55, 31.96]], //05/08/15
    256.  
    257.       [1431378000000, [31.49, 31.82, 31.35, 31.77]], //05/11/15
    258.       [1431464400000, [31.70, 31.99, 30.71, 30.89]], //05/12/15
    259.       [1431550800000, [30.99, 31.57, 30.50, 31.55]], //05/13/15
    260.       [1431637200000, [30.02, 30.30, 29.98, 30.27]], //05/14/15
    261.       [1431723600000, [30.34, 30.90, 30.15, 30.80]], //05/15/15
    262.  
    263.       [1431982800000, [30.85, 30.91, 30.05, 30.15]], //05/18/15
    264.       [1432069200000, [29.88, 30.21, 29.80, 30.21]], //05/19/15
    265.       [1432155600000, [30.22, 30.30, 30.10, 30.17]], //05/20/15
    266.       [1432242000000, [30.15, 30.45, 30.01, 30.39]], //05/21/15
    267.       [1432328400000, [30.45, 31.06, 30.40, 30.91]], //05/22/15
    268.  
    269.       [1432674000000, [30.94, 31.01, 30.81, 30.89]], //05/26/15
    270.       [1432760400000, [30.83, 31.27, 30.75, 30.99]], //05/27/15
    271.       [1432846800000, [30.90, 31.12, 30.85, 31.11]], //05/28/15
    272.       [1432933200000, [31.05, 31.08, 30.78, 30.86]], //05/29/15
    273.  
    274.       [1433192400000, [30.76, 30.77, 30.47, 30.66]], //06/01/15
    275.       [1433278800000, [30.62, 30.82, 30.57, 30.82]], //06/02/15
    276.       [1433365200000, [30.71, 30.78, 30.33, 30.42]], //06/03/15
    277.       [1433451600000, [30.52, 30.70, 30.49, 30.64]], //06/04/15
    278.       [1433538000000, [30.50, 30.64, 30.17, 30.17]], //06/05/15
    279.  
    280.       [1433797200000, [30.28, 30.49, 30.15, 30.19]], //06/08/15
    281.       [1433883600000, [30.27, 30.41, 30.17, 30.40]], //06/09/15
    282.       [1433970000000, [30.28, 30.36, 29.81, 30.04]], //06/10/15
    283.       [1434056400000, [30.06, 30.48, 29.96, 30.45]], //06/11/15
    284.       [1434142800000, [30.30, 30.39, 30.09, 30.31]], //06/12/15
    285.  
    286.       [1434402000000, [30.18, 30.85, 30.11, 30.64]], //06/15/15
    287.       [1434488400000, [30.44, 30.61, 30.26, 30.33]], //06/16/15
    288.       [1434574800000, [30.34, 30.53, 30.30, 30.40]], //06/17/15
    289.       [1434661200000, [30.48, 30.74, 30.45, 30.47]], //06/18/15
    290.       [1434747600000, [30.38, 30.48, 30.27, 30.28]], //06/19/15
    291.  
    292.       [1435006800000, [30.23, 30.33, 29.91, 29.91]], //06/22/15
    293.       [1435093200000, [30.80, 30.92, 30.17, 30.30]], //06/23/15
    294.       [1435179600000, [30.34, 30.90, 29.60, 29.64]], //06/24/15
    295.       [1435266000000, [29.98, 30.20, 29.97, 30.12]], //06/25/15
    296.       [1435352400000, [30.15, 30.90, 29.81, 30.81]], //06/26/15
    297.  
    298.       [1435611600000, [29.98, 30.20, 29.97, 30.12]], //06/29/15
    299.       [1435698000000, [30.15, 30.90, 29.81, 30.81]], //06/30/15
    300.     ]
    301.   }]
    302. };
    303.  
    304. // adjust the refresh rate of the chart
    305. zingchart.DEV.RESIZESPEED = 50;
    306. zingchart.DEV.DEBOUNCESPEED = 50;
    307.  
    308. zingchart.render({
    309.   id: 'myChart',
    310.   data: chartConfig,
    311.   height: '100%',
    312.   width: '100%'
    313. });
    314.  
    315. // initiate jquery resizable container for demo purposes
    316. $('.container').resizable();