• 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>
        html,
        body,
        #myChart {
          height: 100%;
          width: 100%;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          graphset: [{
            type: 'null',
            tooltip: {
              padding: '10 20',
              backgroundColor: '#333',
              color: '#fff',
              callout: true,
              calloutPosition: 'bottom',
              borderRadius: 10
            },
            shapes: [{
                type: 'rect',
                id: 'rect',
                borderWidth: 2,
                alpha: 0.5,
                borderColor: '#f0f',
                backgroundColor: '#09f #f09',
                x: 50,
                y: 100,
                width: 50,
                height: 100,
                hoverState: {
                  backgroundColor: '#eee',
                  alpha: 0.4
                },
                label: {
                  text: 'Rect',
                  borderColor: '#333',
                  borderWidth: 2,
                  padding: 5,
                  alpha: 0.8
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              },
              {
                type: 'circle',
                id: 'mycircle',
                borderWidth: 2,
                borderColor: '#f00',
                backgroundColor: '#FF5722',
                x: 150,
                y: 100,
                size: 40,
                hoverState: {
                  backgroundColor: '#ff3d00'
                },
                label: {
                  text: 'Circle'
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              },
              {
                type: 'pie',
                id: 'myPie',
                borderWidth: 2,
                borderColor: '#FFC107',
                backgroundColor: '#FFEB3B',
                x: 250,
                y: 100,
                size: 40,
                angleStart: 0,
                angleEnd: 330,
                hoverState: {
                  alpha: 1,
                  angleEnd: 358,
                  backgroundColor: '#39d474',
                  borderColor: '#00ac42'
                },
                label: {
                  text: 'Pie',
                  padding: '2 4',
                  offsetY: 20
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              },
              {
                type: 'star5',
                id: 'myStar5',
                borderWidth: 2,
                borderColor: '#01579B',
                backgroundColor: '#0277BD #4FC3F7',
                x: 360,
                y: 100,
                size: 25,
                hoverState: {
                  backgroundColor: '#039BE5 #FFF',
                  size: 38,
                  type: 'star8',
                  alpha: 1
                },
                label: {
                  text: 'Star 5',
                  padding: '2 4'
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              },
              {
                type: 'star9',
                id: 'myStar9',
                borderWidth: 2,
                borderColor: '#E65100',
                fillType: 'radial',
                gradientColors: '#FFF59D #FFC107 #F4511E',
                gradientStops: '0.1 0.5 0.9',
                x: 500,
                y: 100,
                size: 50,
                label: {
                  text: 'Star 9',
                  fontColor: '#4d4d4d',
                  fontWeight: 'bold',
                  fontSize: 20,
                  padding: 10
                },
                hoverState: {
                  gradientColors: '#FBC02D #FFA000 #E65100',
                  gradientStops: '0.1 0.5 0.9'
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              },
              {
                type: 'pie',
                id: 'myRing',
                borderWidth: 0,
                backgroundColor: '#DCEDC8 #7CB342',
                shadow: 0.4,
                shadowDistance: 5,
                hoverState: {
                  backgroundColor: '#FFEB3B #F44336',
                  angleStart: 180,
                  angleEnd: 540
                },
                x: 70,
                y: 230,
                size: 50,
                slice: 30,
                angleStart: 180,
                angleEnd: 450,
                tooltip: {
                  text: 'Gauge'
                },
                label: {
                  text: 'Ring'
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              },
              {
                type: 'square',
                id: 'mySquare',
                borderWidth: 5,
                borderColor: 5,
                backgroundColor: '#0277BD',
                x: 200,
                y: 230,
                size: 40,
                label: {
                  text: 'Square',
                  padding: '2 4'
                },
                tooltip: {
                  text: 'I am a square'
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              },
              {
                type: 'diamond',
                id: 'myDiamond',
                borderWidth: 2,
                borderColor: '#00C853',
                backgroundColor: '#00E676',
                x: 330,
                y: 230,
                size: 40,
                label: {
                  text: 'Diamond',
                  padding: '2 4'
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              },
              {
                type: 'triangle',
                id: 'myTriangle',
                borderWidth: 2,
                borderColor: '#03A9F4',
                backgroundColor: '#03A9F4',
                x: 480,
                y: 230,
                size: 40,
                tooltip: {
                  text: 'I am a triangle'
                },
                label: {
                  offsetY: 50,
                  text: 'Triangle'
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              },
              {
                type: 'plus',
                id: 'myPlus',
                lineWidth: 8,
                lineColor: '#4DB6AC',
                x: 60,
                y: 330,
                size: 30,
                label: {
                  text: 'Plus',
                  offsetY: 50
                },
                mediaRules: [{
                  maxWidth: 400,
                  lineColor: 'red',
                }],
              },
              {
                type: 'cross',
                id: 'myCross',
                lineWidth: 8,
                lineColor: '#4DB6AC',
                x: 190,
                y: 330,
                size: 30,
                label: {
                  text: 'Cross',
                  offsetY: 50
                },
                mediaRules: [{
                  maxWidth: 400,
                  lineColor: 'red',
                }],
              },
              {
                type: 'line',
                id: 'myLine',
                lineWidth: 5,
                lineColor: '#F44336',
                points: [
                  [280,
                    310
                  ],
                  [340,
                    320
                  ],
                  [300,
                    350
                  ],
                  [380,
                    340
                  ]
                ],
                label: {
                  text: 'Line',
                  offsetY: 50
                },
                mediaRules: [{
                  maxWidth: 400,
                  lineColor: 'red',
                }],
              },
              {
                type: 'poly',
                id: 'myPoly',
                lineStyle: 'solid',
                borderWidth: 2,
                shadowDistance: 15,
                borderColor: '#532',
                backgroundColor: '#e91e63',
                points: [
                  [450,
                    310
                  ],
                  [520,
                    310
                  ],
                  [520,
                    360
                  ],
                  [400,
                    380
                  ],
                  [450,
                    310
                  ]
                ],
                label: {
                  text: 'Polygon'
                },
                mediaRules: [{
                  maxWidth: 400,
                  backgroundColor: 'red',
                }],
              }
            ]
          }]
        };
    
        zingchart.render({
    
          id: 'myChart',
    
          data: chartConfig,
    
          height: '100%',
    
          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>
    html,
    body,
    #myChart {
      height: 100%;
      width: 100%;
    }
    let chartConfig = {
      graphset: [{
        type: 'null',
        tooltip: {
          padding: '10 20',
          backgroundColor: '#333',
          color: '#fff',
          callout: true,
          calloutPosition: 'bottom',
          borderRadius: 10
        },
        shapes: [{
            type: 'rect',
            id: 'rect',
            borderWidth: 2,
            alpha: 0.5,
            borderColor: '#f0f',
            backgroundColor: '#09f #f09',
            x: 50,
            y: 100,
            width: 50,
            height: 100,
            hoverState: {
              backgroundColor: '#eee',
              alpha: 0.4
            },
            label: {
              text: 'Rect',
              borderColor: '#333',
              borderWidth: 2,
              padding: 5,
              alpha: 0.8
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          },
          {
            type: 'circle',
            id: 'mycircle',
            borderWidth: 2,
            borderColor: '#f00',
            backgroundColor: '#FF5722',
            x: 150,
            y: 100,
            size: 40,
            hoverState: {
              backgroundColor: '#ff3d00'
            },
            label: {
              text: 'Circle'
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          },
          {
            type: 'pie',
            id: 'myPie',
            borderWidth: 2,
            borderColor: '#FFC107',
            backgroundColor: '#FFEB3B',
            x: 250,
            y: 100,
            size: 40,
            angleStart: 0,
            angleEnd: 330,
            hoverState: {
              alpha: 1,
              angleEnd: 358,
              backgroundColor: '#39d474',
              borderColor: '#00ac42'
            },
            label: {
              text: 'Pie',
              padding: '2 4',
              offsetY: 20
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          },
          {
            type: 'star5',
            id: 'myStar5',
            borderWidth: 2,
            borderColor: '#01579B',
            backgroundColor: '#0277BD #4FC3F7',
            x: 360,
            y: 100,
            size: 25,
            hoverState: {
              backgroundColor: '#039BE5 #FFF',
              size: 38,
              type: 'star8',
              alpha: 1
            },
            label: {
              text: 'Star 5',
              padding: '2 4'
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          },
          {
            type: 'star9',
            id: 'myStar9',
            borderWidth: 2,
            borderColor: '#E65100',
            fillType: 'radial',
            gradientColors: '#FFF59D #FFC107 #F4511E',
            gradientStops: '0.1 0.5 0.9',
            x: 500,
            y: 100,
            size: 50,
            label: {
              text: 'Star 9',
              fontColor: '#4d4d4d',
              fontWeight: 'bold',
              fontSize: 20,
              padding: 10
            },
            hoverState: {
              gradientColors: '#FBC02D #FFA000 #E65100',
              gradientStops: '0.1 0.5 0.9'
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          },
          {
            type: 'pie',
            id: 'myRing',
            borderWidth: 0,
            backgroundColor: '#DCEDC8 #7CB342',
            shadow: 0.4,
            shadowDistance: 5,
            hoverState: {
              backgroundColor: '#FFEB3B #F44336',
              angleStart: 180,
              angleEnd: 540
            },
            x: 70,
            y: 230,
            size: 50,
            slice: 30,
            angleStart: 180,
            angleEnd: 450,
            tooltip: {
              text: 'Gauge'
            },
            label: {
              text: 'Ring'
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          },
          {
            type: 'square',
            id: 'mySquare',
            borderWidth: 5,
            borderColor: 5,
            backgroundColor: '#0277BD',
            x: 200,
            y: 230,
            size: 40,
            label: {
              text: 'Square',
              padding: '2 4'
            },
            tooltip: {
              text: 'I am a square'
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          },
          {
            type: 'diamond',
            id: 'myDiamond',
            borderWidth: 2,
            borderColor: '#00C853',
            backgroundColor: '#00E676',
            x: 330,
            y: 230,
            size: 40,
            label: {
              text: 'Diamond',
              padding: '2 4'
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          },
          {
            type: 'triangle',
            id: 'myTriangle',
            borderWidth: 2,
            borderColor: '#03A9F4',
            backgroundColor: '#03A9F4',
            x: 480,
            y: 230,
            size: 40,
            tooltip: {
              text: 'I am a triangle'
            },
            label: {
              offsetY: 50,
              text: 'Triangle'
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          },
          {
            type: 'plus',
            id: 'myPlus',
            lineWidth: 8,
            lineColor: '#4DB6AC',
            x: 60,
            y: 330,
            size: 30,
            label: {
              text: 'Plus',
              offsetY: 50
            },
            mediaRules: [{
              maxWidth: 400,
              lineColor: 'red',
            }],
          },
          {
            type: 'cross',
            id: 'myCross',
            lineWidth: 8,
            lineColor: '#4DB6AC',
            x: 190,
            y: 330,
            size: 30,
            label: {
              text: 'Cross',
              offsetY: 50
            },
            mediaRules: [{
              maxWidth: 400,
              lineColor: 'red',
            }],
          },
          {
            type: 'line',
            id: 'myLine',
            lineWidth: 5,
            lineColor: '#F44336',
            points: [
              [280,
                310
              ],
              [340,
                320
              ],
              [300,
                350
              ],
              [380,
                340
              ]
            ],
            label: {
              text: 'Line',
              offsetY: 50
            },
            mediaRules: [{
              maxWidth: 400,
              lineColor: 'red',
            }],
          },
          {
            type: 'poly',
            id: 'myPoly',
            lineStyle: 'solid',
            borderWidth: 2,
            shadowDistance: 15,
            borderColor: '#532',
            backgroundColor: '#e91e63',
            points: [
              [450,
                310
              ],
              [520,
                310
              ],
              [520,
                360
              ],
              [400,
                380
              ],
              [450,
                310
              ]
            ],
            label: {
              text: 'Polygon'
            },
            mediaRules: [{
              maxWidth: 400,
              backgroundColor: 'red',
            }],
          }
        ]
      }]
    };
    
    zingchart.render({
    
      id: 'myChart',
    
      data: chartConfig,
    
      height: '100%',
    
      width: '100%'
    });