• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
      <script nonce="undefined" src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
      <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .container {
          width: 400px;
          height: 200px;
          min-width: 400px;
          border: 1px dashed #777;
        }
    
        #myChart {
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    
    <body>
      <div class='container'>
        <div id='myChart'></div>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          type: 'area',
          scaleX: {
            labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
            item: {
              fontSize: 10
            }
          },
          scaleY: {
            item: {
              fontSize: 10
            },
            guide: {
              lineStyle: 'dotted'
            }
          },
          plotarea: {
            adjustLayout: true
          },
          plot: {
            animation: {
              effect: 10,
              method: 0,
              sequence: 1,
              speed: 1
            },
            tooltip: {
              text: '%t: %v',
              borderRadius: '3px'
            },
            aspect: 'spline',
            marker: {
              size: 3,
              borderWidth: 0
            }
          },
          series: [{
              values: [31, 66, 35, 33, 59, 61, 55],
              lineColor: '#cc0052',
              backgroundColor: '#cc0052',
              marker: {
                backgroundColor: '#cc0052'
              },
              mediaRules: [{
                  maxWidth: 500,
                  lineWidth: 1,
                  lineColor: '#006622',
                  backgroundColor: '#cc0052 #006622',
                  marker: {
                    size: 2,
                    backgroundColor: '#cc0052'
                  },
                  tooltip: {
                    text: '%t:<br>%v'
                  }
                },
                {
                  maxWidth: 300,
                  lineColor: '#006622',
                  backgroundColor: '#006622',
                  marker: {
                    visible: false
                  },
                  tooltip: {
                    text: '%v'
                  }
                }
              ]
            },
            {
              values: [40, 49, 15, 21, 70, 51, 69],
              lineColor: '#e6005c',
              backgroundColor: '#e6005c',
              marker: {
                backgroundColor: '#e6005c'
              },
              mediaRules: [{
                  maxWidth: 500,
                  lineWidth: 1,
                  lineColor: '#00802b',
                  backgroundColor: '#e6005c #00802b',
                  marker: {
                    size: 2,
                    backgroundColor: '#e6005c'
                  },
                  tooltip: {
                    text: '%t:<br>%v'
                  }
                },
                {
                  maxWidth: 300,
                  lineColor: '#00802b',
                  backgroundColor: '#00802b',
                  marker: {
                    visible: false
                  },
                  tooltip: {
                    text: '%v'
                  }
                }
              ]
            },
            {
              values: [33, 35, 17, 61, 66, 32, 35],
              lineColor: '#ff0066',
              backgroundColor: '#ff0066',
              marker: {
                backgroundColor: '#ff0066'
              },
              mediaRules: [{
                  maxWidth: 500,
                  lineWidth: 1,
                  lineColor: '#009933',
                  backgroundColor: '#ff0066 #009933',
                  marker: {
                    size: 2,
                    backgroundColor: '#ff0066'
                  },
                  tooltip: {
                    text: '%t:<br>%v'
                  }
                },
                {
                  maxWidth: 300,
                  lineColor: '#009933',
                  backgroundColor: '#009933',
                  marker: {
                    visible: false
                  },
                  tooltip: {
                    text: '%v'
                  }
                }
              ]
            },
            {
              values: [21, 25, 59, 70, 81, 23, 61],
              lineColor: '#ff1a75',
              backgroundColor: '#ff1a75',
              marker: {
                backgroundColor: '#ff1a75'
              },
              mediaRules: [{
                  maxWidth: 500,
                  lineWidth: 1,
                  lineColor: '#00b33c',
                  backgroundColor: '#ff1a75 #00b33c',
                  marker: {
                    size: 2,
                    backgroundColor: '#ff1a75'
                  },
                  tooltip: {
                    text: '%t:<br>%v'
                  }
                },
                {
                  maxWidth: 300,
                  lineColor: '#00b33c',
                  backgroundColor: '#00b33c',
                  marker: {
                    visible: false
                  },
                  tooltip: {
                    text: '%v'
                  }
                }
              ]
            },
            {
              values: [61, 81, 91, 30, 14, 26, 19],
              lineColor: '#ff3385',
              backgroundColor: '#ff3385',
              marker: {
                backgroundColor: '#ff3385'
              },
              mediaRules: [{
                  maxWidth: 500,
                  lineWidth: 1,
                  lineColor: '#00cc44',
                  backgroundColor: '#ff3385 #00cc44',
                  marker: {
                    size: 2,
                    backgroundColor: '#ff3385'
                  },
                  tooltip: {
                    text: '%t:<br>%v'
                  }
                },
                {
                  maxWidth: 300,
                  lineColor: '#00cc44',
                  backgroundColor: '#00cc44',
                  marker: {
                    visible: false
                  },
                  tooltip: {
                    text: '%v'
                  }
                }
              ]
            },
            {
              values: [11, 19, 81, 40, 40, 81, 51],
              lineColor: '#ff4d94',
              backgroundColor: '#ff4d94',
              marker: {
                backgroundColor: '#ff4d94'
              },
              mediaRules: [{
                  maxWidth: 500,
                  lineWidth: 1,
                  lineColor: '#00e64d',
                  backgroundColor: '#ff4d94 #00e64d',
                  marker: {
                    size: 2,
                    backgroundColor: '#ff4d94'
                  },
                  tooltip: {
                    text: '%t:<br>%v'
                  }
                },
                {
                  maxWidth: 300,
                  lineColor: '#00e64d',
                  backgroundColor: '#00e64d',
                  marker: {
                    visible: false
                  },
                  tooltip: {
                    text: '%v'
                  }
                }
              ]
            }
          ]
        };
    
        // adjust the refresh rate of the chart
        zingchart.DEV.RESIZESPEED = 50;
        zingchart.DEV.DEBOUNCESPEED = 50;
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%'
        });
    
        // initiate jquery resizable container for demo purposes
        $('.container').resizable();
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
      <script src='//code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
      <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div class='container'>
        <div id='myChart'></div>
      </div>
    </body>
    
    </html>
    .container {
      width: 400px;
      height: 200px;
      min-width: 400px;
      border: 1px dashed #777;
    }
    
    #myChart {
      width: 100%;
      height: 100%;
    }
    let chartConfig = {
      type: 'area',
      scaleX: {
        labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        item: {
          fontSize: 10
        }
      },
      scaleY: {
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'dotted'
        }
      },
      plotarea: {
        adjustLayout: true
      },
      plot: {
        animation: {
          effect: 10,
          method: 0,
          sequence: 1,
          speed: 1
        },
        tooltip: {
          text: '%t: %v',
          borderRadius: '3px'
        },
        aspect: 'spline',
        marker: {
          size: 3,
          borderWidth: 0
        }
      },
      series: [{
          values: [31, 66, 35, 33, 59, 61, 55],
          lineColor: '#cc0052',
          backgroundColor: '#cc0052',
          marker: {
            backgroundColor: '#cc0052'
          },
          mediaRules: [{
              maxWidth: 500,
              lineWidth: 1,
              lineColor: '#006622',
              backgroundColor: '#cc0052 #006622',
              marker: {
                size: 2,
                backgroundColor: '#cc0052'
              },
              tooltip: {
                text: '%t:<br>%v'
              }
            },
            {
              maxWidth: 300,
              lineColor: '#006622',
              backgroundColor: '#006622',
              marker: {
                visible: false
              },
              tooltip: {
                text: '%v'
              }
            }
          ]
        },
        {
          values: [40, 49, 15, 21, 70, 51, 69],
          lineColor: '#e6005c',
          backgroundColor: '#e6005c',
          marker: {
            backgroundColor: '#e6005c'
          },
          mediaRules: [{
              maxWidth: 500,
              lineWidth: 1,
              lineColor: '#00802b',
              backgroundColor: '#e6005c #00802b',
              marker: {
                size: 2,
                backgroundColor: '#e6005c'
              },
              tooltip: {
                text: '%t:<br>%v'
              }
            },
            {
              maxWidth: 300,
              lineColor: '#00802b',
              backgroundColor: '#00802b',
              marker: {
                visible: false
              },
              tooltip: {
                text: '%v'
              }
            }
          ]
        },
        {
          values: [33, 35, 17, 61, 66, 32, 35],
          lineColor: '#ff0066',
          backgroundColor: '#ff0066',
          marker: {
            backgroundColor: '#ff0066'
          },
          mediaRules: [{
              maxWidth: 500,
              lineWidth: 1,
              lineColor: '#009933',
              backgroundColor: '#ff0066 #009933',
              marker: {
                size: 2,
                backgroundColor: '#ff0066'
              },
              tooltip: {
                text: '%t:<br>%v'
              }
            },
            {
              maxWidth: 300,
              lineColor: '#009933',
              backgroundColor: '#009933',
              marker: {
                visible: false
              },
              tooltip: {
                text: '%v'
              }
            }
          ]
        },
        {
          values: [21, 25, 59, 70, 81, 23, 61],
          lineColor: '#ff1a75',
          backgroundColor: '#ff1a75',
          marker: {
            backgroundColor: '#ff1a75'
          },
          mediaRules: [{
              maxWidth: 500,
              lineWidth: 1,
              lineColor: '#00b33c',
              backgroundColor: '#ff1a75 #00b33c',
              marker: {
                size: 2,
                backgroundColor: '#ff1a75'
              },
              tooltip: {
                text: '%t:<br>%v'
              }
            },
            {
              maxWidth: 300,
              lineColor: '#00b33c',
              backgroundColor: '#00b33c',
              marker: {
                visible: false
              },
              tooltip: {
                text: '%v'
              }
            }
          ]
        },
        {
          values: [61, 81, 91, 30, 14, 26, 19],
          lineColor: '#ff3385',
          backgroundColor: '#ff3385',
          marker: {
            backgroundColor: '#ff3385'
          },
          mediaRules: [{
              maxWidth: 500,
              lineWidth: 1,
              lineColor: '#00cc44',
              backgroundColor: '#ff3385 #00cc44',
              marker: {
                size: 2,
                backgroundColor: '#ff3385'
              },
              tooltip: {
                text: '%t:<br>%v'
              }
            },
            {
              maxWidth: 300,
              lineColor: '#00cc44',
              backgroundColor: '#00cc44',
              marker: {
                visible: false
              },
              tooltip: {
                text: '%v'
              }
            }
          ]
        },
        {
          values: [11, 19, 81, 40, 40, 81, 51],
          lineColor: '#ff4d94',
          backgroundColor: '#ff4d94',
          marker: {
            backgroundColor: '#ff4d94'
          },
          mediaRules: [{
              maxWidth: 500,
              lineWidth: 1,
              lineColor: '#00e64d',
              backgroundColor: '#ff4d94 #00e64d',
              marker: {
                size: 2,
                backgroundColor: '#ff4d94'
              },
              tooltip: {
                text: '%t:<br>%v'
              }
            },
            {
              maxWidth: 300,
              lineColor: '#00e64d',
              backgroundColor: '#00e64d',
              marker: {
                visible: false
              },
              tooltip: {
                text: '%v'
              }
            }
          ]
        }
      ]
    };
    
    // adjust the refresh rate of the chart
    zingchart.DEV.RESIZESPEED = 50;
    zingchart.DEV.DEBOUNCESPEED = 50;
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%'
    });
    
    // initiate jquery resizable container for demo purposes
    $('.container').resizable();