• 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.       type: 'mixed',
    36.       title: {
    37.         text: 'Rank by MPH',
    38.       },
    39.       scaleX: {
    40.         offset: 0, // force line to start at scale
    41.         offsetEnd: 10, // force last bar away from end of the scale
    42.         maxItems: 2, // force display of first and last labels
    43.         tick: {
    44.           visible: false,
    45.         },
    46.         item: {
    47.           fontColor: '#000',
    48.           fontSize: 14,
    49.           rules: [ // adjust last label
    50.             {
    51.               rule: '%i == 16',
    52.               text: '129',
    53.             }
    54.           ]
    55.         },
    56.         lineWidth: 2,
    57.         lineColor: '#000',
    58.       },
    59.       scaleY: {
    60.         minValue: 0,
    61.         maxValue: 100,
    62.         step: 50,
    63.         format: '%v%',
    64.         markers: [{ // diagonal line
    65.           type: 'line',
    66.           range: [0, 100],
    67.           lineWidth: 3,
    68.           lineColor: '#000',
    69.           alpha: 1
    70.         }],
    71.         tick: {
    72.           visible: false,
    73.         },
    74.         item: {
    75.           fontColor: '#000',
    76.           fontSize: 14
    77.         },
    78.         guide: {
    79.           visible: false,
    80.         },
    81.         lineWidth: 2,
    82.         lineColor: '#000',
    83.       },
    84.       labels: [{ // hook label to line marker to display rank
    85.           hook: 'node:plot=1,index=1',
    86.           backgroundColor: '#000',
    87.           fontColor: '#fff',
    88.           text: 'Rank 11 / 16',
    89.           calloutWidth: 20,
    90.           callout: true,
    91.           calloutPosition: 'bottom',
    92.           padding: 15,
    93.           borderRadius: 10,
    94.           fontSize: 15,
    95.           offsetY: -50,
    96.         },
    97.         { // hook label to scale to display mph
    98.           hook: 'scale:index=11',
    99.           text: '100 mph',
    100.           fontSize: 15,
    101.           offsetY: 15,
    102.         },
    103.       ],
    104.       series: [{
    105.           type: 'bar',
    106.           barWidth: 20,
    107.           borderRadius: '10 10 0 0',
    108.           backgroundColor: '#c0c0c0',
    109.           tooltip: {
    110.             backgroundColor: '#000',
    111.             text: 'Rank %i / 16',
    112.             calloutWidth: 20,
    113.             callout: true,
    114.             calloutPosition: 'bottom',
    115.             padding: 15,
    116.             borderRadius: 10,
    117.             fontSize: 15,
    118.             placement: 'node:top',
    119.             offsetY: -20,
    120.           },
    121.           rules: [{ // make one bar purple
    122.             rule: '%i == 11',
    123.             backgroundColor: 'purple',
    124.           }],
    125.           values: [null, 5, 9, 12, 19, 25, 30, 34, 39, 45, 49, 54, 58, 65, 69, 74, 79],
    126.         },
    127.         {
    128.           type: 'line',
    129.           lineColor: 'purple',
    130.           lineStyle: 'dotted',
    131.           valueBox: {
    132.             text: '%v%',
    133.             placement: 'left',
    134.             offsetX: -18,
    135.             fontSize: 12,
    136.             rules: [{ // hide the valuebox at the node on the line
    137.               rule: '%i == 1',
    138.               visible: false,
    139.             }],
    140.           },
    141.           marker: {
    142.             borderColor: 'purple',
    143.             borderWidth: 2,
    144.             backgroundColor: '#fff',
    145.             size: 9,
    146.             rules: [{ // hide first marker of the line
    147.               rule: '%i == 0',
    148.               visible: false,
    149.             }],
    150.           },
    151.           values: [
    152.             [0, 69],
    153.             [11, 69]
    154.           ], // array of arrays to better plot the line
    155.         }
    156.       ]
    157.     };
    158.  
    159.     zingchart.render({
    160.       id: 'myChart',
    161.       data: myConfig,
    162.       height: '100%',
    163.       width: '100%',
    164.     });
    165.   </script>
    166. </body>
    167.  
    168. </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.   type: 'mixed',
    3.   title: {
    4.     text: 'Rank by MPH',
    5.   },
    6.   scaleX: {
    7.     offset: 0, // force line to start at scale
    8.     offsetEnd: 10, // force last bar away from end of the scale
    9.     maxItems: 2, // force display of first and last labels
    10.     tick: {
    11.       visible: false,
    12.     },
    13.     item: {
    14.       fontColor: '#000',
    15.       fontSize: 14,
    16.       rules: [ // adjust last label
    17.         {
    18.           rule: '%i == 16',
    19.           text: '129',
    20.         }
    21.       ]
    22.     },
    23.     lineWidth: 2,
    24.     lineColor: '#000',
    25.   },
    26.   scaleY: {
    27.     minValue: 0,
    28.     maxValue: 100,
    29.     step: 50,
    30.     format: '%v%',
    31.     markers: [{ // diagonal line
    32.       type: 'line',
    33.       range: [0, 100],
    34.       lineWidth: 3,
    35.       lineColor: '#000',
    36.       alpha: 1
    37.     }],
    38.     tick: {
    39.       visible: false,
    40.     },
    41.     item: {
    42.       fontColor: '#000',
    43.       fontSize: 14
    44.     },
    45.     guide: {
    46.       visible: false,
    47.     },
    48.     lineWidth: 2,
    49.     lineColor: '#000',
    50.   },
    51.   labels: [{ // hook label to line marker to display rank
    52.       hook: 'node:plot=1,index=1',
    53.       backgroundColor: '#000',
    54.       fontColor: '#fff',
    55.       text: 'Rank 11 / 16',
    56.       calloutWidth: 20,
    57.       callout: true,
    58.       calloutPosition: 'bottom',
    59.       padding: 15,
    60.       borderRadius: 10,
    61.       fontSize: 15,
    62.       offsetY: -50,
    63.     },
    64.     { // hook label to scale to display mph
    65.       hook: 'scale:index=11',
    66.       text: '100 mph',
    67.       fontSize: 15,
    68.       offsetY: 15,
    69.     },
    70.   ],
    71.   series: [{
    72.       type: 'bar',
    73.       barWidth: 20,
    74.       borderRadius: '10 10 0 0',
    75.       backgroundColor: '#c0c0c0',
    76.       tooltip: {
    77.         backgroundColor: '#000',
    78.         text: 'Rank %i / 16',
    79.         calloutWidth: 20,
    80.         callout: true,
    81.         calloutPosition: 'bottom',
    82.         padding: 15,
    83.         borderRadius: 10,
    84.         fontSize: 15,
    85.         placement: 'node:top',
    86.         offsetY: -20,
    87.       },
    88.       rules: [{ // make one bar purple
    89.         rule: '%i == 11',
    90.         backgroundColor: 'purple',
    91.       }],
    92.       values: [null, 5, 9, 12, 19, 25, 30, 34, 39, 45, 49, 54, 58, 65, 69, 74, 79],
    93.     },
    94.     {
    95.       type: 'line',
    96.       lineColor: 'purple',
    97.       lineStyle: 'dotted',
    98.       valueBox: {
    99.         text: '%v%',
    100.         placement: 'left',
    101.         offsetX: -18,
    102.         fontSize: 12,
    103.         rules: [{ // hide the valuebox at the node on the line
    104.           rule: '%i == 1',
    105.           visible: false,
    106.         }],
    107.       },
    108.       marker: {
    109.         borderColor: 'purple',
    110.         borderWidth: 2,
    111.         backgroundColor: '#fff',
    112.         size: 9,
    113.         rules: [{ // hide first marker of the line
    114.           rule: '%i == 0',
    115.           visible: false,
    116.         }],
    117.       },
    118.       values: [
    119.         [0, 69],
    120.         [11, 69]
    121.       ], // array of arrays to better plot the line
    122.     }
    123.   ]
    124. };
    125.  
    126. zingchart.render({
    127.   id: 'myChart',
    128.   data: myConfig,
    129.   height: '100%',
    130.   width: '100%',
    131. });