• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "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
                }
              },
              {
                type: 'circle',
                id: 'mycircle',
                borderWidth: 2,
                borderColor: "#f00",
                backgroundColor: "#FF5722",
                x: 150,
                y: 100,
                size: 40,
                hoverState: {
                  backgroundColor: "#ff3d00"
                },
                label: {
                  text: "Circle"
                }
              },
              {
                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
                }
              },
              {
                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'
                }
              },
              {
                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"
                }
              },
              {
                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"
                }
              },
              {
                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'
                }
              },
              {
                type: 'diamond',
                id: 'myDiamond',
                borderWidth: 2,
                borderColor: '#00C853',
                backgroundColor: '#00E676',
                x: 330,
                y: 230,
                size: 40,
                label: {
                  text: 'Diamond',
                  padding: '2 4'
                }
              },
              {
                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"
                }
              },
              {
                type: 'plus',
                id: 'myPlus',
                lineWidth: 8,
                lineColor: '#4DB6AC',
                x: 60,
                y: 330,
                size: 30,
                label: {
                  text: 'Plus',
                  offsetY: 50,
                }
              },
              {
                type: 'cross',
                id: 'myCross',
                lineWidth: 8,
                lineColor: '#4DB6AC',
                x: 190,
                y: 330,
                size: 30,
                label: {
                  text: 'Cross',
                  offsetY: 50,
                }
              },
              {
                type: 'line',
                id: 'myLine',
                lineWidth: 5,
                lineColor: '#F44336',
                points: [
                  [280, 310],
                  [340, 320],
                  [300, 350],
                  [380, 340]
                ],
                label: {
                  text: 'Line',
                  offsetY: 50
                }
              },
              {
                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'
                }
              }
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 400,
          width: 600
        });
      </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>
    
          
    var myConfig = {
      "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
            }
          },
          {
            type: 'circle',
            id: 'mycircle',
            borderWidth: 2,
            borderColor: "#f00",
            backgroundColor: "#FF5722",
            x: 150,
            y: 100,
            size: 40,
            hoverState: {
              backgroundColor: "#ff3d00"
            },
            label: {
              text: "Circle"
            }
          },
          {
            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
            }
          },
          {
            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'
            }
          },
          {
            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"
            }
          },
          {
            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"
            }
          },
          {
            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'
            }
          },
          {
            type: 'diamond',
            id: 'myDiamond',
            borderWidth: 2,
            borderColor: '#00C853',
            backgroundColor: '#00E676',
            x: 330,
            y: 230,
            size: 40,
            label: {
              text: 'Diamond',
              padding: '2 4'
            }
          },
          {
            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"
            }
          },
          {
            type: 'plus',
            id: 'myPlus',
            lineWidth: 8,
            lineColor: '#4DB6AC',
            x: 60,
            y: 330,
            size: 30,
            label: {
              text: 'Plus',
              offsetY: 50,
            }
          },
          {
            type: 'cross',
            id: 'myCross',
            lineWidth: 8,
            lineColor: '#4DB6AC',
            x: 190,
            y: 330,
            size: 30,
            label: {
              text: 'Cross',
              offsetY: 50,
            }
          },
          {
            type: 'line',
            id: 'myLine',
            lineWidth: 5,
            lineColor: '#F44336',
            points: [
              [280, 310],
              [340, 320],
              [300, 350],
              [380, 340]
            ],
            label: {
              text: 'Line',
              offsetY: 50
            }
          },
          {
            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'
            }
          }
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 600
    });