• Edit
  • Download
    1. <!DOCTYPE html>
    2. <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.     html,
    10.     body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       min-height: 150px;
    19.       width: 100%;
    20.       height: 100%;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body>
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart" class="chart--container">
    32.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    36.     // because this Javascript is injected into the document head
    37.     window.addEventListener('load', () => {
    38.       // Javascript code to execute after DOM content
    39.  
    40.       // full ZingChart schema can be found here:
    41.       // https://www.zingchart.com/docs/api/json-configuration/
    42.       let chartConfig = {
    43.         type: 'scatter',
    44.         globals: {
    45.           fontSize: '14px'
    46.         },
    47.         title: {
    48.           text: 'Using rules for styling thresholds',
    49.           fontSize: '24px'
    50.         },
    51.         legend: {
    52.           cursor: 'hand',
    53.           draggable: true
    54.         },
    55.         // plot represents general series, or plots, styling
    56.         plot: {
    57.           // hoverstate
    58.           tooltip: {
    59.             // % symbol represents a token to insert a value. Full list here:
    60.             // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    61.             text: '%plot-text %kl was %v (&deg;F)',
    62.             padding: '10px 15px',
    63.             borderRadius: '3px',
    64.             // htmlMode renders text attribute as html so
    65.             // &deg; is rendered
    66.             htmlMode: true
    67.           },
    68.           // animation docs here:
    69.           // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    70.           animation: {
    71.             effect: 'ANIMATION_SLIDE_TOP',
    72.             method: 'ANIMATION_BOUNCE_EASE_OUT',
    73.             sequence: 'ANIMATION_BY_PLOT',
    74.             speed: 375
    75.           },
    76.           lineWidth: '3px',
    77.           // line node styling
    78.           marker: {
    79.             borderWidth: '0px',
    80.             size: '6px',
    81.             rules: [{
    82.                 rule: '%v > 40',
    83.                 backgroundColor: '#000'
    84.               },
    85.               {
    86.                 rule: '%v < 20',
    87.                 backgroundColor: '#000'
    88.               }
    89.             ],
    90.           }
    91.         },
    92.         scaleX: {
    93.           // set scale label
    94.           label: {
    95.             text: 'Hour'
    96.           },
    97.         },
    98.         scaleY: {
    99.           // scale label with unicode character
    100.           label: {
    101.             text: 'Temperature (°F)'
    102.           },
    103.           markers: [{
    104.               type: 'line',
    105.               lineWidth: 2,
    106.               range: [40],
    107.               label: {
    108.                 text: 'Upper Tolerance'
    109.               }
    110.             },
    111.             {
    112.               type: 'line',
    113.               lineWidth: 2,
    114.               range: [20],
    115.               label: {
    116.                 text: 'Lower Tolerance'
    117.               }
    118.             }
    119.           ]
    120.         },
    121.         series: [{
    122.             values: [
    123.               [1, 9],
    124.               [2, 15],
    125.               [3, 21],
    126.               [4, 30],
    127.               [5, 40],
    128.               [6, 59],
    129.               [7, 60],
    130.               [8, 75]
    131.             ],
    132.             text: 'Week 1'
    133.           },
    134.           {
    135.             values: [
    136.               [2.1, 13],
    137.               [3.5, 25],
    138.               [4.9, 35],
    139.               [5.3, 41],
    140.               [6.5, 57],
    141.               [7.1, 61],
    142.               [8.7, 70]
    143.             ],
    144.             text: 'Week 2'
    145.           },
    146.           {
    147.             values: [
    148.               [1.8, 21],
    149.               [1.9, 29],
    150.               [4.1, 33],
    151.               [4.5, 39],
    152.               [6.9, 51],
    153.               [7.4, 64],
    154.               [8.9, 70]
    155.             ],
    156.             text: 'Week 3'
    157.           },
    158.           {
    159.             values: [
    160.               [0.9, 15],
    161.               [1.1, 24],
    162.               [2.3, 29],
    163.               [2.9, 30],
    164.               [3.3, 35],
    165.               [5.6, 67],
    166.               [6.9, 70]
    167.             ],
    168.             text: 'Week 4'
    169.           },
    170.           {
    171.             values: [
    172.               [1.9, 5],
    173.               [2.5, 10],
    174.               [3.1, 30],
    175.               [6.5, 45],
    176.               [6.9, 74],
    177.               [7.2, 50],
    178.               [7.8, 56]
    179.             ],
    180.             text: 'Week 5'
    181.           }
    182.         ]
    183.       };
    184.  
    185.       // render chart
    186.       zingchart.render({
    187.         id: 'myChart',
    188.         data: chartConfig,
    189.         height: '100%',
    190.         width: '100%',
    191.       });
    192.     });
    193.   </script>
    194. </body>
    195.  
    196. </html>
    1. <!DOCTYPE html>
    2. <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. <body>
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. html,
    2. body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   min-height: 150px;
    11.   width: 100%;
    12.   height: 100%;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // Javascript code to execute after DOM content
    5.  
    6.   // full ZingChart schema can be found here:
    7.   // https://www.zingchart.com/docs/api/json-configuration/
    8.   let chartConfig = {
    9.     type: 'scatter',
    10.     globals: {
    11.       fontSize: '14px'
    12.     },
    13.     title: {
    14.       text: 'Using rules for styling thresholds',
    15.       fontSize: '24px'
    16.     },
    17.     legend: {
    18.       cursor: 'hand',
    19.       draggable: true
    20.     },
    21.     // plot represents general series, or plots, styling
    22.     plot: {
    23.       // hoverstate
    24.       tooltip: {
    25.         // % symbol represents a token to insert a value. Full list here:
    26.         // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    27.         text: '%plot-text %kl was %v (&deg;F)',
    28.         padding: '10px 15px',
    29.         borderRadius: '3px',
    30.         // htmlMode renders text attribute as html so
    31.         // &deg; is rendered
    32.         htmlMode: true
    33.       },
    34.       // animation docs here:
    35.       // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    36.       animation: {
    37.         effect: 'ANIMATION_SLIDE_TOP',
    38.         method: 'ANIMATION_BOUNCE_EASE_OUT',
    39.         sequence: 'ANIMATION_BY_PLOT',
    40.         speed: 375
    41.       },
    42.       lineWidth: '3px',
    43.       // line node styling
    44.       marker: {
    45.         borderWidth: '0px',
    46.         size: '6px',
    47.         rules: [{
    48.             rule: '%v > 40',
    49.             backgroundColor: '#000'
    50.           },
    51.           {
    52.             rule: '%v < 20',
    53.             backgroundColor: '#000'
    54.           }
    55.         ],
    56.       }
    57.     },
    58.     scaleX: {
    59.       // set scale label
    60.       label: {
    61.         text: 'Hour'
    62.       },
    63.     },
    64.     scaleY: {
    65.       // scale label with unicode character
    66.       label: {
    67.         text: 'Temperature (°F)'
    68.       },
    69.       markers: [{
    70.           type: 'line',
    71.           lineWidth: 2,
    72.           range: [40],
    73.           label: {
    74.             text: 'Upper Tolerance'
    75.           }
    76.         },
    77.         {
    78.           type: 'line',
    79.           lineWidth: 2,
    80.           range: [20],
    81.           label: {
    82.             text: 'Lower Tolerance'
    83.           }
    84.         }
    85.       ]
    86.     },
    87.     series: [{
    88.         values: [
    89.           [1, 9],
    90.           [2, 15],
    91.           [3, 21],
    92.           [4, 30],
    93.           [5, 40],
    94.           [6, 59],
    95.           [7, 60],
    96.           [8, 75]
    97.         ],
    98.         text: 'Week 1'
    99.       },
    100.       {
    101.         values: [
    102.           [2.1, 13],
    103.           [3.5, 25],
    104.           [4.9, 35],
    105.           [5.3, 41],
    106.           [6.5, 57],
    107.           [7.1, 61],
    108.           [8.7, 70]
    109.         ],
    110.         text: 'Week 2'
    111.       },
    112.       {
    113.         values: [
    114.           [1.8, 21],
    115.           [1.9, 29],
    116.           [4.1, 33],
    117.           [4.5, 39],
    118.           [6.9, 51],
    119.           [7.4, 64],
    120.           [8.9, 70]
    121.         ],
    122.         text: 'Week 3'
    123.       },
    124.       {
    125.         values: [
    126.           [0.9, 15],
    127.           [1.1, 24],
    128.           [2.3, 29],
    129.           [2.9, 30],
    130.           [3.3, 35],
    131.           [5.6, 67],
    132.           [6.9, 70]
    133.         ],
    134.         text: 'Week 4'
    135.       },
    136.       {
    137.         values: [
    138.           [1.9, 5],
    139.           [2.5, 10],
    140.           [3.1, 30],
    141.           [6.5, 45],
    142.           [6.9, 74],
    143.           [7.2, 50],
    144.           [7.8, 56]
    145.         ],
    146.         text: 'Week 5'
    147.       }
    148.     ]
    149.   };
    150.  
    151.   // render chart
    152.   zingchart.render({
    153.     id: 'myChart',
    154.     data: chartConfig,
    155.     height: '100%',
    156.     width: '100%',
    157.   });
    158. });