• 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.     @import 'https://fonts.googleapis.com/css?family=Montserrat';
    11.     @import 'https://fonts.googleapis.com/css?family=Lato:400';
    12.  
    13.  
    14.     html,
    15.     body {
    16.       margin: 0;
    17.       padding: 0;
    18.       width: 100%;
    19.       height: 100%;
    20.     }
    21.  
    22.     .chart--container {
    23.       min-height: 150px;
    24.       width: 100%;
    25.       height: 100%;
    26.     }
    27.  
    28.     .zc-ref {
    29.       display: none;
    30.     }
    31.   </style>
    32. </head>
    33.  
    34. <body>
    35.   <!-- CHART CONTAINER -->
    36.   <div id="myChart" class="chart--container">
    37.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    38.   </div>
    39.   <script>
    40.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    41.     var myTheme = {
    42.       palette: {
    43.         line: [
    44.           ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */
    45.           ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */
    46.           ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */
    47.           ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */
    48.           ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */
    49.           ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */
    50.         ]
    51.       },
    52.       graph: {
    53.         backgroundColor: '#FBFCFE',
    54.         title: {
    55.           fontFamily: 'Lato',
    56.           fontSize: 14,
    57.           // border: "1px solid black",
    58.           padding: "15",
    59.           fontColor: "#1E5D9E",
    60.           adjustLayout: true
    61.         },
    62.         subtitle: {
    63.           fontFamily: 'Lato',
    64.           fontSize: 12,
    65.           fontColor: "#777",
    66.           padding: "5"
    67.         },
    68.         plot: {
    69.           backgroundColor: '#FBFCFE',
    70.           marker: {
    71.             size: 4
    72.           }
    73.         },
    74.         tooltip: {
    75.           visible: true,
    76.           text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
    77.           backgroundColor: "white",
    78.           borderColor: "#e3e3e3",
    79.           borderRadius: "5px",
    80.           bold: true,
    81.           fontSize: "12px",
    82.           fontColor: "#2f2f2f",
    83.           textAlign: 'left',
    84.           padding: '15px',
    85.           shadow: true,
    86.           shadowAlpha: 0.2,
    87.           shadowBlur: 5,
    88.           shadowDistance: 4,
    89.           shadowColor: "#a1a1a1"
    90.         },
    91.         plotarea: {
    92.           backgroundColor: 'transparent',
    93.           borderRadius: "0 0 0 10",
    94.           borderRight: "0px",
    95.           borderTop: "0px",
    96.           margin: "dynamic",
    97.           borderLeft: '1px solid #1E5D9E',
    98.           borderBottom: '1px solid #1E5D9E',
    99.         },
    100.         scaleX: {
    101.           zooming: true,
    102.           offsetY: -20,
    103.           lineWidth: 0,
    104.           padding: 20,
    105.           margin: 20,
    106.           label: {
    107.             text: "Scale-X"
    108.           },
    109.           item: {
    110.             padding: 5,
    111.             fontColor: "#1E5D9E",
    112.             fontFamily: 'Montserrat',
    113.             rules: [{
    114.               rule: "%i == 0",
    115.               visible: false
    116.             }]
    117.           },
    118.           tick: {
    119.             lineColor: '#D1D3D4',
    120.             rules: [{
    121.               rule: "%i == 0",
    122.               visible: false
    123.             }]
    124.           },
    125.           guide: {
    126.             visible: true,
    127.             lineColor: '#D7D8D9',
    128.             lineStyle: 'dotted',
    129.             lineGapSize: '4px',
    130.             rules: [{
    131.               rule: "%i == 0",
    132.               visible: false
    133.             }]
    134.           }
    135.         },
    136.         scaleY: {
    137.           zooming: true,
    138.           lineWidth: 0,
    139.           label: {
    140.             text: "Scale-Y"
    141.           },
    142.           item: {
    143.             padding: "0 10 0 0",
    144.             fontColor: "#1E5D9E",
    145.             fontFamily: 'Montserrat',
    146.             rules: [{
    147.               rule: "%i == 0",
    148.               offsetX: 10,
    149.               offsetY: 10,
    150.               backgroundColor: 'none'
    151.             }]
    152.           },
    153.           tick: {
    154.             lineColor: '#D1D3D4',
    155.             rules: [{
    156.               rule: "%i == 0",
    157.               visible: false
    158.             }]
    159.           },
    160.           guide: {
    161.             visible: true,
    162.             lineColor: '#D7D8D9',
    163.             lineStyle: 'dotted',
    164.             lineGapSize: '4px',
    165.             rules: [{
    166.               rule: "%i == 0",
    167.               visible: false
    168.             }]
    169.           }
    170.         },
    171.         scrollX: {
    172.           bar: {
    173.             backgroundColor: 'none',
    174.             borderLeft: 'none',
    175.             borderTop: 'none',
    176.             borderBottom: 'none'
    177.           },
    178.           handle: {
    179.             backgroundColor: '#1E5D9E',
    180.             height: 5
    181.           }
    182.         },
    183.         scrollY: {
    184.           borderWidth: 0,
    185.           bar: {
    186.             backgroundColor: 'none',
    187.             width: 14,
    188.             borderLeft: 'none',
    189.             borderTop: 'none',
    190.             borderBottom: 'none'
    191.           },
    192.           handle: {
    193.             borderWidth: 0,
    194.             backgroundColor: '#1E5D9E',
    195.             width: 5
    196.           }
    197.         },
    198.         zoom: {
    199.           backgroundColor: '#1E5D9E',
    200.           alpha: .33,
    201.           borderColor: '#000',
    202.           borderWidth: 1
    203.         },
    204.         preview: {
    205.           borderColor: '#1E5D9E',
    206.           borderWidth: 1,
    207.           adjustLayout: true,
    208.           handle: {
    209.             backgroundColor: '#1E5D9E',
    210.             borderColor: '#1E5D9E'
    211.           },
    212.           mask: {
    213.             backgroundColor: '#FFF',
    214.             alpha: .95,
    215.           }
    216.         }
    217.       }
    218.     };
    219.  
    220.     var myConfig = {
    221.       type: "line",
    222.       title: {
    223.         text: "Average requests Per Minute",
    224.       },
    225.       subtitle: {
    226.         text: "06/10/16 - 06/23/16",
    227.       },
    228.       plotarea: {
    229.         marginTop: 10,
    230.         marginBottom: 80
    231.       },
    232.       scaleX: {
    233.         zooming: true,
    234.         labels: ['6/10', '6/11', '6/12', '6/13', '6/14', '6/15', '6/16', '6/17', '6/18', '6/19', '6/20', '6/21', '6/22', '6/23']
    235.       },
    236.       scaleY: {
    237.         zooming: true,
    238.       },
    239.       preview: {},
    240.       scrollX: {},
    241.       scrollY: {},
    242.       series: [{
    243.           text: "Internal",
    244.           values: [6, 6, 3.5, 4.5, 4.5, 4.5, 2.5, 4.5, 4.5, 5, 5, 4, 5, 5],
    245.         },
    246.         {
    247.           text: "External",
    248.           values: [4.5, 4.5, 3.5, 3.5, 3.5, 2.5, 3.5, 3.5, 2.5, 2.5, 2, 3, 3, 2],
    249.         },
    250.         {
    251.           text: "Outbound",
    252.           values: [2.5, 1.5, 1.5, 2.5, 1.5, 1.5, 1.5, 1, 1, 1, 1, 2, 2, 3],
    253.         }
    254.       ]
    255.     };
    256.  
    257.     zingchart.render({
    258.       id: 'myChart',
    259.       data: {
    260.         gui: {
    261.           contextMenu: {
    262.             button: {
    263.               visible: true,
    264.               lineColor: "#2D66A4",
    265.               backgroundColor: "#2D66A4"
    266.             },
    267.             gear: {
    268.               alpha: 1,
    269.               backgroundColor: "#2D66A4"
    270.             },
    271.             position: "right",
    272.             backgroundColor: "#306EAA",
    273.             /*sets background for entire contextMenu*/
    274.             docked: true,
    275.             item: {
    276.               backgroundColor: "#306EAA",
    277.               borderColor: "#306EAA",
    278.               borderWidth: 0,
    279.               fontFamily: "Lato",
    280.               color: "#fff"
    281.             }
    282.           }
    283.         },
    284.         graphset: [myConfig]
    285.       },
    286.       height: '100%',
    287.       width: '100%',
    288.       defaults: myTheme
    289.     });
    290.   </script>
    291. </body>
    292.  
    293. </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.   <!-- CHART CONTAINER -->
    13.   <div id="myChart" class="chart--container">
    14.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    15.   </div>
    16. </body>
    17.  
    18. </html>
    1. @import 'https://fonts.googleapis.com/css?family=Montserrat';
    2. @import 'https://fonts.googleapis.com/css?family=Lato:400';
    3.  
    4.  
    5. html,
    6. body {
    7.   margin: 0;
    8.   padding: 0;
    9.   width: 100%;
    10.   height: 100%;
    11. }
    12.  
    13. .chart--container {
    14.   min-height: 150px;
    15.   width: 100%;
    16.   height: 100%;
    17. }
    18.  
    19. .zc-ref {
    20.   display: none;
    21. }
    1. var myTheme = {
    2.   palette: {
    3.     line: [
    4.       ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */
    5.       ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */
    6.       ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */
    7.       ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */
    8.       ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */
    9.       ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */
    10.     ]
    11.   },
    12.   graph: {
    13.     backgroundColor: '#FBFCFE',
    14.     title: {
    15.       fontFamily: 'Lato',
    16.       fontSize: 14,
    17.       // border: "1px solid black",
    18.       padding: "15",
    19.       fontColor: "#1E5D9E",
    20.       adjustLayout: true
    21.     },
    22.     subtitle: {
    23.       fontFamily: 'Lato',
    24.       fontSize: 12,
    25.       fontColor: "#777",
    26.       padding: "5"
    27.     },
    28.     plot: {
    29.       backgroundColor: '#FBFCFE',
    30.       marker: {
    31.         size: 4
    32.       }
    33.     },
    34.     tooltip: {
    35.       visible: true,
    36.       text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
    37.       backgroundColor: "white",
    38.       borderColor: "#e3e3e3",
    39.       borderRadius: "5px",
    40.       bold: true,
    41.       fontSize: "12px",
    42.       fontColor: "#2f2f2f",
    43.       textAlign: 'left',
    44.       padding: '15px',
    45.       shadow: true,
    46.       shadowAlpha: 0.2,
    47.       shadowBlur: 5,
    48.       shadowDistance: 4,
    49.       shadowColor: "#a1a1a1"
    50.     },
    51.     plotarea: {
    52.       backgroundColor: 'transparent',
    53.       borderRadius: "0 0 0 10",
    54.       borderRight: "0px",
    55.       borderTop: "0px",
    56.       margin: "dynamic",
    57.       borderLeft: '1px solid #1E5D9E',
    58.       borderBottom: '1px solid #1E5D9E',
    59.     },
    60.     scaleX: {
    61.       zooming: true,
    62.       offsetY: -20,
    63.       lineWidth: 0,
    64.       padding: 20,
    65.       margin: 20,
    66.       label: {
    67.         text: "Scale-X"
    68.       },
    69.       item: {
    70.         padding: 5,
    71.         fontColor: "#1E5D9E",
    72.         fontFamily: 'Montserrat',
    73.         rules: [{
    74.           rule: "%i == 0",
    75.           visible: false
    76.         }]
    77.       },
    78.       tick: {
    79.         lineColor: '#D1D3D4',
    80.         rules: [{
    81.           rule: "%i == 0",
    82.           visible: false
    83.         }]
    84.       },
    85.       guide: {
    86.         visible: true,
    87.         lineColor: '#D7D8D9',
    88.         lineStyle: 'dotted',
    89.         lineGapSize: '4px',
    90.         rules: [{
    91.           rule: "%i == 0",
    92.           visible: false
    93.         }]
    94.       }
    95.     },
    96.     scaleY: {
    97.       zooming: true,
    98.       lineWidth: 0,
    99.       label: {
    100.         text: "Scale-Y"
    101.       },
    102.       item: {
    103.         padding: "0 10 0 0",
    104.         fontColor: "#1E5D9E",
    105.         fontFamily: 'Montserrat',
    106.         rules: [{
    107.           rule: "%i == 0",
    108.           offsetX: 10,
    109.           offsetY: 10,
    110.           backgroundColor: 'none'
    111.         }]
    112.       },
    113.       tick: {
    114.         lineColor: '#D1D3D4',
    115.         rules: [{
    116.           rule: "%i == 0",
    117.           visible: false
    118.         }]
    119.       },
    120.       guide: {
    121.         visible: true,
    122.         lineColor: '#D7D8D9',
    123.         lineStyle: 'dotted',
    124.         lineGapSize: '4px',
    125.         rules: [{
    126.           rule: "%i == 0",
    127.           visible: false
    128.         }]
    129.       }
    130.     },
    131.     scrollX: {
    132.       bar: {
    133.         backgroundColor: 'none',
    134.         borderLeft: 'none',
    135.         borderTop: 'none',
    136.         borderBottom: 'none'
    137.       },
    138.       handle: {
    139.         backgroundColor: '#1E5D9E',
    140.         height: 5
    141.       }
    142.     },
    143.     scrollY: {
    144.       borderWidth: 0,
    145.       bar: {
    146.         backgroundColor: 'none',
    147.         width: 14,
    148.         borderLeft: 'none',
    149.         borderTop: 'none',
    150.         borderBottom: 'none'
    151.       },
    152.       handle: {
    153.         borderWidth: 0,
    154.         backgroundColor: '#1E5D9E',
    155.         width: 5
    156.       }
    157.     },
    158.     zoom: {
    159.       backgroundColor: '#1E5D9E',
    160.       alpha: .33,
    161.       borderColor: '#000',
    162.       borderWidth: 1
    163.     },
    164.     preview: {
    165.       borderColor: '#1E5D9E',
    166.       borderWidth: 1,
    167.       adjustLayout: true,
    168.       handle: {
    169.         backgroundColor: '#1E5D9E',
    170.         borderColor: '#1E5D9E'
    171.       },
    172.       mask: {
    173.         backgroundColor: '#FFF',
    174.         alpha: .95,
    175.       }
    176.     }
    177.   }
    178. };
    179.  
    180. var myConfig = {
    181.   type: "line",
    182.   title: {
    183.     text: "Average requests Per Minute",
    184.   },
    185.   subtitle: {
    186.     text: "06/10/16 - 06/23/16",
    187.   },
    188.   plotarea: {
    189.     marginTop: 10,
    190.     marginBottom: 80
    191.   },
    192.   scaleX: {
    193.     zooming: true,
    194.     labels: ['6/10', '6/11', '6/12', '6/13', '6/14', '6/15', '6/16', '6/17', '6/18', '6/19', '6/20', '6/21', '6/22', '6/23']
    195.   },
    196.   scaleY: {
    197.     zooming: true,
    198.   },
    199.   preview: {},
    200.   scrollX: {},
    201.   scrollY: {},
    202.   series: [{
    203.       text: "Internal",
    204.       values: [6, 6, 3.5, 4.5, 4.5, 4.5, 2.5, 4.5, 4.5, 5, 5, 4, 5, 5],
    205.     },
    206.     {
    207.       text: "External",
    208.       values: [4.5, 4.5, 3.5, 3.5, 3.5, 2.5, 3.5, 3.5, 2.5, 2.5, 2, 3, 3, 2],
    209.     },
    210.     {
    211.       text: "Outbound",
    212.       values: [2.5, 1.5, 1.5, 2.5, 1.5, 1.5, 1.5, 1, 1, 1, 1, 2, 2, 3],
    213.     }
    214.   ]
    215. };
    216.  
    217. zingchart.render({
    218.   id: 'myChart',
    219.   data: {
    220.     gui: {
    221.       contextMenu: {
    222.         button: {
    223.           visible: true,
    224.           lineColor: "#2D66A4",
    225.           backgroundColor: "#2D66A4"
    226.         },
    227.         gear: {
    228.           alpha: 1,
    229.           backgroundColor: "#2D66A4"
    230.         },
    231.         position: "right",
    232.         backgroundColor: "#306EAA",
    233.         /*sets background for entire contextMenu*/
    234.         docked: true,
    235.         item: {
    236.           backgroundColor: "#306EAA",
    237.           borderColor: "#306EAA",
    238.           borderWidth: 0,
    239.           fontFamily: "Lato",
    240.           color: "#fff"
    241.         }
    242.       }
    243.     },
    244.     graphset: [myConfig]
    245.   },
    246.   height: '100%',
    247.   width: '100%',
    248.   defaults: myTheme
    249. });