• 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 = {
          graphset: [{
            type: 'area',
            title: {
              text: 'Responsive Charting',
              adjustLayout: true,
              fontFamily: 'Georgia',
              fontSize: 20,
              mediaRules: [{
                  maxWidth: 600,
                  fontSize: 12
                },
                {
                  maxWidth: 400,
                  fontWeight: 'normal'
                }
              ]
            },
            legend: {
              align: 'right',
              verticalAlign: 'middle',
              layout: '4x2',
              borderWidth: 1,
              header: {
                text: 'Legend',
                textAlign: 'center',
                fontSize: 12
              },
              marker: {
                type: 'circle',
                borderWidth: 0,
                showLine: true,
                size: 3
              },
              mediaRules: [{
                  maxWidth: 600,
                  layout: '8x1',
                  header: {
                    visible: false
                  },
                  item: {
                    fontSize: 10
                  },
                  marker: {
                    size: 2,
                    lineWidth: 1
                  }
                },
                {
                  maxWidth: 400,
                  align: 'center',
                  verticalAlign: 'bottom',
                  layout: '2x4',
                  item: {
                    maxChars: 3,
                    margin: 0
                  },
                  tooltip: {
                    text: '%t',
                    borderRadius: '3px'
                  }
                }
              ]
            },
            plotarea: {
              adjustLayout: true
            },
            scaleX: {
              labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
              mediaRules: [{
                  maxWidth: 600,
                  item: {
                    fontSize: 10
                  }
                },
                {
                  maxWidth: 400,
                  labels: ['S', 'M', 'T', 'W', 'H', 'F', 'S'],
                  item: {
                    fontSize: 10
                  }
                }
              ]
            },
            scaleY: {
              guide: {
                lineStyle: 'dotted'
              },
              mediaRules: [{
                  maxWidth: 600,
                  item: {
                    fontSize: 10
                  }
                },
                {
                  maxWidth: 400,
                  item: {
                    fontSize: 10
                  }
                }
              ]
            },
            plot: {
              animation: {
                effect: 10,
                method: 0,
                sequence: 1,
                speed: 1
              },
              tooltip: {
                text: '%t: %v',
                borderRadius: '3px'
              },
              aspect: 'spline',
              marker: {
                size: 3,
                borderWidth: 0
              },
              mediaRules: [{
                  maxWidth: 600,
                  lineWidth: 1,
                  marker: {
                    size: 2
                  },
                  tooltip: {
                    text: '%t:<br>%v'
                  }
                },
                {
                  maxWidth: 400,
                  marker: {
                    visible: false
                  },
                  tooltip: {
                    text: '%v'
                  }
                }
              ]
            },
            series: [{
                values: [31, 66, 35, 33, 59, 61, 55],
                text: 'Alpha',
                lineColor: '#1B4F72',
                backgroundColor: '#1B4F72',
                marker: {
                  backgroundColor: '#1B4F72'
                }
              },
              {
                values: [40, 49, 15, 21, 70, 51, 69],
                text: 'Beta',
                lineColor: '#21618C',
                backgroundColor: '#21618C',
                marker: {
                  backgroundColor: '#21618C'
                }
              },
              {
                values: [33, 35, 17, 61, 66, 32, 35],
                text: 'Gamma',
                lineColor: '#2874A6',
                backgroundColor: '#2874A6',
                marker: {
                  backgroundColor: '#2874A6'
                }
              },
              {
                values: [21, 25, 59, 70, 81, 23, 61],
                text: 'Delta',
                lineColor: '#2E86C1',
                backgroundColor: '#2E86C1',
                marker: {
                  backgroundColor: '#2E86C1'
                }
              },
              {
                values: [61, 81, 91, 30, 14, 26, 19],
                text: 'Epsilon',
                lineColor: '#3498DB',
                backgroundColor: '#3498DB',
                marker: {
                  backgroundColor: '#3498DB'
                }
              },
              {
                values: [50, 95, 88, 77, 66, 55, 79],
                text: 'Zeta',
                lineColor: '#5DADE2',
                backgroundColor: '#5DADE2',
                marker: {
                  backgroundColor: '#5DADE2'
                }
              },
              {
                values: [11, 19, 81, 40, 40, 81, 51],
                text: 'Eta',
                lineColor: '#85C1E9',
                backgroundColor: '#85C1E9',
                marker: {
                  backgroundColor: '#85C1E9'
                }
              },
              {
                values: [81, 30, 91, 85, 51, 88, 71],
                text: 'Theta',
                lineColor: '#AED6F1',
                backgroundColor: '#AED6F1',
                marker: {
                  backgroundColor: '#AED6F1'
                }
              }
            ]
          }]
        };
    
        // 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 = {
      graphset: [{
        type: 'area',
        title: {
          text: 'Responsive Charting',
          adjustLayout: true,
          fontFamily: 'Georgia',
          fontSize: 20,
          mediaRules: [{
              maxWidth: 600,
              fontSize: 12
            },
            {
              maxWidth: 400,
              fontWeight: 'normal'
            }
          ]
        },
        legend: {
          align: 'right',
          verticalAlign: 'middle',
          layout: '4x2',
          borderWidth: 1,
          header: {
            text: 'Legend',
            textAlign: 'center',
            fontSize: 12
          },
          marker: {
            type: 'circle',
            borderWidth: 0,
            showLine: true,
            size: 3
          },
          mediaRules: [{
              maxWidth: 600,
              layout: '8x1',
              header: {
                visible: false
              },
              item: {
                fontSize: 10
              },
              marker: {
                size: 2,
                lineWidth: 1
              }
            },
            {
              maxWidth: 400,
              align: 'center',
              verticalAlign: 'bottom',
              layout: '2x4',
              item: {
                maxChars: 3,
                margin: 0
              },
              tooltip: {
                text: '%t',
                borderRadius: '3px'
              }
            }
          ]
        },
        plotarea: {
          adjustLayout: true
        },
        scaleX: {
          labels: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
          mediaRules: [{
              maxWidth: 600,
              item: {
                fontSize: 10
              }
            },
            {
              maxWidth: 400,
              labels: ['S', 'M', 'T', 'W', 'H', 'F', 'S'],
              item: {
                fontSize: 10
              }
            }
          ]
        },
        scaleY: {
          guide: {
            lineStyle: 'dotted'
          },
          mediaRules: [{
              maxWidth: 600,
              item: {
                fontSize: 10
              }
            },
            {
              maxWidth: 400,
              item: {
                fontSize: 10
              }
            }
          ]
        },
        plot: {
          animation: {
            effect: 10,
            method: 0,
            sequence: 1,
            speed: 1
          },
          tooltip: {
            text: '%t: %v',
            borderRadius: '3px'
          },
          aspect: 'spline',
          marker: {
            size: 3,
            borderWidth: 0
          },
          mediaRules: [{
              maxWidth: 600,
              lineWidth: 1,
              marker: {
                size: 2
              },
              tooltip: {
                text: '%t:<br>%v'
              }
            },
            {
              maxWidth: 400,
              marker: {
                visible: false
              },
              tooltip: {
                text: '%v'
              }
            }
          ]
        },
        series: [{
            values: [31, 66, 35, 33, 59, 61, 55],
            text: 'Alpha',
            lineColor: '#1B4F72',
            backgroundColor: '#1B4F72',
            marker: {
              backgroundColor: '#1B4F72'
            }
          },
          {
            values: [40, 49, 15, 21, 70, 51, 69],
            text: 'Beta',
            lineColor: '#21618C',
            backgroundColor: '#21618C',
            marker: {
              backgroundColor: '#21618C'
            }
          },
          {
            values: [33, 35, 17, 61, 66, 32, 35],
            text: 'Gamma',
            lineColor: '#2874A6',
            backgroundColor: '#2874A6',
            marker: {
              backgroundColor: '#2874A6'
            }
          },
          {
            values: [21, 25, 59, 70, 81, 23, 61],
            text: 'Delta',
            lineColor: '#2E86C1',
            backgroundColor: '#2E86C1',
            marker: {
              backgroundColor: '#2E86C1'
            }
          },
          {
            values: [61, 81, 91, 30, 14, 26, 19],
            text: 'Epsilon',
            lineColor: '#3498DB',
            backgroundColor: '#3498DB',
            marker: {
              backgroundColor: '#3498DB'
            }
          },
          {
            values: [50, 95, 88, 77, 66, 55, 79],
            text: 'Zeta',
            lineColor: '#5DADE2',
            backgroundColor: '#5DADE2',
            marker: {
              backgroundColor: '#5DADE2'
            }
          },
          {
            values: [11, 19, 81, 40, 40, 81, 51],
            text: 'Eta',
            lineColor: '#85C1E9',
            backgroundColor: '#85C1E9',
            marker: {
              backgroundColor: '#85C1E9'
            }
          },
          {
            values: [81, 30, 91, 85, 51, 88, 71],
            text: 'Theta',
            lineColor: '#AED6F1',
            backgroundColor: '#AED6F1',
            marker: {
              backgroundColor: '#AED6F1'
            }
          }
        ]
      }]
    };
    
    // 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();