• 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.       background-color: #fff;
    17.     }
    18.  
    19.     #myChart {
    20.       height: 100%;
    21.       width: 100%;
    22.       min-height: 150px;
    23.     }
    24.  
    25.     .zc-ref {
    26.       display: none;
    27.     }
    28.  
    29.     button {
    30.       padding: 10px;
    31.       margin: 10px;
    32.     }
    33.   </style>
    34. </head>
    35.  
    36. <body>
    37.   <button onClick="toggleChartType();">Toggle Chart Type</button>
    38.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    39.   <script>
    40.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    41.     var currentChartType = 'line3d';
    42.  
    43.     function toggleChartType() {
    44.       if (currentChartType === 'line3d') currentChartType = 'area3d';
    45.       else currentChartType = 'line3d';
    46.  
    47.       // use api to preserve zoom and set chart type
    48.       zingchart.exec('myChart', 'setcharttype', {
    49.         type: currentChartType,
    50.         'preserve-state': true
    51.       });
    52.     }
    53.  
    54.     // window:load event for Javascript to run after HTML
    55.     // because this Javascript is injected into the document head
    56.     window.addEventListener('load', () => {
    57.       // Javascript code to execute after DOM content
    58.  
    59.       var myConfig = {
    60.         "graphset": [{
    61.           "3d-aspect": {
    62.             "zoom": 0.7,
    63.             "offset-x": -150,
    64.             "x-angle": -25,
    65.             "y-angle": -25,
    66.             "z-angle": 0,
    67.             "depth": 400
    68.           },
    69.           "globals": {
    70.             "font-family": "Lucida Sans Unicode"
    71.           },
    72.           "type": "line3d",
    73.           "plotarea": {
    74.             "margin": "50 0 250 0"
    75.           },
    76.           preview: {
    77.             mask: {
    78.               backgroundColor: '#1565c0'
    79.             }
    80.           },
    81.           "scaleX": {
    82.             "zooming": true,
    83.             "normalize": true,
    84.             "max-items": 9,
    85.             "background-color": "#fff",
    86.             "guide": {
    87.               "visible": true
    88.             },
    89.             "tick": {
    90.               "line-width": 1,
    91.               "line-color": "#000",
    92.               "visible": true,
    93.               "size": 10
    94.             },
    95.             "item": {
    96.               "padding": 10,
    97.               "angle": 0,
    98.               "lock-rotation": true
    99.             },
    100.             "axis": {
    101.               "line-width": 4,
    102.               "line-color": "#000"
    103.             },
    104.             "label": {
    105.               "font-size": 12,
    106.               "text": "f(Hz)"
    107.             }
    108.           },
    109.           "scaleY": {
    110.             "values": "0:6:1",
    111.             "background-color": "#fff",
    112.             "tick": {
    113.               "line-width": 1,
    114.               "line-color": "#000",
    115.               "visible": true,
    116.               "size": 10
    117.             },
    118.             "guide": {
    119.               "visible": true
    120.             },
    121.             "axis": {
    122.               "line-width": 4,
    123.               "line-color": "#000"
    124.             },
    125.             "item": {
    126.               "padding": 10,
    127.               "angle": 0,
    128.               "lock-rotation": true
    129.             },
    130.             "label": {
    131.               "font-size": 12,
    132.               "text": "A(mm/s)"
    133.             }
    134.           },
    135.           "scaleZ": {
    136.             "axis": {
    137.               "line-color": "#000",
    138.               "line-width": 2
    139.             },
    140.             "values": ["10-10-09", "10-12-09", "11-01-13", "11-03-08", "11-06-09", "11-07-06"],
    141.             "guide": {
    142.               "visible": true
    143.             },
    144.             "item": {
    145.               "lock-rotation": true,
    146.               "font-size": 10,
    147.               "auto-align": true
    148.             },
    149.             "label": {
    150.               "font-size": 12,
    151.               "font-weight": "bold",
    152.               "text": "Sample"
    153.             },
    154.             "tick": {
    155.               "line-color": "#000",
    156.               "size": 10
    157.             }
    158.           },
    159.           "plot": {
    160.             "depth": 1,
    161.           },
    162.           "labels": [{
    163.               "id": "flag_1",
    164.               "text": "A",
    165.               "hook": "node:plot=3,index=20",
    166.               "3d": true,
    167.               "background-color": "#eee",
    168.               "width": 25,
    169.               "height": 25,
    170.               "font-weight": "bold",
    171.               "border-radius": 9,
    172.               "callout": true,
    173.               "callout-position": "bottom",
    174.               "callout-height": 1,
    175.               "callout-extension": 20,
    176.               "offset-y": -35,
    177.               "anchor": "c",
    178.               "border-width": 1,
    179.               "border-color": "#999"
    180.             },
    181.             {
    182.               "id": "flag_2",
    183.               "text": "B",
    184.               "hook": "node:plot=5,index=40",
    185.               "3d": true,
    186.               "background-color": "#eee",
    187.               "width": 25,
    188.               "height": 25,
    189.               "padding-left": 8,
    190.               "font-weight": "bold",
    191.               "border-radius": "-12 3 0 -12",
    192.               "callout": true,
    193.               "callout-position": "bottom",
    194.               "callout-offset": "0% 48%",
    195.               "callout-height": 1,
    196.               "callout-width": 0,
    197.               "callout-extension": 20,
    198.               "offset-y": -35,
    199.               "offset-x": -10,
    200.               "anchor": "c",
    201.               "border-width": 1,
    202.               "border-color": "#999"
    203.             }
    204.           ],
    205.           "series": [{
    206.               "text": "Frequency Signal A",
    207.               "line-color": "#036",
    208.               "border-color": "#036",
    209.               "background-color": "#036",
    210.               "values": [0, 0.240125, 0.241725, 0.116675, 0.0817, 0.057025, 0.13415, 0.19035, 0.05725, 0.15895, 0.239125, 0.216425, 0.157075, 0.17205, 0.1821, 0.21815, 0.22315, 0.1023, 0.06555, 0.028275, 5.0076, 0.04225, 0.112325, 0.16975, 0.04685, 0.06275, 0.203125, 0.18285, 0.247725, 0.090175, 0.186875, 0.10225, 0.0446, 0.029925, 0.2173, 0.04345, 0.167125, 0.066925, 0.1486, 0.14975, 2.9928, 0.05105, 0.013525, 0.188475, 0.059925, 0.0501, 0.2203, 0.127825, 0.22935, 0.0308, 0.24365, 0.10705, 0.145275, 0.02725, 0.066425, 0.084275, 0.0222, 0.0272, 0.19085, 0.18555, 1.799, 0.184525, 0.129525, 0.12895, 0.184125, 0.1376, 0.23655, 0.143875, 0.009575, 0.194675, 0.0748, 0.0327, 0.04325, 0.189625, 0.23765, 0.180925, 0.02745, 0.241725, 0.14705, 0.23445, 1.9782, 0.147925, 0.10615, 0.00585, 0.01825, 0.0238, 0.162575, 0.100725, 0.089, 0.059125, 0.1054, 0.115275, 0.0861, 0.1532, 0.08395, 0.1783, 0.04565, 0.196425, 0.139725, 0.09185]
    211.             },
    212.             {
    213.               "text": "Frequency Signal B",
    214.               "line-color": "#036",
    215.               "border-color": "#036",
    216.               "background-color": "#036",
    217.               "values": [0, 0.04765, 0.229675, 0.164325, 0.12305, 0.0493, 0.141775, 0.2385, 0.0663, 0.220425, 0.08605, 0.09045, 0.183275, 0.06865, 0.182825, 0.0192, 0.219475, 0.2252, 0.0239, 0.050675, 4.857, 0.092725, 0.081775, 0.033225, 0.025325, 0.08295, 0.025025, 0.1374, 0.140425, 0.03755, 0.049925, 0.0699, 0.030725, 0.0615, 0.042175, 0.031625, 0.2007, 0.21435, 0.20495, 0.033375, 1.9042, 0.039025, 0.061325, 0.09985, 0.184075, 0.048875, 0.2033, 0.171375, 0.2224, 0.08285, 0.134425, 0.00305, 0.037225, 0.172125, 0.1231, 0.0902, 0.13445, 0.00895, 0.1412, 0.157325, 2.354, 0.06535, 0.057075, 0.126775, 0.2422, 0.041075, 0.0262, 0.064525, 0.128275, 0.0285, 0.111325, 0.145575, 0.080825, 0.218425, 0.101975, 0.051125, 0.072175, 0.132775, 0.184625, 0.2246, 2.5586, 0.032825, 0.1001, 0.2146, 0.1053, 0.127025, 0.111125, 0.131675, 0.0935, 0.133175, 0.0289, 0.0611, 0.200375, 0.114525, 0.165425, 0.227125, 0.1268, 0.0472, 0.140275, 0.0521]
    218.             },
    219.             {
    220.               "text": "Frequency Signal C",
    221.               "line-color": "#036",
    222.               "border-color": "#036",
    223.               "background-color": "#036",
    224.               "values": [0, 0.12305, 0.1833, 0.00445, 0.08415, 0.211225, 0.097975, 0.031375, 0.24065, 0.1191, 0.0094, 0.172625, 0.153175, 0.085875, 0.106925, 0.17615, 0.07465, 0.16105, 0.014925, 0.1509, 4.3374, 0.077775, 0.052025, 0.061075, 0.1103, 0.159525, 0.0052, 0.0807, 0.068, 0.219, 0.0362, 0.1607, 0.23825, 0.168575, 0.2387, 0.229625, 0.14505, 0.075625, 0.190125, 0.008925, 2.6576, 0.172, 0.20855, 0.212825, 0.185975, 0.2214, 0.136075, 0.0746, 0.166825, 0.013575, 0.122525, 0.23895, 0.163, 0.186225, 0.15285, 0.16025, 0.07105, 0.153575, 0.02615, 0.061925, 2.8376, 0.029475, 0.037175, 0.12175, 0.12565, 0.120075, 0.11425, 0.158925, 0.11185, 0.171525, 0.029775, 0.122725, 0.00385, 0.0244, 0.153325, 0.21345, 0.02525, 0.18665, 0.0009, 0.057275, 2.299, 0.07925, 0.00425, 0.1762, 0.1591, 0.102525, 0.1949, 0.077925, 0.182925, 0.208, 0.16595, 0.192125, 0.1543, 0.16915, 0.02085, 0.16885, 0.0172, 0.068525, 0.2043, 0.0178]
    225.             },
    226.             {
    227.               "text": "Frequency Signal D",
    228.               "line-color": "#036",
    229.               "border-color": "#036",
    230.               "background-color": "#036",
    231.               "values": [0, 0.061125, 0.23525, 0.122625, 0.01135, 0.2079, 0.046675, 0.030775, 0.1752, 0.1649, 0.109075, 0.211675, 0.1891, 0.179575, 0.176075, 0.127275, 0.17245, 0.0756, 0.11785, 0.18145, 5.4432, 0.16135, 0.014525, 0.20245, 0.1938, 0.05945, 0.24555, 0.1326, 0.142275, 0.1019, 0.2457, 0.19145, 0.210175, 0.2021, 0.076725, 0.094725, 0.1455, 0.110525, 0.04735, 0.249475, 1.2322, 0.0374, 0.125025, 0.094525, 0.1704, 0.234975, 0.052575, 0.06755, 0.173025, 0.194125, 0.206275, 0.10265, 0.056875, 0.064475, 0.027625, 0.1289, 0.01435, 0.171275, 0.06275, 0.1186, 1.7792, 0.239825, 0.073475, 0.223375, 0.22615, 0.1011, 0.2384, 0.104725, 0.21935, 0.2401, 0.179525, 0.0215, 0.129125, 0.0091, 0.197925, 0.1963, 0.012725, 0.1605, 0.22295, 0.0698, 2.91, 0.21635, 0.2494, 0.21185, 0.078975, 0.17825, 0.009875, 0.22355, 0.000275, 0.185325, 0.230325, 0.12315, 0.2281, 0.030175, 0.032625, 0.1834, 0.16355, 0.248475, 0.05535, 0.178025]
    232.             },
    233.             {
    234.               "text": "Frequency Signal E",
    235.               "line-color": "#036",
    236.               "border-color": "#036",
    237.               "background-color": "#036",
    238.               "values": [0, 0.141425, 0.153125, 0.080475, 0.056425, 0.162025, 0.1762, 0.21255, 0.19945, 0.156025, 0.173375, 0.11865, 0.145325, 0.06465, 0.115475, 0.2294, 0.1944, 0.24305, 0.123425, 0.145375, 5.2707999999999995, 0.10995, 0.237825, 0.188125, 0.158125, 0.0246, 0.1739, 0.104325, 0.13385, 0.14455, 0.180725, 0.098125, 0.011125, 0.04875, 0.057875, 0.0632, 0.225825, 0.118275, 0.067375, 0.064525, 2.1844, 0.0782, 0.03325, 0.10585, 0.014225, 0.210675, 0.07355, 0.233825, 0.161175, 0.153975, 0.070975, 0.179025, 0.1047, 0.199375, 0.178725, 0.06565, 0.010325, 0.051925, 0.0583, 0.154875, 1.613, 0.034625, 0.00565, 0.072925, 0.13185, 0.199275, 0.05085, 0.123425, 0.18625, 0.0971, 0.037375, 0.0445, 0.1031, 0.0081, 0.169, 0.0481, 0.01185, 0.04585, 0.1423, 0.18615, 2.7898, 0.118275, 0.18615, 0.19125, 0.00305, 0.1035, 0.00665, 0.029025, 0.13445, 0.147475, 0.24515, 0.072, 0.072125, 0.15895, 0.0162, 0.14785, 0.005125, 0.2314, 0.22795, 0.070825]
    239.             },
    240.             {
    241.               "text": "Frequency Signal E",
    242.               "line-color": "#036",
    243.               "border-color": "#036",
    244.               "background-color": "#036",
    245.               "values": [0, 0.198625, 0.117175, 0.0574, 0.192925, 0.20415, 0.054, 0.051, 0.0631, 0.03455, 0.0339, 0.1756, 0.19745, 0.0029, 0.212175, 0.221075, 0.063075, 0.01065, 0.032425, 0.087, 4.2678, 0.201325, 0.086275, 0.207775, 0.138225, 0.16355, 0.163225, 0.080275, 0.06855, 0.05205, 0.1909, 0.202475, 0.158125, 0.241625, 0.088325, 0.014325, 0.213125, 0.0594, 0.061775, 0.093825, 1.2554, 0.162025, 0.111425, 0.134, 0.23245, 0.1409, 0.049975, 0.068025, 0.12455, 0.180275, 0.2253, 0.114925, 0.128525, 0.23495, 0.10605, 0.231425, 0.231025, 0.071375, 0.2133, 0.032775, 1.8766, 0.0052, 0.107775, 0.066425, 0.12715, 0.0434, 0.1038, 0.20895, 0.230925, 0.1794, 0.109475, 0.0854, 0.091425, 0.156825, 0.1059, 0.247425, 0.1059, 0.023825, 0.120025, 0.111025, 2.6764, 0.0406, 0.041425, 0.2013, 0.027525, 0.193025, 0.181525, 0.150725, 0.2349, 0.11445, 0.14445, 0.134725, 0.010475, 0.200025, 0.139625, 0.070925, 0.017775, 0.24175, 0.01185, 0.1457]
    246.             }
    247.           ]
    248.         }]
    249.       };
    250.  
    251.       zingchart.render({
    252.         id: 'myChart',
    253.         data: myConfig,
    254.         height: '100%',
    255.         width: '100%'
    256.       });
    257.     });
    258.   </script>
    259. </body>
    260.  
    261. </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.   <button onClick="toggleChartType();">Toggle Chart Type</button>
    13.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    14. </body>
    15.  
    16. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7.   background-color: #fff;
    8. }
    9.  
    10. #myChart {
    11.   height: 100%;
    12.   width: 100%;
    13.   min-height: 150px;
    14. }
    15.  
    16. .zc-ref {
    17.   display: none;
    18. }
    19.  
    20. button {
    21.   padding: 10px;
    22.   margin: 10px;
    23. }
    1. var currentChartType = 'line3d';
    2.  
    3. function toggleChartType() {
    4.   if (currentChartType === 'line3d') currentChartType = 'area3d';
    5.   else currentChartType = 'line3d';
    6.  
    7.   // use api to preserve zoom and set chart type
    8.   zingchart.exec('myChart', 'setcharttype', {
    9.     type: currentChartType,
    10.     'preserve-state': true
    11.   });
    12. }
    13.  
    14. // window:load event for Javascript to run after HTML
    15. // because this Javascript is injected into the document head
    16. window.addEventListener('load', () => {
    17.   // Javascript code to execute after DOM content
    18.  
    19.   var myConfig = {
    20.     "graphset": [{
    21.       "3d-aspect": {
    22.         "zoom": 0.7,
    23.         "offset-x": -150,
    24.         "x-angle": -25,
    25.         "y-angle": -25,
    26.         "z-angle": 0,
    27.         "depth": 400
    28.       },
    29.       "globals": {
    30.         "font-family": "Lucida Sans Unicode"
    31.       },
    32.       "type": "line3d",
    33.       "plotarea": {
    34.         "margin": "50 0 250 0"
    35.       },
    36.       preview: {
    37.         mask: {
    38.           backgroundColor: '#1565c0'
    39.         }
    40.       },
    41.       "scaleX": {
    42.         "zooming": true,
    43.         "normalize": true,
    44.         "max-items": 9,
    45.         "background-color": "#fff",
    46.         "guide": {
    47.           "visible": true
    48.         },
    49.         "tick": {
    50.           "line-width": 1,
    51.           "line-color": "#000",
    52.           "visible": true,
    53.           "size": 10
    54.         },
    55.         "item": {
    56.           "padding": 10,
    57.           "angle": 0,
    58.           "lock-rotation": true
    59.         },
    60.         "axis": {
    61.           "line-width": 4,
    62.           "line-color": "#000"
    63.         },
    64.         "label": {
    65.           "font-size": 12,
    66.           "text": "f(Hz)"
    67.         }
    68.       },
    69.       "scaleY": {
    70.         "values": "0:6:1",
    71.         "background-color": "#fff",
    72.         "tick": {
    73.           "line-width": 1,
    74.           "line-color": "#000",
    75.           "visible": true,
    76.           "size": 10
    77.         },
    78.         "guide": {
    79.           "visible": true
    80.         },
    81.         "axis": {
    82.           "line-width": 4,
    83.           "line-color": "#000"
    84.         },
    85.         "item": {
    86.           "padding": 10,
    87.           "angle": 0,
    88.           "lock-rotation": true
    89.         },
    90.         "label": {
    91.           "font-size": 12,
    92.           "text": "A(mm/s)"
    93.         }
    94.       },
    95.       "scaleZ": {
    96.         "axis": {
    97.           "line-color": "#000",
    98.           "line-width": 2
    99.         },
    100.         "values": ["10-10-09", "10-12-09", "11-01-13", "11-03-08", "11-06-09", "11-07-06"],
    101.         "guide": {
    102.           "visible": true
    103.         },
    104.         "item": {
    105.           "lock-rotation": true,
    106.           "font-size": 10,
    107.           "auto-align": true
    108.         },
    109.         "label": {
    110.           "font-size": 12,
    111.           "font-weight": "bold",
    112.           "text": "Sample"
    113.         },
    114.         "tick": {
    115.           "line-color": "#000",
    116.           "size": 10
    117.         }
    118.       },
    119.       "plot": {
    120.         "depth": 1,
    121.       },
    122.       "labels": [{
    123.           "id": "flag_1",
    124.           "text": "A",
    125.           "hook": "node:plot=3,index=20",
    126.           "3d": true,
    127.           "background-color": "#eee",
    128.           "width": 25,
    129.           "height": 25,
    130.           "font-weight": "bold",
    131.           "border-radius": 9,
    132.           "callout": true,
    133.           "callout-position": "bottom",
    134.           "callout-height": 1,
    135.           "callout-extension": 20,
    136.           "offset-y": -35,
    137.           "anchor": "c",
    138.           "border-width": 1,
    139.           "border-color": "#999"
    140.         },
    141.         {
    142.           "id": "flag_2",
    143.           "text": "B",
    144.           "hook": "node:plot=5,index=40",
    145.           "3d": true,
    146.           "background-color": "#eee",
    147.           "width": 25,
    148.           "height": 25,
    149.           "padding-left": 8,
    150.           "font-weight": "bold",
    151.           "border-radius": "-12 3 0 -12",
    152.           "callout": true,
    153.           "callout-position": "bottom",
    154.           "callout-offset": "0% 48%",
    155.           "callout-height": 1,
    156.           "callout-width": 0,
    157.           "callout-extension": 20,
    158.           "offset-y": -35,
    159.           "offset-x": -10,
    160.           "anchor": "c",
    161.           "border-width": 1,
    162.           "border-color": "#999"
    163.         }
    164.       ],
    165.       "series": [{
    166.           "text": "Frequency Signal A",
    167.           "line-color": "#036",
    168.           "border-color": "#036",
    169.           "background-color": "#036",
    170.           "values": [0, 0.240125, 0.241725, 0.116675, 0.0817, 0.057025, 0.13415, 0.19035, 0.05725, 0.15895, 0.239125, 0.216425, 0.157075, 0.17205, 0.1821, 0.21815, 0.22315, 0.1023, 0.06555, 0.028275, 5.0076, 0.04225, 0.112325, 0.16975, 0.04685, 0.06275, 0.203125, 0.18285, 0.247725, 0.090175, 0.186875, 0.10225, 0.0446, 0.029925, 0.2173, 0.04345, 0.167125, 0.066925, 0.1486, 0.14975, 2.9928, 0.05105, 0.013525, 0.188475, 0.059925, 0.0501, 0.2203, 0.127825, 0.22935, 0.0308, 0.24365, 0.10705, 0.145275, 0.02725, 0.066425, 0.084275, 0.0222, 0.0272, 0.19085, 0.18555, 1.799, 0.184525, 0.129525, 0.12895, 0.184125, 0.1376, 0.23655, 0.143875, 0.009575, 0.194675, 0.0748, 0.0327, 0.04325, 0.189625, 0.23765, 0.180925, 0.02745, 0.241725, 0.14705, 0.23445, 1.9782, 0.147925, 0.10615, 0.00585, 0.01825, 0.0238, 0.162575, 0.100725, 0.089, 0.059125, 0.1054, 0.115275, 0.0861, 0.1532, 0.08395, 0.1783, 0.04565, 0.196425, 0.139725, 0.09185]
    171.         },
    172.         {
    173.           "text": "Frequency Signal B",
    174.           "line-color": "#036",
    175.           "border-color": "#036",
    176.           "background-color": "#036",
    177.           "values": [0, 0.04765, 0.229675, 0.164325, 0.12305, 0.0493, 0.141775, 0.2385, 0.0663, 0.220425, 0.08605, 0.09045, 0.183275, 0.06865, 0.182825, 0.0192, 0.219475, 0.2252, 0.0239, 0.050675, 4.857, 0.092725, 0.081775, 0.033225, 0.025325, 0.08295, 0.025025, 0.1374, 0.140425, 0.03755, 0.049925, 0.0699, 0.030725, 0.0615, 0.042175, 0.031625, 0.2007, 0.21435, 0.20495, 0.033375, 1.9042, 0.039025, 0.061325, 0.09985, 0.184075, 0.048875, 0.2033, 0.171375, 0.2224, 0.08285, 0.134425, 0.00305, 0.037225, 0.172125, 0.1231, 0.0902, 0.13445, 0.00895, 0.1412, 0.157325, 2.354, 0.06535, 0.057075, 0.126775, 0.2422, 0.041075, 0.0262, 0.064525, 0.128275, 0.0285, 0.111325, 0.145575, 0.080825, 0.218425, 0.101975, 0.051125, 0.072175, 0.132775, 0.184625, 0.2246, 2.5586, 0.032825, 0.1001, 0.2146, 0.1053, 0.127025, 0.111125, 0.131675, 0.0935, 0.133175, 0.0289, 0.0611, 0.200375, 0.114525, 0.165425, 0.227125, 0.1268, 0.0472, 0.140275, 0.0521]
    178.         },
    179.         {
    180.           "text": "Frequency Signal C",
    181.           "line-color": "#036",
    182.           "border-color": "#036",
    183.           "background-color": "#036",
    184.           "values": [0, 0.12305, 0.1833, 0.00445, 0.08415, 0.211225, 0.097975, 0.031375, 0.24065, 0.1191, 0.0094, 0.172625, 0.153175, 0.085875, 0.106925, 0.17615, 0.07465, 0.16105, 0.014925, 0.1509, 4.3374, 0.077775, 0.052025, 0.061075, 0.1103, 0.159525, 0.0052, 0.0807, 0.068, 0.219, 0.0362, 0.1607, 0.23825, 0.168575, 0.2387, 0.229625, 0.14505, 0.075625, 0.190125, 0.008925, 2.6576, 0.172, 0.20855, 0.212825, 0.185975, 0.2214, 0.136075, 0.0746, 0.166825, 0.013575, 0.122525, 0.23895, 0.163, 0.186225, 0.15285, 0.16025, 0.07105, 0.153575, 0.02615, 0.061925, 2.8376, 0.029475, 0.037175, 0.12175, 0.12565, 0.120075, 0.11425, 0.158925, 0.11185, 0.171525, 0.029775, 0.122725, 0.00385, 0.0244, 0.153325, 0.21345, 0.02525, 0.18665, 0.0009, 0.057275, 2.299, 0.07925, 0.00425, 0.1762, 0.1591, 0.102525, 0.1949, 0.077925, 0.182925, 0.208, 0.16595, 0.192125, 0.1543, 0.16915, 0.02085, 0.16885, 0.0172, 0.068525, 0.2043, 0.0178]
    185.         },
    186.         {
    187.           "text": "Frequency Signal D",
    188.           "line-color": "#036",
    189.           "border-color": "#036",
    190.           "background-color": "#036",
    191.           "values": [0, 0.061125, 0.23525, 0.122625, 0.01135, 0.2079, 0.046675, 0.030775, 0.1752, 0.1649, 0.109075, 0.211675, 0.1891, 0.179575, 0.176075, 0.127275, 0.17245, 0.0756, 0.11785, 0.18145, 5.4432, 0.16135, 0.014525, 0.20245, 0.1938, 0.05945, 0.24555, 0.1326, 0.142275, 0.1019, 0.2457, 0.19145, 0.210175, 0.2021, 0.076725, 0.094725, 0.1455, 0.110525, 0.04735, 0.249475, 1.2322, 0.0374, 0.125025, 0.094525, 0.1704, 0.234975, 0.052575, 0.06755, 0.173025, 0.194125, 0.206275, 0.10265, 0.056875, 0.064475, 0.027625, 0.1289, 0.01435, 0.171275, 0.06275, 0.1186, 1.7792, 0.239825, 0.073475, 0.223375, 0.22615, 0.1011, 0.2384, 0.104725, 0.21935, 0.2401, 0.179525, 0.0215, 0.129125, 0.0091, 0.197925, 0.1963, 0.012725, 0.1605, 0.22295, 0.0698, 2.91, 0.21635, 0.2494, 0.21185, 0.078975, 0.17825, 0.009875, 0.22355, 0.000275, 0.185325, 0.230325, 0.12315, 0.2281, 0.030175, 0.032625, 0.1834, 0.16355, 0.248475, 0.05535, 0.178025]
    192.         },
    193.         {
    194.           "text": "Frequency Signal E",
    195.           "line-color": "#036",
    196.           "border-color": "#036",
    197.           "background-color": "#036",
    198.           "values": [0, 0.141425, 0.153125, 0.080475, 0.056425, 0.162025, 0.1762, 0.21255, 0.19945, 0.156025, 0.173375, 0.11865, 0.145325, 0.06465, 0.115475, 0.2294, 0.1944, 0.24305, 0.123425, 0.145375, 5.2707999999999995, 0.10995, 0.237825, 0.188125, 0.158125, 0.0246, 0.1739, 0.104325, 0.13385, 0.14455, 0.180725, 0.098125, 0.011125, 0.04875, 0.057875, 0.0632, 0.225825, 0.118275, 0.067375, 0.064525, 2.1844, 0.0782, 0.03325, 0.10585, 0.014225, 0.210675, 0.07355, 0.233825, 0.161175, 0.153975, 0.070975, 0.179025, 0.1047, 0.199375, 0.178725, 0.06565, 0.010325, 0.051925, 0.0583, 0.154875, 1.613, 0.034625, 0.00565, 0.072925, 0.13185, 0.199275, 0.05085, 0.123425, 0.18625, 0.0971, 0.037375, 0.0445, 0.1031, 0.0081, 0.169, 0.0481, 0.01185, 0.04585, 0.1423, 0.18615, 2.7898, 0.118275, 0.18615, 0.19125, 0.00305, 0.1035, 0.00665, 0.029025, 0.13445, 0.147475, 0.24515, 0.072, 0.072125, 0.15895, 0.0162, 0.14785, 0.005125, 0.2314, 0.22795, 0.070825]
    199.         },
    200.         {
    201.           "text": "Frequency Signal E",
    202.           "line-color": "#036",
    203.           "border-color": "#036",
    204.           "background-color": "#036",
    205.           "values": [0, 0.198625, 0.117175, 0.0574, 0.192925, 0.20415, 0.054, 0.051, 0.0631, 0.03455, 0.0339, 0.1756, 0.19745, 0.0029, 0.212175, 0.221075, 0.063075, 0.01065, 0.032425, 0.087, 4.2678, 0.201325, 0.086275, 0.207775, 0.138225, 0.16355, 0.163225, 0.080275, 0.06855, 0.05205, 0.1909, 0.202475, 0.158125, 0.241625, 0.088325, 0.014325, 0.213125, 0.0594, 0.061775, 0.093825, 1.2554, 0.162025, 0.111425, 0.134, 0.23245, 0.1409, 0.049975, 0.068025, 0.12455, 0.180275, 0.2253, 0.114925, 0.128525, 0.23495, 0.10605, 0.231425, 0.231025, 0.071375, 0.2133, 0.032775, 1.8766, 0.0052, 0.107775, 0.066425, 0.12715, 0.0434, 0.1038, 0.20895, 0.230925, 0.1794, 0.109475, 0.0854, 0.091425, 0.156825, 0.1059, 0.247425, 0.1059, 0.023825, 0.120025, 0.111025, 2.6764, 0.0406, 0.041425, 0.2013, 0.027525, 0.193025, 0.181525, 0.150725, 0.2349, 0.11445, 0.14445, 0.134725, 0.010475, 0.200025, 0.139625, 0.070925, 0.017775, 0.24175, 0.01185, 0.1457]
    206.         }
    207.       ]
    208.     }]
    209.   };
    210.  
    211.   zingchart.render({
    212.     id: 'myChart',
    213.     data: myConfig,
    214.     height: '100%',
    215.     width: '100%'
    216.   });
    217. });