• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href='//www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style>
    11.     html,
    12.     body {
    13.       height: 100%;
    14.       width: 100%;
    15.       margin-left: 10;
    16.       padding: 0;
    17.     }
    18.  
    19.     #myChart {
    20.       height: 100%;
    21.       width: 100%;
    22.       min-height: 150px;
    23.       transform: matrix(2, 0, 0, 2, 800, 35);
    24.     }
    25.  
    26.     .zc-ref {
    27.       display: none;
    28.     }
    29.   </style>
    30. </head>
    31.  
    32. <body>
    33.   <div id="parentDiv">
    34.     <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    35.   </div>
    36.   <script>
    37.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    38.     var myConfig = {
    39.       type: 'line',
    40.       backgroundColor: '#2C2C39',
    41.       title: {
    42.         text: 'Time Series Data with null values',
    43.         adjustLayout: true,
    44.         fontColor: "#E3E3E5",
    45.         marginTop: 7
    46.       },
    47.       legend: {
    48.         align: 'center',
    49.         verticalAlign: 'top',
    50.         backgroundColor: 'none',
    51.         borderWidth: 0,
    52.         item: {
    53.           fontColor: '#E3E3E5',
    54.           cursor: 'hand'
    55.         },
    56.         marker: {
    57.           type: 'circle',
    58.           borderWidth: 0,
    59.           cursor: 'hand'
    60.         }
    61.       },
    62.       plotarea: {
    63.         margin: 'dynamic 70'
    64.       },
    65.       plot: {
    66.         aspect: 'spline',
    67.         lineWidth: 2,
    68.         marker: {
    69.           borderWidth: 0,
    70.           size: 5
    71.         }
    72.       },
    73.       scaleX: {
    74.         lineColor: '#E3E3E5',
    75.         zooming: true,
    76.         zoomTo: [0, 15],
    77.         minValue: 1459468800000,
    78.         step: 'day',
    79.         item: {
    80.           fontColor: '#E3E3E5'
    81.         },
    82.         transform: {
    83.           type: 'date',
    84.           all: '%D %M %d<br>%h:%i:%s'
    85.         }
    86.       },
    87.       scaleY: {
    88.         minorTicks: 1,
    89.         lineColor: '#E3E3E5',
    90.         tick: {
    91.           lineColor: '#E3E3E5'
    92.         },
    93.         minorTick: {
    94.           lineColor: '#E3E3E5'
    95.         },
    96.         minorGuide: {
    97.           visible: true,
    98.           lineWidth: 1,
    99.           lineColor: '#E3E3E5',
    100.           alpha: 0.7,
    101.           lineStyle: 'dashed'
    102.         },
    103.         guide: {
    104.           lineStyle: 'dashed'
    105.         },
    106.         item: {
    107.           fontColor: '#E3E3E5'
    108.         }
    109.       },
    110.       tooltip: {
    111.         borderWidth: 0,
    112.         borderRadius: 3
    113.       },
    114.       preview: {
    115.         adjustLayout: true,
    116.         borderColor: '#E3E3E5',
    117.         mask: {
    118.           backgroundColor: '#E3E3E5'
    119.         }
    120.       },
    121.       crosshairX: {
    122.         plotLabel: {
    123.           multiple: true,
    124.           borderRadius: 3
    125.         },
    126.         scaleLabel: {
    127.           backgroundColor: '#53535e',
    128.           borderRadius: 3
    129.         },
    130.         marker: {
    131.           size: 7,
    132.           alpha: 0.5
    133.         }
    134.       },
    135.       crosshairY: {
    136.         lineColor: '#E3E3E5',
    137.         type: 'multiple',
    138.         scaleLabel: {
    139.           decimals: 2,
    140.           borderRadius: 3,
    141.           offsetX: -5,
    142.           fontColor: "#2C2C39",
    143.           bold: true
    144.         }
    145.       },
    146.       shapes: [{
    147.         type: 'rectangle',
    148.         id: 'view_all',
    149.         height: '20px',
    150.         width: '75px',
    151.         borderColor: '#E3E3E5',
    152.         borderWidth: 1,
    153.         borderRadius: 3,
    154.         x: '85%',
    155.         y: '11%',
    156.         backgroundColor: '#53535e',
    157.         cursor: 'hand',
    158.         label: {
    159.           text: 'View All',
    160.           fontColor: '#E3E3E5',
    161.           fontSize: 12,
    162.           bold: true
    163.         }
    164.       }],
    165.       series: [{
    166.           values: [218.92, 212.85, 241.95, 200.76, 203.87, 245.26, 249.9, 240.05, 241.8, 251.4, 230.06, null, null, 203.04, 229.05, 232.37, 190.89, 236.63, 249.18, 188.98, 194.06, 234.61, 241.91, 196.4, 191.87, 213.5, 194.83, 228.48, 235.66, 235.04, 195.74, 243.04, null, 197.51, 232.64, 238.99, 227.8, 235.81, 221.7, 193.46, 252.64, 205.35, 248.52, 218.32, 188.55],
    167.           lineColor: '#E34247',
    168.           marker: {
    169.             backgroundColor: '#E34247'
    170.           }
    171.         },
    172.         {
    173.           values: [165.57, 170.47, 197.17, 164.64, 132.73, 176.89, 139.41, 158.71, 177.85, 138.87, 135.74, 167.06, 156.42, 182, 169.73, 151.08, 165.58, 146.29, 124.5, 181.71, 143.96, null, null, null, 146, 172.6, 149.81, 161.09, 175.88, 149.39, 184.1, 123.85, 186.82, 139.72, 138.61, 170.28, 164.06, 184.33, null, null, 131.85, 133.32, 134.49, 143.79, 125.23],
    174.           lineColor: '#FEB32E',
    175.           marker: {
    176.             backgroundColor: '#FEB32E'
    177.           }
    178.         },
    179.         {
    180.           values: [70.19, 96.56, 75.04, 51.58, 82.8, 68.14, 89.61, null, 45.33, 98.59, 92.9, 66.94, null, 74.08, 57.25, 79.68, 89.66, 64.56, 96.59, 79.96, 98.08, 42.93, 91.93, 56.23, 82.66, null, 85.76, 74.98, 51, 66.99, 63.02, 63.8, 44.33, 77.56, 95.28, 60.93, 59.6, 80.58, 68.51, 67.63, 69.76, 40.54, 78.42, 90.4, 82.3],
    181.           lineColor: '#31A59A',
    182.           marker: {
    183.             backgroundColor: '#31A59A'
    184.           }
    185.         }
    186.       ]
    187.     };
    188.  
    189.     zingchart.bind('myChart', 'shape_click', function(e) {
    190.       if (e.shapeid == "view_all") {
    191.         zingchart.exec(e.id, 'viewall');
    192.       }
    193.     });
    194.  
    195.  
    196.     zingchart.render({
    197.       id: 'myChart',
    198.       data: myConfig,
    199.       height: '500',
    200.       width: '725'
    201.     });
    202.   </script>
    203. </body>
    204.  
    205. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href='//www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <div id="parentDiv">
    14.     <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    15.   </div>
    16. </body>
    17.  
    18. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin-left: 10;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13.   transform: matrix(2, 0, 0, 2, 800, 35);
    14. }
    15.  
    16. .zc-ref {
    17.   display: none;
    18. }
    1. var myConfig = {
    2.   type: 'line',
    3.   backgroundColor: '#2C2C39',
    4.   title: {
    5.     text: 'Time Series Data with null values',
    6.     adjustLayout: true,
    7.     fontColor: "#E3E3E5",
    8.     marginTop: 7
    9.   },
    10.   legend: {
    11.     align: 'center',
    12.     verticalAlign: 'top',
    13.     backgroundColor: 'none',
    14.     borderWidth: 0,
    15.     item: {
    16.       fontColor: '#E3E3E5',
    17.       cursor: 'hand'
    18.     },
    19.     marker: {
    20.       type: 'circle',
    21.       borderWidth: 0,
    22.       cursor: 'hand'
    23.     }
    24.   },
    25.   plotarea: {
    26.     margin: 'dynamic 70'
    27.   },
    28.   plot: {
    29.     aspect: 'spline',
    30.     lineWidth: 2,
    31.     marker: {
    32.       borderWidth: 0,
    33.       size: 5
    34.     }
    35.   },
    36.   scaleX: {
    37.     lineColor: '#E3E3E5',
    38.     zooming: true,
    39.     zoomTo: [0, 15],
    40.     minValue: 1459468800000,
    41.     step: 'day',
    42.     item: {
    43.       fontColor: '#E3E3E5'
    44.     },
    45.     transform: {
    46.       type: 'date',
    47.       all: '%D %M %d<br>%h:%i:%s'
    48.     }
    49.   },
    50.   scaleY: {
    51.     minorTicks: 1,
    52.     lineColor: '#E3E3E5',
    53.     tick: {
    54.       lineColor: '#E3E3E5'
    55.     },
    56.     minorTick: {
    57.       lineColor: '#E3E3E5'
    58.     },
    59.     minorGuide: {
    60.       visible: true,
    61.       lineWidth: 1,
    62.       lineColor: '#E3E3E5',
    63.       alpha: 0.7,
    64.       lineStyle: 'dashed'
    65.     },
    66.     guide: {
    67.       lineStyle: 'dashed'
    68.     },
    69.     item: {
    70.       fontColor: '#E3E3E5'
    71.     }
    72.   },
    73.   tooltip: {
    74.     borderWidth: 0,
    75.     borderRadius: 3
    76.   },
    77.   preview: {
    78.     adjustLayout: true,
    79.     borderColor: '#E3E3E5',
    80.     mask: {
    81.       backgroundColor: '#E3E3E5'
    82.     }
    83.   },
    84.   crosshairX: {
    85.     plotLabel: {
    86.       multiple: true,
    87.       borderRadius: 3
    88.     },
    89.     scaleLabel: {
    90.       backgroundColor: '#53535e',
    91.       borderRadius: 3
    92.     },
    93.     marker: {
    94.       size: 7,
    95.       alpha: 0.5
    96.     }
    97.   },
    98.   crosshairY: {
    99.     lineColor: '#E3E3E5',
    100.     type: 'multiple',
    101.     scaleLabel: {
    102.       decimals: 2,
    103.       borderRadius: 3,
    104.       offsetX: -5,
    105.       fontColor: "#2C2C39",
    106.       bold: true
    107.     }
    108.   },
    109.   shapes: [{
    110.     type: 'rectangle',
    111.     id: 'view_all',
    112.     height: '20px',
    113.     width: '75px',
    114.     borderColor: '#E3E3E5',
    115.     borderWidth: 1,
    116.     borderRadius: 3,
    117.     x: '85%',
    118.     y: '11%',
    119.     backgroundColor: '#53535e',
    120.     cursor: 'hand',
    121.     label: {
    122.       text: 'View All',
    123.       fontColor: '#E3E3E5',
    124.       fontSize: 12,
    125.       bold: true
    126.     }
    127.   }],
    128.   series: [{
    129.       values: [218.92, 212.85, 241.95, 200.76, 203.87, 245.26, 249.9, 240.05, 241.8, 251.4, 230.06, null, null, 203.04, 229.05, 232.37, 190.89, 236.63, 249.18, 188.98, 194.06, 234.61, 241.91, 196.4, 191.87, 213.5, 194.83, 228.48, 235.66, 235.04, 195.74, 243.04, null, 197.51, 232.64, 238.99, 227.8, 235.81, 221.7, 193.46, 252.64, 205.35, 248.52, 218.32, 188.55],
    130.       lineColor: '#E34247',
    131.       marker: {
    132.         backgroundColor: '#E34247'
    133.       }
    134.     },
    135.     {
    136.       values: [165.57, 170.47, 197.17, 164.64, 132.73, 176.89, 139.41, 158.71, 177.85, 138.87, 135.74, 167.06, 156.42, 182, 169.73, 151.08, 165.58, 146.29, 124.5, 181.71, 143.96, null, null, null, 146, 172.6, 149.81, 161.09, 175.88, 149.39, 184.1, 123.85, 186.82, 139.72, 138.61, 170.28, 164.06, 184.33, null, null, 131.85, 133.32, 134.49, 143.79, 125.23],
    137.       lineColor: '#FEB32E',
    138.       marker: {
    139.         backgroundColor: '#FEB32E'
    140.       }
    141.     },
    142.     {
    143.       values: [70.19, 96.56, 75.04, 51.58, 82.8, 68.14, 89.61, null, 45.33, 98.59, 92.9, 66.94, null, 74.08, 57.25, 79.68, 89.66, 64.56, 96.59, 79.96, 98.08, 42.93, 91.93, 56.23, 82.66, null, 85.76, 74.98, 51, 66.99, 63.02, 63.8, 44.33, 77.56, 95.28, 60.93, 59.6, 80.58, 68.51, 67.63, 69.76, 40.54, 78.42, 90.4, 82.3],
    144.       lineColor: '#31A59A',
    145.       marker: {
    146.         backgroundColor: '#31A59A'
    147.       }
    148.     }
    149.   ]
    150. };
    151.  
    152. zingchart.bind('myChart', 'shape_click', function(e) {
    153.   if (e.shapeid == "view_all") {
    154.     zingchart.exec(e.id, 'viewall');
    155.   }
    156. });
    157.  
    158.  
    159. zingchart.render({
    160.   id: 'myChart',
    161.   data: myConfig,
    162.   height: '500',
    163.   width: '725'
    164. });