• 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="zc"></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     window.plot_jsRule = function(p) {
    35.       return {
    36.         backgroundColor: barColors[p.plotindex][p.nodeindex]
    37.       };
    38.     }
    39.  
    40.     var barColors = [
    41.       ['#F1D4D4', '#E3A9A9', '#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
    42.       ['#DFD9E2', '#BFB4C5', '#9F8EA7', '#7F698A', '#5F436D', '#473252'],
    43.       ['#D4DFE5', '#A9BFCA', '#7F9FB0', '#547F95', '#295F7B', '#1F475C'],
    44.       ['#D4E9F3', '#A9D4E6', '#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
    45.     ];
    46.     var legendColors = ['#D3D3D3', '#A7A7A7', '#7A7A7A', '#4E4E4E', '#393939', '#1A1A1A'];
    47.  
    48.     var chartJSON = {
    49.  
    50.       "graphset": [{
    51.         "clustered": true,
    52.  
    53.         "background-color": "#FFF",
    54.         "type": "bar",
    55.  
    56.         "plotarea": {
    57.           "margin": "90 40 50 40"
    58.         },
    59.  
    60.         "title": {
    61.           "text": "SNAPCHAT IS TOPS WITH AMERICAN TEENS",
    62.           "font-size": "22px",
    63.           "font-color": "#000",
    64.           "font-weight": "bold",
    65.           "text-align": "center",
    66.           "padding": 0
    67.         },
    68.  
    69.         "subtitle": {
    70.           "text": "Percentage of US teens who consider the following social networks their favorite",
    71.           "font-size": "14px",
    72.           "font-color": "#656263",
    73.           "font-weight": "normal",
    74.           "text-align": "left",
    75.           "padding": "0 0 0 10"
    76.         },
    77.  
    78.         "source": {
    79.           "text": "<b>SOURCES:</b> Piper Jaffray; Fall '17 survey of 6,100 teens with an average age of 16 years",
    80.           "font-size": "12px",
    81.           "font-color": "#656263",
    82.           "font-weight": "normal",
    83.           "text-align": "left",
    84.           "padding-left": 20,
    85.           "margin-bottom": 2
    86.         },
    87.  
    88.         "plot": {
    89.           "bar-width": "90%",
    90.           "jsRule": "plot_jsRule()",
    91.  
    92.           "value-box": {
    93.             "placement": "top",
    94.             "font-color": "#000",
    95.             "font-size": "12px",
    96.             "offset-y": 5
    97.           }
    98.         },
    99.  
    100.         "tooltip": {
    101.           "color": "#000",
    102.           "fontWeight": "bold",
    103.           "fontSize": 19,
    104.           "text": "%plot-text: %node-value%",
    105.           "jsRule": "plot_jsRule()"
    106.         },
    107.  
    108.         "legend": {
    109.           "layout": "x6",
    110.           "border-width": 0,
    111.           "padding": 0,
    112.           "offset-y": 40,
    113.           "toggle-action": "disabled",
    114.  
    115.           "item": {
    116.             "font-size": "14px",
    117.             "font-weight": "bold",
    118.             "font-color": "#222"
    119.           },
    120.           "marker": {
    121.             "size": 8
    122.           }
    123.         },
    124.  
    125.         "scale-x": {
    126.           "values": ["Snapchat", "Instagram", "Facebook", "Twitter"],
    127.           "max-items": 99,
    128.           "line-width": 2,
    129.           "item": {
    130.             "font-color": "#000",
    131.             "text-align": "center",
    132.             "font-size": "16px",
    133.             "font-weight": "bold"
    134.           },
    135.           "tick": {
    136.             "visible": false
    137.           }
    138.         },
    139.         "scale-y": {
    140.           "min-value": 0,
    141.           "max-value": 50,
    142.           "line-width": 0,
    143.           "format": "%scale-value%",
    144.           "item": {
    145.             "font-color": "#7A7A7A"
    146.           },
    147.           "tick": {
    148.             "visible": false
    149.           }
    150.         },
    151.  
    152.         "series": [{
    153.             "values": [11, 17, 24, 35, 39, 47],
    154.             "clustered": true,
    155.             "text": "Spring 2015",
    156.             "legend-marker": {
    157.               "background-color": legendColors[0]
    158.             }
    159.           },
    160.           {
    161.             "values": [29, 29, 23, 24, 23, 24],
    162.             "clustered": true,
    163.             "text": "Fall 2015",
    164.             "legend-marker": {
    165.               "background-color": legendColors[1]
    166.             }
    167.           },
    168.           {
    169.             "values": [12, 13, 15, 13, 11, 9],
    170.             "clustered": true,
    171.             "text": "Spring 2016",
    172.             "legend-marker": {
    173.               "background-color": legendColors[2]
    174.             }
    175.           },
    176.           {
    177.             "values": [21, 18, 16, 13, 11, 7],
    178.             "clustered": true,
    179.             "text": "Fall 2016",
    180.             "legend-marker": {
    181.               "background-color": legendColors[3]
    182.             }
    183.           },
    184.           {
    185.             "values": [],
    186.             "text": "Spring 2017",
    187.             "legend-marker": {
    188.               "background-color": legendColors[4]
    189.             }
    190.           },
    191.           {
    192.             "values": [],
    193.             "text": "Fall 2017",
    194.             "legend-marker": {
    195.               "background-color": legendColors[5]
    196.             }
    197.           }
    198.         ]
    199.       }]
    200.  
    201.     };
    202.  
    203.     window.addEventListener('load', function() {
    204.  
    205.       zingchart.render({
    206.         id: "zc",
    207.         width: 800,
    208.         height: 500,
    209.         output: "svg",
    210.         data: chartJSON
    211.       });
    212.  
    213.     });
    214.   </script>
    215. </body>
    216.  
    217. </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="zc"></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. window.plot_jsRule = function(p) {
    2.   return {
    3.     backgroundColor: barColors[p.plotindex][p.nodeindex]
    4.   };
    5. }
    6.  
    7. var barColors = [
    8.   ['#F1D4D4', '#E3A9A9', '#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
    9.   ['#DFD9E2', '#BFB4C5', '#9F8EA7', '#7F698A', '#5F436D', '#473252'],
    10.   ['#D4DFE5', '#A9BFCA', '#7F9FB0', '#547F95', '#295F7B', '#1F475C'],
    11.   ['#D4E9F3', '#A9D4E6', '#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
    12. ];
    13. var legendColors = ['#D3D3D3', '#A7A7A7', '#7A7A7A', '#4E4E4E', '#393939', '#1A1A1A'];
    14.  
    15. var chartJSON = {
    16.  
    17.   "graphset": [{
    18.     "clustered": true,
    19.  
    20.     "background-color": "#FFF",
    21.     "type": "bar",
    22.  
    23.     "plotarea": {
    24.       "margin": "90 40 50 40"
    25.     },
    26.  
    27.     "title": {
    28.       "text": "SNAPCHAT IS TOPS WITH AMERICAN TEENS",
    29.       "font-size": "22px",
    30.       "font-color": "#000",
    31.       "font-weight": "bold",
    32.       "text-align": "center",
    33.       "padding": 0
    34.     },
    35.  
    36.     "subtitle": {
    37.       "text": "Percentage of US teens who consider the following social networks their favorite",
    38.       "font-size": "14px",
    39.       "font-color": "#656263",
    40.       "font-weight": "normal",
    41.       "text-align": "left",
    42.       "padding": "0 0 0 10"
    43.     },
    44.  
    45.     "source": {
    46.       "text": "<b>SOURCES:</b> Piper Jaffray; Fall '17 survey of 6,100 teens with an average age of 16 years",
    47.       "font-size": "12px",
    48.       "font-color": "#656263",
    49.       "font-weight": "normal",
    50.       "text-align": "left",
    51.       "padding-left": 20,
    52.       "margin-bottom": 2
    53.     },
    54.  
    55.     "plot": {
    56.       "bar-width": "90%",
    57.       "jsRule": "plot_jsRule()",
    58.  
    59.       "value-box": {
    60.         "placement": "top",
    61.         "font-color": "#000",
    62.         "font-size": "12px",
    63.         "offset-y": 5
    64.       }
    65.     },
    66.  
    67.     "tooltip": {
    68.       "color": "#000",
    69.       "fontWeight": "bold",
    70.       "fontSize": 19,
    71.       "text": "%plot-text: %node-value%",
    72.       "jsRule": "plot_jsRule()"
    73.     },
    74.  
    75.     "legend": {
    76.       "layout": "x6",
    77.       "border-width": 0,
    78.       "padding": 0,
    79.       "offset-y": 40,
    80.       "toggle-action": "disabled",
    81.  
    82.       "item": {
    83.         "font-size": "14px",
    84.         "font-weight": "bold",
    85.         "font-color": "#222"
    86.       },
    87.       "marker": {
    88.         "size": 8
    89.       }
    90.     },
    91.  
    92.     "scale-x": {
    93.       "values": ["Snapchat", "Instagram", "Facebook", "Twitter"],
    94.       "max-items": 99,
    95.       "line-width": 2,
    96.       "item": {
    97.         "font-color": "#000",
    98.         "text-align": "center",
    99.         "font-size": "16px",
    100.         "font-weight": "bold"
    101.       },
    102.       "tick": {
    103.         "visible": false
    104.       }
    105.     },
    106.     "scale-y": {
    107.       "min-value": 0,
    108.       "max-value": 50,
    109.       "line-width": 0,
    110.       "format": "%scale-value%",
    111.       "item": {
    112.         "font-color": "#7A7A7A"
    113.       },
    114.       "tick": {
    115.         "visible": false
    116.       }
    117.     },
    118.  
    119.     "series": [{
    120.         "values": [11, 17, 24, 35, 39, 47],
    121.         "clustered": true,
    122.         "text": "Spring 2015",
    123.         "legend-marker": {
    124.           "background-color": legendColors[0]
    125.         }
    126.       },
    127.       {
    128.         "values": [29, 29, 23, 24, 23, 24],
    129.         "clustered": true,
    130.         "text": "Fall 2015",
    131.         "legend-marker": {
    132.           "background-color": legendColors[1]
    133.         }
    134.       },
    135.       {
    136.         "values": [12, 13, 15, 13, 11, 9],
    137.         "clustered": true,
    138.         "text": "Spring 2016",
    139.         "legend-marker": {
    140.           "background-color": legendColors[2]
    141.         }
    142.       },
    143.       {
    144.         "values": [21, 18, 16, 13, 11, 7],
    145.         "clustered": true,
    146.         "text": "Fall 2016",
    147.         "legend-marker": {
    148.           "background-color": legendColors[3]
    149.         }
    150.       },
    151.       {
    152.         "values": [],
    153.         "text": "Spring 2017",
    154.         "legend-marker": {
    155.           "background-color": legendColors[4]
    156.         }
    157.       },
    158.       {
    159.         "values": [],
    160.         "text": "Fall 2017",
    161.         "legend-marker": {
    162.           "background-color": legendColors[5]
    163.         }
    164.       }
    165.     ]
    166.   }]
    167.  
    168. };
    169.  
    170. window.addEventListener('load', function() {
    171.  
    172.   zingchart.render({
    173.     id: "zc",
    174.     width: 800,
    175.     height: 500,
    176.     output: "svg",
    177.     data: chartJSON
    178.   });
    179.  
    180. });