• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig = {
    24.       "type": "rankflow",
    25.       "globals": {
    26.         "font-family": "Arial",
    27.       },
    28.       "options": {
    29.         "global-ranking": false, // hide left column and make chart fit full width
    30.         "color-type": "palette",
    31.         "palette": ['#00BAF2', '#9B26AF', '#E82121', '#E80C60', '#4caf4f'],
    32.         "style": {
    33.           "label-overall": {
    34.             "text": "OVERALL RANK",
    35.             "font-weight": "bold"
    36.           },
    37.           "tooltip": {
    38.             "font-size": "13px",
    39.             "font-color": "#fff",
    40.             "background-color": "#424242",
    41.             "shadow": false,
    42.             "border-width": "0px",
    43.             "border-color": "none",
    44.             "border-radius": "8px"
    45.           },
    46.           "flow": {
    47.             "border-width": "0px",
    48.             "border-color": "none",
    49.             "shadow": false
    50.           },
    51.           "item-flow": {
    52.             "font-size": "13px",
    53.             "font-color": "#ffffff"
    54.           },
    55.           "rank-overall": {
    56.             "background-color": "#393d4b",
    57.             "font-size": "13px",
    58.             "font-color": "#d8d9db"
    59.           },
    60.           "rank-left": {
    61.             "visible": 0
    62.           },
    63.           "rank-right": {
    64.             "visible": 0
    65.           }
    66.         }
    67.       },
    68.       "plotarea": {
    69.         "margin": 20
    70.       },
    71.       "scale-x": {
    72.         "labels": [
    73.           "Food Quality",
    74.           "Complaints",
    75.           "Avg. Meal Cost in ($$$)"
    76.         ],
    77.         "item": {
    78.           "font-color": "#b1b5bf",
    79.           "font-size": "14px",
    80.           "font-weight": "normal"
    81.         },
    82.         "values": [
    83.           "Food Quality",
    84.           "Complaints",
    85.           "Avg. Meal Cost in ($$$)"
    86.         ]
    87.       },
    88.       "series": [{
    89.           "text": "Café Caterwaul",
    90.           "ranks": [
    91.             5,
    92.             1,
    93.             2
    94.           ],
    95.           "rank": 2
    96.         },
    97.         {
    98.           "text": "Plutarch",
    99.           "ranks": [
    100.             3,
    101.             3,
    102.             1
    103.           ],
    104.           "rank": 1
    105.         },
    106.         {
    107.           "text": "Eden Parlor",
    108.           "ranks": [
    109.             1,
    110.             4,
    111.             5
    112.           ],
    113.           "rank": 3
    114.         },
    115.         {
    116.           "text": "Naiveté Sushi",
    117.           "ranks": [
    118.             2,
    119.             2,
    120.             4
    121.           ],
    122.           "rank": 4
    123.         },
    124.         {
    125.           "text": "Flying Chaucer",
    126.           "ranks": [
    127.             4,
    128.             5,
    129.             3
    130.           ],
    131.           "rank": 5
    132.         }
    133.       ]
    134.     };
    135.  
    136.     zingchart.render({
    137.       id: 'myChart',
    138.       data: myConfig,
    139.       height: "100%",
    140.       width: "100%"
    141.     });
    142.   </script>
    143. </body>
    144.  
    145. </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'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfig = {
    2.   "type": "rankflow",
    3.   "globals": {
    4.     "font-family": "Arial",
    5.   },
    6.   "options": {
    7.     "global-ranking": false, // hide left column and make chart fit full width
    8.     "color-type": "palette",
    9.     "palette": ['#00BAF2', '#9B26AF', '#E82121', '#E80C60', '#4caf4f'],
    10.     "style": {
    11.       "label-overall": {
    12.         "text": "OVERALL RANK",
    13.         "font-weight": "bold"
    14.       },
    15.       "tooltip": {
    16.         "font-size": "13px",
    17.         "font-color": "#fff",
    18.         "background-color": "#424242",
    19.         "shadow": false,
    20.         "border-width": "0px",
    21.         "border-color": "none",
    22.         "border-radius": "8px"
    23.       },
    24.       "flow": {
    25.         "border-width": "0px",
    26.         "border-color": "none",
    27.         "shadow": false
    28.       },
    29.       "item-flow": {
    30.         "font-size": "13px",
    31.         "font-color": "#ffffff"
    32.       },
    33.       "rank-overall": {
    34.         "background-color": "#393d4b",
    35.         "font-size": "13px",
    36.         "font-color": "#d8d9db"
    37.       },
    38.       "rank-left": {
    39.         "visible": 0
    40.       },
    41.       "rank-right": {
    42.         "visible": 0
    43.       }
    44.     }
    45.   },
    46.   "plotarea": {
    47.     "margin": 20
    48.   },
    49.   "scale-x": {
    50.     "labels": [
    51.       "Food Quality",
    52.       "Complaints",
    53.       "Avg. Meal Cost in ($$$)"
    54.     ],
    55.     "item": {
    56.       "font-color": "#b1b5bf",
    57.       "font-size": "14px",
    58.       "font-weight": "normal"
    59.     },
    60.     "values": [
    61.       "Food Quality",
    62.       "Complaints",
    63.       "Avg. Meal Cost in ($$$)"
    64.     ]
    65.   },
    66.   "series": [{
    67.       "text": "Café Caterwaul",
    68.       "ranks": [
    69.         5,
    70.         1,
    71.         2
    72.       ],
    73.       "rank": 2
    74.     },
    75.     {
    76.       "text": "Plutarch",
    77.       "ranks": [
    78.         3,
    79.         3,
    80.         1
    81.       ],
    82.       "rank": 1
    83.     },
    84.     {
    85.       "text": "Eden Parlor",
    86.       "ranks": [
    87.         1,
    88.         4,
    89.         5
    90.       ],
    91.       "rank": 3
    92.     },
    93.     {
    94.       "text": "Naiveté Sushi",
    95.       "ranks": [
    96.         2,
    97.         2,
    98.         4
    99.       ],
    100.       "rank": 4
    101.     },
    102.     {
    103.       "text": "Flying Chaucer",
    104.       "ranks": [
    105.         4,
    106.         5,
    107.         3
    108.       ],
    109.       "rank": 5
    110.     }
    111.   ]
    112. };
    113.  
    114. zingchart.render({
    115.   id: 'myChart',
    116.   data: myConfig,
    117.   height: "100%",
    118.   width: "100%"
    119. });