• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          type: 'scatter',
          scaleX: {
            values: '0:100:10',
            item: {
              fontSize: 10
            },
            guide: {
              visible: false
            }
          },
          scaleY: {
            values: '0:100:20',
            item: {
              fontSize: 10
            },
            guide: {
              lineStyle: 'solid'
            },
            minorTicks: 9,
            minorGuide: {
              alpha: 1
            },
            markers: [{
                type: 'area',
                range: [0, 20],
                backgroundColor: '#C5CAE9'
              },
              {
                type: 'area',
                range: [20, 40],
                backgroundColor: '#9FA8DA'
              },
              {
                type: 'area',
                range: [40, 60],
                backgroundColor: '#7986CB'
              },
              {
                type: 'area',
                range: [60, 80],
                backgroundColor: '#5C6BC0'
              },
              {
                type: 'area',
                range: [80, 100],
                backgroundColor: '#3F51B5'
              }
            ],
            mediaRules: [{
              maxWidth: 400,
              guide: {
                lineColor: 'red',
              },
              minorTicks: 3
            }]
          },
          scaleY2: {
            values: '0:100:20',
            item: {
              fontSize: 10
            },
            guide: {
              visible: false
            },
            minorTicks: 9,
          },
          crosshairX: {
            alpha: 0.3,
            lineWidth: 5,
            marker: {
              backgroundColor: 'white',
              borderColor: '#3F51B5',
              borderWidth: 1,
              size: 5,
            },
            plotLabel: {
              alpha: 0.7,
              borderColor: '#303F9F',
              borderRadius: 3,
              fontColor: '#303F9F',
              placement: 'node-top',
              multiple: true,
              text: '<strong>%t:</strong> %v',
              textAlpha: 1
            },
            scaleLabel: {
              backgroundColor: '#303F9F',
              borderRadius: 3
            }
          },
          crosshairY: {
            alpha: 0.3,
            lineWidth: 5,
            type: 'multiple',
            scaleLabel: {
              backgroundColor: '#303F9F',
              borderRadius: 3
            }
          },
          plot: {
            marker: {
              backgroundColor: '#9FA8DA #3F51B5'
            },
            tooltip: {
              visible: false
            }
          },
          series: [{
            values: [
              [21.5, 23.5],
              [23.1, 30.3],
              [25.1, 34.3],
              [30.2, 34.2],
              [30.9, 29.3],
              [31.9, 39.9],
              [34.2, 50.5],
              [35.5, 33.3],
              [39.1, 39.1],
              [53.2, 54.3],
              [57.1, 60.1],
              [59.5, 60.5],
              [61.6, 61.7],
              [64.1, 64.2],
              [69.5, 70.9],
              [70.3, 80.9],
              [71.7, 63.7],
              [75.4, 83.4],
              [80.3, 89.4],
              [80.9, 84.3],
              [85.1, 83.1],
              [85.3, 87.5],
              [89.3, 84.9],
              [90.1, 91.2],
              [91.3, 95.3],
              [92.4, 90.8],
              [93.5, 98.7],
              [95.5, 96.5],
              [96.1, 90.5],
              [99.1, 99.1]
            ],
            text: 'Marker'
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: 400,
          width: '100%'
        });
      </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>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    let chartConfig = {
      type: 'scatter',
      scaleX: {
        values: '0:100:10',
        item: {
          fontSize: 10
        },
        guide: {
          visible: false
        }
      },
      scaleY: {
        values: '0:100:20',
        item: {
          fontSize: 10
        },
        guide: {
          lineStyle: 'solid'
        },
        minorTicks: 9,
        minorGuide: {
          alpha: 1
        },
        markers: [{
            type: 'area',
            range: [0, 20],
            backgroundColor: '#C5CAE9'
          },
          {
            type: 'area',
            range: [20, 40],
            backgroundColor: '#9FA8DA'
          },
          {
            type: 'area',
            range: [40, 60],
            backgroundColor: '#7986CB'
          },
          {
            type: 'area',
            range: [60, 80],
            backgroundColor: '#5C6BC0'
          },
          {
            type: 'area',
            range: [80, 100],
            backgroundColor: '#3F51B5'
          }
        ],
        mediaRules: [{
          maxWidth: 400,
          guide: {
            lineColor: 'red',
          },
          minorTicks: 3
        }]
      },
      scaleY2: {
        values: '0:100:20',
        item: {
          fontSize: 10
        },
        guide: {
          visible: false
        },
        minorTicks: 9,
      },
      crosshairX: {
        alpha: 0.3,
        lineWidth: 5,
        marker: {
          backgroundColor: 'white',
          borderColor: '#3F51B5',
          borderWidth: 1,
          size: 5,
        },
        plotLabel: {
          alpha: 0.7,
          borderColor: '#303F9F',
          borderRadius: 3,
          fontColor: '#303F9F',
          placement: 'node-top',
          multiple: true,
          text: '<strong>%t:</strong> %v',
          textAlpha: 1
        },
        scaleLabel: {
          backgroundColor: '#303F9F',
          borderRadius: 3
        }
      },
      crosshairY: {
        alpha: 0.3,
        lineWidth: 5,
        type: 'multiple',
        scaleLabel: {
          backgroundColor: '#303F9F',
          borderRadius: 3
        }
      },
      plot: {
        marker: {
          backgroundColor: '#9FA8DA #3F51B5'
        },
        tooltip: {
          visible: false
        }
      },
      series: [{
        values: [
          [21.5, 23.5],
          [23.1, 30.3],
          [25.1, 34.3],
          [30.2, 34.2],
          [30.9, 29.3],
          [31.9, 39.9],
          [34.2, 50.5],
          [35.5, 33.3],
          [39.1, 39.1],
          [53.2, 54.3],
          [57.1, 60.1],
          [59.5, 60.5],
          [61.6, 61.7],
          [64.1, 64.2],
          [69.5, 70.9],
          [70.3, 80.9],
          [71.7, 63.7],
          [75.4, 83.4],
          [80.3, 89.4],
          [80.9, 84.3],
          [85.1, 83.1],
          [85.3, 87.5],
          [89.3, 84.9],
          [90.1, 91.2],
          [91.3, 95.3],
          [92.4, 90.8],
          [93.5, 98.7],
          [95.5, 96.5],
          [96.1, 90.5],
          [99.1, 99.1]
        ],
        text: 'Marker'
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: 400,
      width: '100%'
    });