• 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"];
    36.  
    37.     function customRules(e) {
    38.       console.log(e);
    39.       let {
    40.         scaletext,
    41.         scaleval,
    42.         nodeindex
    43.       } = e;
    44.       console.log(`scaletext: ${scaletext}, scaleval: ${scaleval}, nodeindex: ${nodeindex}`);
    45.     }
    46.  
    47.     // window:load event for Javascript to run after HTML
    48.     // because this Javascript is injected into the document head
    49.     window.addEventListener('load', () => {
    50.       // Javascript code to execute after DOM content
    51.  
    52.       // full ZingChart schema can be found here:
    53.       // https://www.zingchart.com/docs/api/json-configuration/
    54.       let chartConfig = {
    55.         type: 'bar',
    56.         globals: {
    57.           fontSize: '14px'
    58.         },
    59.         title: {
    60.           text: 'Conditional Formatting Rules',
    61.           fontSize: '24px'
    62.         },
    63.         legend: {
    64.           draggable: true
    65.         },
    66.         // plot represents general series, or plots, styling
    67.         plot: {
    68.           // hoverstate
    69.           tooltip: {
    70.             // % symbol represents a token to insert a value. Full list here:
    71.             // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    72.             text: '%plot-text %kl was %v (&deg;F)',
    73.             borderRadius: '3px',
    74.             // htmlMode renders text attribute as html so
    75.             // &deg; is rendered
    76.             htmlMode: true
    77.           },
    78.           valueBox: {
    79.             color: '#fff',
    80.             placement: 'top-in'
    81.           },
    82.           // animation docs here:
    83.           // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    84.           animation: {
    85.             effect: 'ANIMATION_EXPAND_BOTTOM',
    86.             method: 'ANIMATION_STRONG_EASE_OUT',
    87.             sequence: 'ANIMATION_BY_NODE',
    88.             speed: 275
    89.           },
    90.           jsRule: 'customRules()',
    91.           rules: [{
    92.               rule: '"%kl" == "Tue"',
    93.               backgroundColor: 'red'
    94.             },
    95.             {
    96.               rule: '"%kt" == "Wed"',
    97.               backgroundColor: 'red'
    98.             },
    99.             {
    100.               rule: '"%kv" == "4"',
    101.               backgroundColor: 'red'
    102.             },
    103.             {
    104.               rule: '%kv == 5',
    105.               backgroundColor: 'green'
    106.             }
    107.           ]
    108.         },
    109.         scaleX: {
    110.           // set scale label
    111.           label: {
    112.             text: 'Days'
    113.           },
    114.           // convert text on scale indices
    115.           labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    116.         },
    117.         scaleY: {
    118.           // scale label with unicode character
    119.           label: {
    120.             text: 'Temperature (°F)'
    121.           }
    122.         },
    123.         // plot values
    124.         series: [{
    125.             text: 'Week 1',
    126.             values: [23, 20, 27, 29, 25, 17, 15],
    127.             backgroundColor: '#64b5f6'
    128.           },
    129.           {
    130.             text: 'Week 2',
    131.             values: [35, 42, 33, 49, 35, 47, 35],
    132.             backgroundColor: '#ffb74d'
    133.           }
    134.         ]
    135.       };
    136.  
    137.       // render chart
    138.       zingchart.render({
    139.         id: 'myChart',
    140.         data: chartConfig,
    141.         height: '100%',
    142.         width: '100%',
    143.       });
    144.     });
    145.   </script>
    146. </body>
    147.  
    148. </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. function customRules(e) {
    2.   console.log(e);
    3.   let {
    4.     scaletext,
    5.     scaleval,
    6.     nodeindex
    7.   } = e;
    8.   console.log(`scaletext: ${scaletext}, scaleval: ${scaleval}, nodeindex: ${nodeindex}`);
    9. }
    10.  
    11. // window:load event for Javascript to run after HTML
    12. // because this Javascript is injected into the document head
    13. window.addEventListener('load', () => {
    14.   // Javascript code to execute after DOM content
    15.  
    16.   // full ZingChart schema can be found here:
    17.   // https://www.zingchart.com/docs/api/json-configuration/
    18.   let chartConfig = {
    19.     type: 'bar',
    20.     globals: {
    21.       fontSize: '14px'
    22.     },
    23.     title: {
    24.       text: 'Conditional Formatting Rules',
    25.       fontSize: '24px'
    26.     },
    27.     legend: {
    28.       draggable: true
    29.     },
    30.     // plot represents general series, or plots, styling
    31.     plot: {
    32.       // hoverstate
    33.       tooltip: {
    34.         // % symbol represents a token to insert a value. Full list here:
    35.         // https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/
    36.         text: '%plot-text %kl was %v (&deg;F)',
    37.         borderRadius: '3px',
    38.         // htmlMode renders text attribute as html so
    39.         // &deg; is rendered
    40.         htmlMode: true
    41.       },
    42.       valueBox: {
    43.         color: '#fff',
    44.         placement: 'top-in'
    45.       },
    46.       // animation docs here:
    47.       // https://www.zingchart.com/docs/tutorials/design-and-styling/chart-animation/#animation__effect
    48.       animation: {
    49.         effect: 'ANIMATION_EXPAND_BOTTOM',
    50.         method: 'ANIMATION_STRONG_EASE_OUT',
    51.         sequence: 'ANIMATION_BY_NODE',
    52.         speed: 275
    53.       },
    54.       jsRule: 'customRules()',
    55.       rules: [{
    56.           rule: '"%kl" == "Tue"',
    57.           backgroundColor: 'red'
    58.         },
    59.         {
    60.           rule: '"%kt" == "Wed"',
    61.           backgroundColor: 'red'
    62.         },
    63.         {
    64.           rule: '"%kv" == "4"',
    65.           backgroundColor: 'red'
    66.         },
    67.         {
    68.           rule: '%kv == 5',
    69.           backgroundColor: 'green'
    70.         }
    71.       ]
    72.     },
    73.     scaleX: {
    74.       // set scale label
    75.       label: {
    76.         text: 'Days'
    77.       },
    78.       // convert text on scale indices
    79.       labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    80.     },
    81.     scaleY: {
    82.       // scale label with unicode character
    83.       label: {
    84.         text: 'Temperature (°F)'
    85.       }
    86.     },
    87.     // plot values
    88.     series: [{
    89.         text: 'Week 1',
    90.         values: [23, 20, 27, 29, 25, 17, 15],
    91.         backgroundColor: '#64b5f6'
    92.       },
    93.       {
    94.         text: 'Week 2',
    95.         values: [35, 42, 33, 49, 35, 47, 35],
    96.         backgroundColor: '#ffb74d'
    97.       }
    98.     ]
    99.   };
    100.  
    101.   // render chart
    102.   zingchart.render({
    103.     id: 'myChart',
    104.     data: chartConfig,
    105.     height: '100%',
    106.     width: '100%',
    107.   });
    108. });