• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background-color: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24. ​
    25.  
    26. <body class="zc-body">
    27.   ​
    28.   <div id="myChart" class="chart--container">
    29.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    30.   </div>
    31.  
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
    34.     // -----------------------------
    35.     let chartConfig = {
    36.       type: 'mixed',
    37.       title: {
    38.         text: 'Sample Burndown Chart',
    39.         align: 'left',
    40.         marginLeft: '23%',
    41.       },
    42.       legend: {
    43.         adjustLayout: true,
    44.         verticalAlign: 'middle',
    45.       },
    46.       scaleX: {
    47.         labels: [
    48.           'Day 1',
    49.           'Day 2',
    50.           'Day 3',
    51.           'Day 4',
    52.           'Day 5',
    53.           'Day 6',
    54.           'Day 7',
    55.           'Day 8',
    56.         ], // one label for every datapoint
    57.       },
    58.       scaleY: {
    59.         guide: {
    60.           // dashed lines
    61.           visible: false,
    62.         },
    63.         label: {
    64.           text: 'Remaing effort (hours)',
    65.           fontSize: '14px',
    66.         },
    67.       },
    68.       scaleY2: {
    69.         label: {
    70.           text: 'Remaing and completed tasks',
    71.           fontSize: '14px',
    72.         },
    73.         maxValue: 100,
    74.         minValue: 0,
    75.         step: 25, // can define scale step values or default
    76.       },
    77.       crosshairX: {
    78.         lineColor: '#424242',
    79.         lineGapSize: '4px',
    80.         lineStyle: 'dotted',
    81.         plotLabel: {
    82.           padding: '15px',
    83.           backgroundColor: 'white',
    84.           bold: true,
    85.           borderColor: '#e3e3e3',
    86.           borderRadius: '5px',
    87.           fontColor: '#2f2f2f',
    88.           fontFamily: 'Lato',
    89.           fontSize: '12px',
    90.           shadow: true,
    91.           shadowAlpha: 0.2,
    92.           shadowBlur: 5,
    93.           shadowColor: '#a1a1a1',
    94.           shadowDistance: 4,
    95.           textAlign: 'left',
    96.         },
    97.         scaleLabel: {
    98.           backgroundColor: '#424242',
    99.         },
    100.       },
    101.       series: [{
    102.           type: 'line',
    103.           text: 'Remaining Tasks',
    104.           values: [35, 42, 67, 89, 25, 34, 67, 85].sort().reverse(),
    105.           lineColor: '#42a5f5',
    106.           marker: {
    107.             visible: false,
    108.           },
    109.           scales: 'scale-x, scale-y',
    110.         },
    111.         {
    112.           type: 'line',
    113.           text: 'Remaining Effort',
    114.           values: [25, 32, 57, 79, 15, 24, 57, 75].sort().reverse(),
    115.           lineColor: '#5c6bc0',
    116.           marker: {
    117.             type: 'square',
    118.             backgroundColor: '#5c6bc0',
    119.           },
    120.           scales: 'scale-x, scale-y',
    121.         },
    122.         {
    123.           type: 'line',
    124.           text: 'Completed Tasks',
    125.           values: [90, 80, 70, 60, 50, 40, 30, 20],
    126.           lineColor: '#66bb6a',
    127.           marker: {
    128.             visible: false,
    129.           },
    130.           scales: 'scale-x, scale-y',
    131.         },
    132.         {
    133.           type: 'bar',
    134.           text: 'Completed Tasks',
    135.           values: [5, 10, 6, 3, 6, 2, 0, 9],
    136.           backgroundColor: '#ffa726',
    137.           scales: 'scale-x, scale-y-2',
    138.         },
    139.       ],
    140.     };
    141.  
    142.     // RENDER CHARTS
    143.     // -----------------------------
    144.     zingchart.render({
    145.       id: 'myChart',
    146.       data: chartConfig,
    147.       height: '100%',
    148.       width: '100%',
    149.     });
    150.   </script>
    151. </body>
    152.  
    153. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   ​
    13.   <div id="myChart" class="chart--container">
    14.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    15.   </div>
    16.  
    17. </body>
    18.  
    19. </html>
    1. .zc-body {
    2.   background-color: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. // CHART CONFIG
    2. // -----------------------------
    3. let chartConfig = {
    4.   type: 'mixed',
    5.   title: {
    6.     text: 'Sample Burndown Chart',
    7.     align: 'left',
    8.     marginLeft: '23%',
    9.   },
    10.   legend: {
    11.     adjustLayout: true,
    12.     verticalAlign: 'middle',
    13.   },
    14.   scaleX: {
    15.     labels: [
    16.       'Day 1',
    17.       'Day 2',
    18.       'Day 3',
    19.       'Day 4',
    20.       'Day 5',
    21.       'Day 6',
    22.       'Day 7',
    23.       'Day 8',
    24.     ], // one label for every datapoint
    25.   },
    26.   scaleY: {
    27.     guide: {
    28.       // dashed lines
    29.       visible: false,
    30.     },
    31.     label: {
    32.       text: 'Remaing effort (hours)',
    33.       fontSize: '14px',
    34.     },
    35.   },
    36.   scaleY2: {
    37.     label: {
    38.       text: 'Remaing and completed tasks',
    39.       fontSize: '14px',
    40.     },
    41.     maxValue: 100,
    42.     minValue: 0,
    43.     step: 25, // can define scale step values or default
    44.   },
    45.   crosshairX: {
    46.     lineColor: '#424242',
    47.     lineGapSize: '4px',
    48.     lineStyle: 'dotted',
    49.     plotLabel: {
    50.       padding: '15px',
    51.       backgroundColor: 'white',
    52.       bold: true,
    53.       borderColor: '#e3e3e3',
    54.       borderRadius: '5px',
    55.       fontColor: '#2f2f2f',
    56.       fontFamily: 'Lato',
    57.       fontSize: '12px',
    58.       shadow: true,
    59.       shadowAlpha: 0.2,
    60.       shadowBlur: 5,
    61.       shadowColor: '#a1a1a1',
    62.       shadowDistance: 4,
    63.       textAlign: 'left',
    64.     },
    65.     scaleLabel: {
    66.       backgroundColor: '#424242',
    67.     },
    68.   },
    69.   series: [{
    70.       type: 'line',
    71.       text: 'Remaining Tasks',
    72.       values: [35, 42, 67, 89, 25, 34, 67, 85].sort().reverse(),
    73.       lineColor: '#42a5f5',
    74.       marker: {
    75.         visible: false,
    76.       },
    77.       scales: 'scale-x, scale-y',
    78.     },
    79.     {
    80.       type: 'line',
    81.       text: 'Remaining Effort',
    82.       values: [25, 32, 57, 79, 15, 24, 57, 75].sort().reverse(),
    83.       lineColor: '#5c6bc0',
    84.       marker: {
    85.         type: 'square',
    86.         backgroundColor: '#5c6bc0',
    87.       },
    88.       scales: 'scale-x, scale-y',
    89.     },
    90.     {
    91.       type: 'line',
    92.       text: 'Completed Tasks',
    93.       values: [90, 80, 70, 60, 50, 40, 30, 20],
    94.       lineColor: '#66bb6a',
    95.       marker: {
    96.         visible: false,
    97.       },
    98.       scales: 'scale-x, scale-y',
    99.     },
    100.     {
    101.       type: 'bar',
    102.       text: 'Completed Tasks',
    103.       values: [5, 10, 6, 3, 6, 2, 0, 9],
    104.       backgroundColor: '#ffa726',
    105.       scales: 'scale-x, scale-y-2',
    106.     },
    107.   ],
    108. };
    109.  
    110. // RENDER CHARTS
    111. // -----------------------------
    112. zingchart.render({
    113.   id: 'myChart',
    114.   data: chartConfig,
    115.   height: '100%',
    116.   width: '100%',
    117. });