• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="Ets7460rsnzRc+hnxSZKQA==" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        @import 'https://fonts.googleapis.com/css?family=Montserrat';
        @import 'https://fonts.googleapis.com/css?family=Lato:400';
        html,
        body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
    
        .chart--container {
          min-height: 150px;
          width: 100%;
          height: 100%;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
      <script nonce="Ets7460rsnzRc+hnxSZKQA==">
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myTheme = {
          palette: {
            line: [
              ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */
              ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */
              ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */
              ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */
              ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */
              ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */
            ]
          },
          graph: {
            backgroundColor: '#FBFCFE',
            title: {
              fontFamily: 'Lato',
              fontSize: 14,
              // border: "1px solid black",
              padding: "15",
              fontColor: "#1E5D9E",
              adjustLayout: true
            },
            subtitle: {
              fontFamily: 'Lato',
              fontSize: 12,
              fontColor: "#777",
              padding: "5"
            },
            plot: {
              backgroundColor: '#FBFCFE',
              marker: {
                size: 4
              }
            },
            tooltip: {
              visible: true,
              text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
              backgroundColor: "white",
              borderColor: "#e3e3e3",
              borderRadius: "5px",
              bold: true,
              fontSize: "12px",
              fontColor: "#2f2f2f",
              textAlign: 'left',
              padding: '15px',
              shadow: true,
              shadowAlpha: 0.2,
              shadowBlur: 5,
              shadowDistance: 4,
              shadowColor: "#a1a1a1"
            },
            plotarea: {
              backgroundColor: 'transparent',
              borderRadius: "0 0 0 10",
              borderRight: "0px",
              borderTop: "0px",
              margin: "dynamic",
              borderLeft: '1px solid #1E5D9E',
              borderBottom: '1px solid #1E5D9E',
            },
            scaleX: {
              zooming: true,
              offsetY: -20,
              lineWidth: 0,
              padding: 20,
              margin: 20,
              label: {
                text: "Scale-X"
              },
              item: {
                padding: 5,
                fontColor: "#1E5D9E",
                fontFamily: 'Montserrat',
                rules: [{
                  rule: "%i == 0",
                  visible: false
                }]
              },
              tick: {
                lineColor: '#D1D3D4',
                rules: [{
                  rule: "%i == 0",
                  visible: false
                }]
              },
              guide: {
                visible: true,
                lineColor: '#D7D8D9',
                lineStyle: 'dotted',
                lineGapSize: '4px',
                rules: [{
                  rule: "%i == 0",
                  visible: false
                }]
              }
            },
            scaleY: {
              zooming: true,
              lineWidth: 0,
              label: {
                text: "Scale-Y"
              },
              item: {
                padding: "0 10 0 0",
                fontColor: "#1E5D9E",
                fontFamily: 'Montserrat',
                rules: [{
                  rule: "%i == 0",
                  offsetX: 10,
                  offsetY: 10,
                  backgroundColor: 'none'
                }]
              },
              tick: {
                lineColor: '#D1D3D4',
                rules: [{
                  rule: "%i == 0",
                  visible: false
                }]
              },
              guide: {
                visible: true,
                lineColor: '#D7D8D9',
                lineStyle: 'dotted',
                lineGapSize: '4px',
                rules: [{
                  rule: "%i == 0",
                  visible: false
                }]
              }
            },
            scrollX: {
              bar: {
                backgroundColor: 'none',
                borderLeft: 'none',
                borderTop: 'none',
                borderBottom: 'none'
              },
              handle: {
                backgroundColor: '#1E5D9E',
                height: 5
              }
            },
            scrollY: {
              borderWidth: 0,
              bar: {
                backgroundColor: 'none',
                width: 14,
                borderLeft: 'none',
                borderTop: 'none',
                borderBottom: 'none'
              },
              handle: {
                borderWidth: 0,
                backgroundColor: '#1E5D9E',
                width: 5
              }
            },
            zoom: {
              backgroundColor: '#1E5D9E',
              alpha: .33,
              borderColor: '#000',
              borderWidth: 1
            },
            preview: {
              borderColor: '#1E5D9E',
              borderWidth: 1,
              adjustLayout: true,
              handle: {
                backgroundColor: '#1E5D9E',
                borderColor: '#1E5D9E'
              },
              mask: {
                backgroundColor: '#FFF',
                alpha: .95,
              }
            }
          }
        };
    
        var myConfig = {
          type: "line",
          title: {
            text: "Average requests Per Minute",
          },
          subtitle: {
            text: "06/10/16 - 06/23/16",
          },
          plotarea: {
            marginTop: 10,
            marginBottom: 80
          },
          scaleX: {
            zooming: true,
            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']
          },
          scaleY: {
            zooming: true,
          },
          preview: {},
          scrollX: {},
          scrollY: {},
          series: [{
              text: "Internal",
              values: [6, 6, 3.5, 4.5, 4.5, 4.5, 2.5, 4.5, 4.5, 5, 5, 4, 5, 5],
            },
            {
              text: "External",
              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],
            },
            {
              text: "Outbound",
              values: [2.5, 1.5, 1.5, 2.5, 1.5, 1.5, 1.5, 1, 1, 1, 1, 2, 2, 3],
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: {
            gui: {
              contextMenu: {
                button: {
                  visible: true,
                  lineColor: "#2D66A4",
                  backgroundColor: "#2D66A4"
                },
                gear: {
                  alpha: 1,
                  backgroundColor: "#2D66A4"
                },
                position: "right",
                backgroundColor: "#306EAA",
                /*sets background for entire contextMenu*/
                docked: true,
                item: {
                  backgroundColor: "#306EAA",
                  borderColor: "#306EAA",
                  borderWidth: 0,
                  fontFamily: "Lato",
                  color: "#fff"
                }
              }
            },
            graphset: [myConfig]
          },
          height: '100%',
          width: '100%',
          defaults: myTheme
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <!-- CHART CONTAINER -->
      <div id="myChart" class="chart--container">
        <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
      </div>
    </body>
    
    </html>
    @import 'https://fonts.googleapis.com/css?family=Montserrat';
    @import 'https://fonts.googleapis.com/css?family=Lato:400';
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    var myTheme = {
      palette: {
        line: [
          ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */
          ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */
          ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */
          ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */
          ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */
          ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */
        ]
      },
      graph: {
        backgroundColor: '#FBFCFE',
        title: {
          fontFamily: 'Lato',
          fontSize: 14,
          // border: "1px solid black",
          padding: "15",
          fontColor: "#1E5D9E",
          adjustLayout: true
        },
        subtitle: {
          fontFamily: 'Lato',
          fontSize: 12,
          fontColor: "#777",
          padding: "5"
        },
        plot: {
          backgroundColor: '#FBFCFE',
          marker: {
            size: 4
          }
        },
        tooltip: {
          visible: true,
          text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
          backgroundColor: "white",
          borderColor: "#e3e3e3",
          borderRadius: "5px",
          bold: true,
          fontSize: "12px",
          fontColor: "#2f2f2f",
          textAlign: 'left',
          padding: '15px',
          shadow: true,
          shadowAlpha: 0.2,
          shadowBlur: 5,
          shadowDistance: 4,
          shadowColor: "#a1a1a1"
        },
        plotarea: {
          backgroundColor: 'transparent',
          borderRadius: "0 0 0 10",
          borderRight: "0px",
          borderTop: "0px",
          margin: "dynamic",
          borderLeft: '1px solid #1E5D9E',
          borderBottom: '1px solid #1E5D9E',
        },
        scaleX: {
          zooming: true,
          offsetY: -20,
          lineWidth: 0,
          padding: 20,
          margin: 20,
          label: {
            text: "Scale-X"
          },
          item: {
            padding: 5,
            fontColor: "#1E5D9E",
            fontFamily: 'Montserrat',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          },
          tick: {
            lineColor: '#D1D3D4',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          },
          guide: {
            visible: true,
            lineColor: '#D7D8D9',
            lineStyle: 'dotted',
            lineGapSize: '4px',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          }
        },
        scaleY: {
          zooming: true,
          lineWidth: 0,
          label: {
            text: "Scale-Y"
          },
          item: {
            padding: "0 10 0 0",
            fontColor: "#1E5D9E",
            fontFamily: 'Montserrat',
            rules: [{
              rule: "%i == 0",
              offsetX: 10,
              offsetY: 10,
              backgroundColor: 'none'
            }]
          },
          tick: {
            lineColor: '#D1D3D4',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          },
          guide: {
            visible: true,
            lineColor: '#D7D8D9',
            lineStyle: 'dotted',
            lineGapSize: '4px',
            rules: [{
              rule: "%i == 0",
              visible: false
            }]
          }
        },
        scrollX: {
          bar: {
            backgroundColor: 'none',
            borderLeft: 'none',
            borderTop: 'none',
            borderBottom: 'none'
          },
          handle: {
            backgroundColor: '#1E5D9E',
            height: 5
          }
        },
        scrollY: {
          borderWidth: 0,
          bar: {
            backgroundColor: 'none',
            width: 14,
            borderLeft: 'none',
            borderTop: 'none',
            borderBottom: 'none'
          },
          handle: {
            borderWidth: 0,
            backgroundColor: '#1E5D9E',
            width: 5
          }
        },
        zoom: {
          backgroundColor: '#1E5D9E',
          alpha: .33,
          borderColor: '#000',
          borderWidth: 1
        },
        preview: {
          borderColor: '#1E5D9E',
          borderWidth: 1,
          adjustLayout: true,
          handle: {
            backgroundColor: '#1E5D9E',
            borderColor: '#1E5D9E'
          },
          mask: {
            backgroundColor: '#FFF',
            alpha: .95,
          }
        }
      }
    };
    
    var myConfig = {
      type: "line",
      title: {
        text: "Average requests Per Minute",
      },
      subtitle: {
        text: "06/10/16 - 06/23/16",
      },
      plotarea: {
        marginTop: 10,
        marginBottom: 80
      },
      scaleX: {
        zooming: true,
        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']
      },
      scaleY: {
        zooming: true,
      },
      preview: {},
      scrollX: {},
      scrollY: {},
      series: [{
          text: "Internal",
          values: [6, 6, 3.5, 4.5, 4.5, 4.5, 2.5, 4.5, 4.5, 5, 5, 4, 5, 5],
        },
        {
          text: "External",
          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],
        },
        {
          text: "Outbound",
          values: [2.5, 1.5, 1.5, 2.5, 1.5, 1.5, 1.5, 1, 1, 1, 1, 2, 2, 3],
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: {
        gui: {
          contextMenu: {
            button: {
              visible: true,
              lineColor: "#2D66A4",
              backgroundColor: "#2D66A4"
            },
            gear: {
              alpha: 1,
              backgroundColor: "#2D66A4"
            },
            position: "right",
            backgroundColor: "#306EAA",
            /*sets background for entire contextMenu*/
            docked: true,
            item: {
              backgroundColor: "#306EAA",
              borderColor: "#306EAA",
              borderWidth: 0,
              fontFamily: "Lato",
              color: "#fff"
            }
          }
        },
        graphset: [myConfig]
      },
      height: '100%',
      width: '100%',
      defaults: myTheme
    });