• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       "graphset": [{
    36.         "type": "scatter",
    37.         "globals": {
    38.           "fontFamily": "Lucida Sans Unicode"
    39.         },
    40.         "title": {
    41.           "text": "Churn vs. quality",
    42.           "adjustLayout": true,
    43.           "textAlign": "left"
    44.         },
    45.         "subtitle": {
    46.           "text": "Quality issues cause bigger problems in files that are changed (churn) frequently",
    47.           "adjustLayout": true,
    48.           "textAlign": "left"
    49.         },
    50.         "plot": {
    51.           "marker": {
    52.             "size": 10
    53.           }
    54.         },
    55.         "plotarea": {
    56.           "margin": "dynamic",
    57.           "margin-bottom-offset": 25
    58.         },
    59.         "scaleY": {
    60.           "alpha": 0.3,
    61.           "lineWidth": 2,
    62.           "zooming": true,
    63.           "guide": {
    64.             "lineStyle": "solid",
    65.             "alpha": 0.3,
    66.             "lineWidth": 2
    67.           },
    68.           "tick": {
    69.             "visible": false
    70.           },
    71.           "item": {
    72.             "visible": false
    73.           },
    74.           "label": {
    75.             "text": "QUALITY",
    76.             "font-size": 12,
    77.             "font-weight": "bold",
    78.             "color": "#999"
    79.           },
    80.           "markers": [{
    81.               "type": "line",
    82.               "range": ["0%"],
    83.               "value-range": true,
    84.               "line-width": 0,
    85.               "label-tolerance": 25,
    86.               "label": {
    87.                 "angle": 270,
    88.                 "offset-x": -22,
    89.                 "font-size": 12,
    90.                 "font-weight": "bold",
    91.                 "color": "#999",
    92.                 "text": "Better"
    93.               }
    94.             },
    95.             {
    96.               "type": "line",
    97.               "range": ["100%"],
    98.               "value-range": true,
    99.               "line-width": 0,
    100.               "label-tolerance": 25,
    101.               "label-alignment": "opposite",
    102.               "label": {
    103.                 "angle": 270,
    104.                 "offset-x": -22,
    105.                 "font-size": 12,
    106.                 "font-weight": "bold",
    107.                 "color": "#999",
    108.                 "text": "Worse"
    109.               }
    110.             }
    111.           ]
    112.         },
    113.         "scaleX": {
    114.           "alpha": 0.3,
    115.           "lineWidth": 2,
    116.           "zooming": true,
    117.           "guide": {
    118.             "lineStyle": "solid",
    119.             "alpha": 0.3,
    120.             "lineWidth": 2
    121.           },
    122.           "tick": {
    123.             "visible": false
    124.           },
    125.           "item": {
    126.             "visible": false
    127.           },
    128.           "label": {
    129.             "text": "CHURN",
    130.             "font-size": 12,
    131.             "font-weight": "bold",
    132.             "color": "#999"
    133.           },
    134.           "markers": [{
    135.               "type": "line",
    136.               "range": ["0%"],
    137.               "value-range": true,
    138.               "line-width": 0,
    139.               "label-tolerance": 25,
    140.               "label": {
    141.                 "angle": 0,
    142.                 "font-size": 12,
    143.                 "font-weight": "bold",
    144.                 "offset-y": 22,
    145.                 "color": "#999",
    146.                 "text": "Lower"
    147.               }
    148.             },
    149.             {
    150.               "type": "line",
    151.               "range": ["100%"],
    152.               "value-range": true,
    153.               "line-width": 0,
    154.               "label-alignment": "opposite",
    155.               "label-tolerance": 25,
    156.               "label": {
    157.                 "angle": 0,
    158.                 "font-size": 12,
    159.                 "font-weight": "bold",
    160.                 "offset-y": 22,
    161.                 "color": "#999",
    162.                 "text": "Higher"
    163.               }
    164.             }
    165.           ]
    166.         },
    167.         "scrollX": {
    168.           "offset-y": -9,
    169.           "bar": {
    170.             "background-color": "none"
    171.           }
    172.         },
    173.         "scrollY": {
    174.           "offset-x": 9,
    175.           "bar": {
    176.             "background-color": "none"
    177.           }
    178.         },
    179.         "series": [{
    180.             "values": [
    181.               [1, 9],
    182.               [2, 15],
    183.               [3, 21],
    184.               [4, 30],
    185.               [5, 40],
    186.               [6, 59],
    187.               [7, 60],
    188.               [8, 75],
    189.               [9, 81],
    190.               [10, 99]
    191.             ],
    192.             "marker": {
    193.               "backgroundColor": "#ffeb3b",
    194.               "type": "triangle"
    195.             }
    196.           },
    197.           {
    198.             "values": [
    199.               [0.9, 3],
    200.               [2.1, 13],
    201.               [3.5, 25],
    202.               [4.9, 35],
    203.               [5.3, 41],
    204.               [6.5, 57],
    205.               [7.1, 61],
    206.               [8.7, 70],
    207.               [9.2, 82],
    208.               [9.9, 95]
    209.             ],
    210.             "marker": {
    211.               "backgroundColor": "#ffb74d",
    212.               "type": "square"
    213.             }
    214.           },
    215.           {
    216.             "values": [
    217.               [0.1, 9],
    218.               [1.8, 21],
    219.               [1.9, 29],
    220.               [4.1, 33],
    221.               [4.5, 39],
    222.               [6.9, 51],
    223.               [7.4, 64],
    224.               [8.9, 70],
    225.               [9, 75],
    226.               [9.3, 93]
    227.             ],
    228.             "marker": {
    229.               "backgroundColor": "#69f0ae",
    230.               "type": "circle"
    231.             }
    232.           }
    233.         ]
    234.       }]
    235.     };
    236.  
    237.     zingchart.render({
    238.       id: 'myChart',
    239.       data: myConfig,
    240.       height: 500,
    241.       width: 800
    242.     });
    243.   </script>
    244. </body>
    245.  
    246. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   "graphset": [{
    3.     "type": "scatter",
    4.     "globals": {
    5.       "fontFamily": "Lucida Sans Unicode"
    6.     },
    7.     "title": {
    8.       "text": "Churn vs. quality",
    9.       "adjustLayout": true,
    10.       "textAlign": "left"
    11.     },
    12.     "subtitle": {
    13.       "text": "Quality issues cause bigger problems in files that are changed (churn) frequently",
    14.       "adjustLayout": true,
    15.       "textAlign": "left"
    16.     },
    17.     "plot": {
    18.       "marker": {
    19.         "size": 10
    20.       }
    21.     },
    22.     "plotarea": {
    23.       "margin": "dynamic",
    24.       "margin-bottom-offset": 25
    25.     },
    26.     "scaleY": {
    27.       "alpha": 0.3,
    28.       "lineWidth": 2,
    29.       "zooming": true,
    30.       "guide": {
    31.         "lineStyle": "solid",
    32.         "alpha": 0.3,
    33.         "lineWidth": 2
    34.       },
    35.       "tick": {
    36.         "visible": false
    37.       },
    38.       "item": {
    39.         "visible": false
    40.       },
    41.       "label": {
    42.         "text": "QUALITY",
    43.         "font-size": 12,
    44.         "font-weight": "bold",
    45.         "color": "#999"
    46.       },
    47.       "markers": [{
    48.           "type": "line",
    49.           "range": ["0%"],
    50.           "value-range": true,
    51.           "line-width": 0,
    52.           "label-tolerance": 25,
    53.           "label": {
    54.             "angle": 270,
    55.             "offset-x": -22,
    56.             "font-size": 12,
    57.             "font-weight": "bold",
    58.             "color": "#999",
    59.             "text": "Better"
    60.           }
    61.         },
    62.         {
    63.           "type": "line",
    64.           "range": ["100%"],
    65.           "value-range": true,
    66.           "line-width": 0,
    67.           "label-tolerance": 25,
    68.           "label-alignment": "opposite",
    69.           "label": {
    70.             "angle": 270,
    71.             "offset-x": -22,
    72.             "font-size": 12,
    73.             "font-weight": "bold",
    74.             "color": "#999",
    75.             "text": "Worse"
    76.           }
    77.         }
    78.       ]
    79.     },
    80.     "scaleX": {
    81.       "alpha": 0.3,
    82.       "lineWidth": 2,
    83.       "zooming": true,
    84.       "guide": {
    85.         "lineStyle": "solid",
    86.         "alpha": 0.3,
    87.         "lineWidth": 2
    88.       },
    89.       "tick": {
    90.         "visible": false
    91.       },
    92.       "item": {
    93.         "visible": false
    94.       },
    95.       "label": {
    96.         "text": "CHURN",
    97.         "font-size": 12,
    98.         "font-weight": "bold",
    99.         "color": "#999"
    100.       },
    101.       "markers": [{
    102.           "type": "line",
    103.           "range": ["0%"],
    104.           "value-range": true,
    105.           "line-width": 0,
    106.           "label-tolerance": 25,
    107.           "label": {
    108.             "angle": 0,
    109.             "font-size": 12,
    110.             "font-weight": "bold",
    111.             "offset-y": 22,
    112.             "color": "#999",
    113.             "text": "Lower"
    114.           }
    115.         },
    116.         {
    117.           "type": "line",
    118.           "range": ["100%"],
    119.           "value-range": true,
    120.           "line-width": 0,
    121.           "label-alignment": "opposite",
    122.           "label-tolerance": 25,
    123.           "label": {
    124.             "angle": 0,
    125.             "font-size": 12,
    126.             "font-weight": "bold",
    127.             "offset-y": 22,
    128.             "color": "#999",
    129.             "text": "Higher"
    130.           }
    131.         }
    132.       ]
    133.     },
    134.     "scrollX": {
    135.       "offset-y": -9,
    136.       "bar": {
    137.         "background-color": "none"
    138.       }
    139.     },
    140.     "scrollY": {
    141.       "offset-x": 9,
    142.       "bar": {
    143.         "background-color": "none"
    144.       }
    145.     },
    146.     "series": [{
    147.         "values": [
    148.           [1, 9],
    149.           [2, 15],
    150.           [3, 21],
    151.           [4, 30],
    152.           [5, 40],
    153.           [6, 59],
    154.           [7, 60],
    155.           [8, 75],
    156.           [9, 81],
    157.           [10, 99]
    158.         ],
    159.         "marker": {
    160.           "backgroundColor": "#ffeb3b",
    161.           "type": "triangle"
    162.         }
    163.       },
    164.       {
    165.         "values": [
    166.           [0.9, 3],
    167.           [2.1, 13],
    168.           [3.5, 25],
    169.           [4.9, 35],
    170.           [5.3, 41],
    171.           [6.5, 57],
    172.           [7.1, 61],
    173.           [8.7, 70],
    174.           [9.2, 82],
    175.           [9.9, 95]
    176.         ],
    177.         "marker": {
    178.           "backgroundColor": "#ffb74d",
    179.           "type": "square"
    180.         }
    181.       },
    182.       {
    183.         "values": [
    184.           [0.1, 9],
    185.           [1.8, 21],
    186.           [1.9, 29],
    187.           [4.1, 33],
    188.           [4.5, 39],
    189.           [6.9, 51],
    190.           [7.4, 64],
    191.           [8.9, 70],
    192.           [9, 75],
    193.           [9.3, 93]
    194.         ],
    195.         "marker": {
    196.           "backgroundColor": "#69f0ae",
    197.           "type": "circle"
    198.         }
    199.       }
    200.     ]
    201.   }]
    202. };
    203.  
    204. zingchart.render({
    205.   id: 'myChart',
    206.   data: myConfig,
    207.   height: 500,
    208.   width: 800
    209. });