• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style></style>
    11. </head>
    12.  
    13. <body>
    14.   <div id='myChart'></div>
    15.   <script>
    16.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    17.     var myConfig = {
    18.       globals: {
    19.         fontFamily: "Roboto"
    20.       },
    21.       type: "bar",
    22.       backgroundColor: "#f4f2f2",
    23.       title: {
    24.         text: "Revenue Comparison",
    25.         backgroundColor: "none",
    26.         color: "#333"
    27.       },
    28.       subtitle: {
    29.         text: "Q1-Q4 2014",
    30.         color: "#333"
    31.       },
    32.       plotarea: {
    33.         backgroundColor: "#fff"
    34.       },
    35.       scaleX: {
    36.         lineColor: "#7d7d7d",
    37.         tick: {
    38.           lineColor: "#7d7d7d"
    39.         },
    40.         guide: {
    41.           visible: false
    42.         },
    43.         values: ["Q1", "Q2", "Q3", "Q4"],
    44.         markers: [{
    45.           type: "area",
    46.           range: [1.5, 2.5],
    47.           backgroundColor: "red",
    48.           alpha: 0.2,
    49.           label: {
    50.             text: "Netflix reduces fee",
    51.             angle: 0,
    52.             "offset-x": 13,
    53.             "offset-y": -210,
    54.             color: "#7d7d7d"
    55.           }
    56.         }]
    57.       },
    58.       scaleY: {
    59.         lineColor: "#7d7d7d",
    60.         tick: {
    61.           lineColor: "#7d7d7d"
    62.         },
    63.         format: "$%v",
    64.         short: true
    65.       },
    66.       legend: {
    67.         backgroundColor: "none",
    68.         layout: "h",
    69.         verticalAlign: "bottom",
    70.         align: "center",
    71.         borderRadius: "3px",
    72.         shadow: false,
    73.         borderWidth: 0,
    74.         marker: {
    75.           borderWidth: 0,
    76.           borderRadius: "3px"
    77.         }
    78.       },
    79.       tooltip: {
    80.         borderRadius: "3px",
    81.         borderColor: "#F4F2F2",
    82.         borderWidth: 2,
    83.         width: 90,
    84.         callout: true,
    85.         height: 50,
    86.         fontSize: 12,
    87.         shadow: false,
    88.         text: "%kt: $%v in %t Sales",
    89.         short: true,
    90.         decimals: 1
    91.       },
    92.       plot: {
    93.         alpha: 0.8,
    94.         borderRadius: "3px",
    95.         rules: [{
    96.             rule: "%p === 0 && %i === 3",
    97.             backgroundColor: "none",
    98.             "line-style": "dashed",
    99.             "border-color": "#447884",
    100.             "border-width": 1
    101.           },
    102.           {
    103.             rule: "%p === 1 && %i === 3",
    104.             backgroundColor: "none",
    105.             "line-style": "dashed",
    106.             "border-color": "#ff9800",
    107.             "border-width": 1
    108.           },
    109.         ]
    110.       },
    111.       series: [{
    112.           "values": [3500000, 4200000, 6700000, 8900000],
    113.           text: "Internet",
    114.           backgroundColor: "#447884 #69a3af",
    115.         },
    116.         {
    117.           "values": [2800000, 4000000, 3900000, 3600000],
    118.           text: "Cable",
    119.           backgroundColor: "#ff9800 #f2b157",
    120.         }
    121.       ]
    122.     };
    123.  
    124.     zingchart.render({
    125.       id: 'myChart',
    126.       data: myConfig,
    127.       height: 400,
    128.       width: 600
    129.     });
    130.   </script>
    131. </body>
    132.  
    133. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14. </body>
    15.  
    16. </html>
    1.  
    1. var myConfig = {
    2.   globals: {
    3.     fontFamily: "Roboto"
    4.   },
    5.   type: "bar",
    6.   backgroundColor: "#f4f2f2",
    7.   title: {
    8.     text: "Revenue Comparison",
    9.     backgroundColor: "none",
    10.     color: "#333"
    11.   },
    12.   subtitle: {
    13.     text: "Q1-Q4 2014",
    14.     color: "#333"
    15.   },
    16.   plotarea: {
    17.     backgroundColor: "#fff"
    18.   },
    19.   scaleX: {
    20.     lineColor: "#7d7d7d",
    21.     tick: {
    22.       lineColor: "#7d7d7d"
    23.     },
    24.     guide: {
    25.       visible: false
    26.     },
    27.     values: ["Q1", "Q2", "Q3", "Q4"],
    28.     markers: [{
    29.       type: "area",
    30.       range: [1.5, 2.5],
    31.       backgroundColor: "red",
    32.       alpha: 0.2,
    33.       label: {
    34.         text: "Netflix reduces fee",
    35.         angle: 0,
    36.         "offset-x": 13,
    37.         "offset-y": -210,
    38.         color: "#7d7d7d"
    39.       }
    40.     }]
    41.   },
    42.   scaleY: {
    43.     lineColor: "#7d7d7d",
    44.     tick: {
    45.       lineColor: "#7d7d7d"
    46.     },
    47.     format: "$%v",
    48.     short: true
    49.   },
    50.   legend: {
    51.     backgroundColor: "none",
    52.     layout: "h",
    53.     verticalAlign: "bottom",
    54.     align: "center",
    55.     borderRadius: "3px",
    56.     shadow: false,
    57.     borderWidth: 0,
    58.     marker: {
    59.       borderWidth: 0,
    60.       borderRadius: "3px"
    61.     }
    62.   },
    63.   tooltip: {
    64.     borderRadius: "3px",
    65.     borderColor: "#F4F2F2",
    66.     borderWidth: 2,
    67.     width: 90,
    68.     callout: true,
    69.     height: 50,
    70.     fontSize: 12,
    71.     shadow: false,
    72.     text: "%kt: $%v in %t Sales",
    73.     short: true,
    74.     decimals: 1
    75.   },
    76.   plot: {
    77.     alpha: 0.8,
    78.     borderRadius: "3px",
    79.     rules: [{
    80.         rule: "%p === 0 && %i === 3",
    81.         backgroundColor: "none",
    82.         "line-style": "dashed",
    83.         "border-color": "#447884",
    84.         "border-width": 1
    85.       },
    86.       {
    87.         rule: "%p === 1 && %i === 3",
    88.         backgroundColor: "none",
    89.         "line-style": "dashed",
    90.         "border-color": "#ff9800",
    91.         "border-width": 1
    92.       },
    93.     ]
    94.   },
    95.   series: [{
    96.       "values": [3500000, 4200000, 6700000, 8900000],
    97.       text: "Internet",
    98.       backgroundColor: "#447884 #69a3af",
    99.     },
    100.     {
    101.       "values": [2800000, 4000000, 3900000, 3600000],
    102.       text: "Cable",
    103.       backgroundColor: "#ff9800 #f2b157",
    104.     }
    105.   ]
    106. };
    107.  
    108. zingchart.render({
    109.   id: 'myChart',
    110.   data: myConfig,
    111.   height: 400,
    112.   width: 600
    113. });