• 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.         "font-family": "Roboto"
    20.       },
    21.       type: "bar",
    22.       backgroundColor: "#f4f2f2",
    23.       title: {
    24.         text: "Revenue Comparison",
    25.         "background-color": "none",
    26.         color: "#333"
    27.       },
    28.       subtitle: {
    29.         text: "Q1-Q4 2015",
    30.         color: "#333"
    31.       },
    32.       plotarea: {
    33.         "margin-top": 100,
    34.         "margin-bottom": 30,
    35.         "background-color": "#fff"
    36.       },
    37.       scaleX: {
    38.         values: ["Q1", "Q2", "Q3", "Q4"],
    39.         lineColor: "#7d7d7d",
    40.         tick: {
    41.           lineColor: "#7d7d7d"
    42.         },
    43.         guide: {
    44.           visible: false
    45.         },
    46.         markers: [{
    47.           type: "area",
    48.           range: [1.5, 2.5],
    49.           backgroundColor: "red",
    50.           alpha: 0.2,
    51.           label: {
    52.             text: "Netflix reduces fee",
    53.             angle: 0,
    54.             "offset-x": 13,
    55.             "offset-y": -210,
    56.             color: "#7d7d7d"
    57.           }
    58.         }]
    59.       },
    60.       scaleY: {
    61.         lineColor: "#7d7d7d",
    62.         tick: {
    63.           lineColor: "#7d7d7d"
    64.         },
    65.         format: "$%v",
    66.         short: true
    67.       },
    68.       legend: {
    69.         borderRadius: "3px",
    70.         borderColor: "none",
    71.         backgroundColor: "none",
    72.         layout: "h",
    73.         verticalAlign: "bottom",
    74.         align: "center",
    75.         shadow: false,
    76.         marker: {
    77.           borderRadius: "2px",
    78.           borderColor: "none"
    79.         }
    80.       },
    81.       tooltip: {
    82.         borderRadius: "3px",
    83.         borderColor: "#F4F2F2",
    84.         borderWidth: 2,
    85.         width: 90,
    86.         callout: true,
    87.         height: 50,
    88.         fontSize: 12,
    89.         shadow: false,
    90.         text: "%kt: $%v in %t Sales",
    91.         short: true,
    92.         decimals: 1,
    93.         rules: [{
    94.           rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
    95.           text: "%kt Projected: $%v in %t Sales",
    96.           backgroundColor: "#7d7d7d"
    97.         }]
    98.       },
    99.       plot: {
    100.         alpha: 0.8,
    101.         borderRadius: "3px",
    102.         rules: [{
    103.             rule: "%p === 0 && %i === 3",
    104.             backgroundColor: "none",
    105.             "line-style": "dashed",
    106.             "border-color": "#447884",
    107.             "border-width": 1
    108.           },
    109.           {
    110.             rule: "%p === 1 && %i === 3",
    111.             backgroundColor: "none",
    112.             "line-style": "dashed",
    113.             "border-color": "#ff9800",
    114.             "border-width": 1
    115.           },
    116.         ]
    117.       },
    118.       labels: [{
    119.           "text": "Adjust Projections",
    120.           fontSize: 12,
    121.           y: 4,
    122.           x: 38
    123.         },
    124.         {
    125.           text: "Internet:",
    126.           y: 30,
    127.           x: 20
    128.         },
    129.         {
    130.           text: "Cable:",
    131.           y: 60,
    132.           x: 28
    133.         },
    134.         {
    135.           id: "i10plus",
    136.           text: "+10%",
    137.           y: 30,
    138.           x: 70,
    139.           backgroundColor: "white",
    140.           borderColor: "#7d7d7d",
    141.           borderWidth: 1,
    142.           borderRadius: 3,
    143.           width: 35,
    144.           hoverState: {
    145.             backgroundColor: "#333",
    146.             borderColor: "#fff",
    147.             color: "#fff"
    148.           }
    149.         },
    150.         {
    151.           id: "i10minus",
    152.           text: "-10%",
    153.           y: 30,
    154.           x: 110,
    155.           backgroundColor: "white",
    156.           borderColor: "#7d7d7d",
    157.           borderWidth: 1,
    158.           borderRadius: 3,
    159.           width: 35,
    160.           hoverState: {
    161.             backgroundColor: "#333",
    162.             borderColor: "#fff",
    163.             color: "#fff"
    164.           }
    165.         },
    166.         {
    167.           id: "c10plus",
    168.           text: "+10%",
    169.           y: 60,
    170.           x: 70,
    171.           backgroundColor: "white",
    172.           borderColor: "#7d7d7d",
    173.           borderWidth: 1,
    174.           borderRadius: 3,
    175.           width: 35,
    176.           hoverState: {
    177.             backgroundColor: "#333",
    178.             borderColor: "#fff",
    179.             color: "#fff"
    180.           }
    181.         },
    182.         {
    183.           id: "c10minus",
    184.           text: "-10%",
    185.           y: 60,
    186.           x: 110,
    187.           backgroundColor: "white",
    188.           borderColor: "#7d7d7d",
    189.           borderWidth: 1,
    190.           borderRadius: 3,
    191.           width: 35,
    192.           hoverState: {
    193.             backgroundColor: "#333",
    194.             borderColor: "#fff",
    195.             color: "#fff"
    196.           }
    197.         }
    198.       ],
    199.       series: [{
    200.           values: [3500000, 4200000, 6700000, 8900000],
    201.           backgroundColor: "#447884 #69a3af",
    202.           text: "Internet"
    203.         },
    204.         {
    205.           values: [2800000, 4000000, 3900000, 3600000],
    206.           backgroundColor: "#ff9800 #f2b157",
    207.           text: "Cable"
    208.         }
    209.       ]
    210.     }
    211.  
    212.     zingchart.render({
    213.       id: 'myChart',
    214.       data: myConfig,
    215.       height: 400,
    216.       width: 600
    217.     });
    218.   </script>
    219. </body>
    220.  
    221. </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.     "font-family": "Roboto"
    4.   },
    5.   type: "bar",
    6.   backgroundColor: "#f4f2f2",
    7.   title: {
    8.     text: "Revenue Comparison",
    9.     "background-color": "none",
    10.     color: "#333"
    11.   },
    12.   subtitle: {
    13.     text: "Q1-Q4 2015",
    14.     color: "#333"
    15.   },
    16.   plotarea: {
    17.     "margin-top": 100,
    18.     "margin-bottom": 30,
    19.     "background-color": "#fff"
    20.   },
    21.   scaleX: {
    22.     values: ["Q1", "Q2", "Q3", "Q4"],
    23.     lineColor: "#7d7d7d",
    24.     tick: {
    25.       lineColor: "#7d7d7d"
    26.     },
    27.     guide: {
    28.       visible: false
    29.     },
    30.     markers: [{
    31.       type: "area",
    32.       range: [1.5, 2.5],
    33.       backgroundColor: "red",
    34.       alpha: 0.2,
    35.       label: {
    36.         text: "Netflix reduces fee",
    37.         angle: 0,
    38.         "offset-x": 13,
    39.         "offset-y": -210,
    40.         color: "#7d7d7d"
    41.       }
    42.     }]
    43.   },
    44.   scaleY: {
    45.     lineColor: "#7d7d7d",
    46.     tick: {
    47.       lineColor: "#7d7d7d"
    48.     },
    49.     format: "$%v",
    50.     short: true
    51.   },
    52.   legend: {
    53.     borderRadius: "3px",
    54.     borderColor: "none",
    55.     backgroundColor: "none",
    56.     layout: "h",
    57.     verticalAlign: "bottom",
    58.     align: "center",
    59.     shadow: false,
    60.     marker: {
    61.       borderRadius: "2px",
    62.       borderColor: "none"
    63.     }
    64.   },
    65.   tooltip: {
    66.     borderRadius: "3px",
    67.     borderColor: "#F4F2F2",
    68.     borderWidth: 2,
    69.     width: 90,
    70.     callout: true,
    71.     height: 50,
    72.     fontSize: 12,
    73.     shadow: false,
    74.     text: "%kt: $%v in %t Sales",
    75.     short: true,
    76.     decimals: 1,
    77.     rules: [{
    78.       rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
    79.       text: "%kt Projected: $%v in %t Sales",
    80.       backgroundColor: "#7d7d7d"
    81.     }]
    82.   },
    83.   plot: {
    84.     alpha: 0.8,
    85.     borderRadius: "3px",
    86.     rules: [{
    87.         rule: "%p === 0 && %i === 3",
    88.         backgroundColor: "none",
    89.         "line-style": "dashed",
    90.         "border-color": "#447884",
    91.         "border-width": 1
    92.       },
    93.       {
    94.         rule: "%p === 1 && %i === 3",
    95.         backgroundColor: "none",
    96.         "line-style": "dashed",
    97.         "border-color": "#ff9800",
    98.         "border-width": 1
    99.       },
    100.     ]
    101.   },
    102.   labels: [{
    103.       "text": "Adjust Projections",
    104.       fontSize: 12,
    105.       y: 4,
    106.       x: 38
    107.     },
    108.     {
    109.       text: "Internet:",
    110.       y: 30,
    111.       x: 20
    112.     },
    113.     {
    114.       text: "Cable:",
    115.       y: 60,
    116.       x: 28
    117.     },
    118.     {
    119.       id: "i10plus",
    120.       text: "+10%",
    121.       y: 30,
    122.       x: 70,
    123.       backgroundColor: "white",
    124.       borderColor: "#7d7d7d",
    125.       borderWidth: 1,
    126.       borderRadius: 3,
    127.       width: 35,
    128.       hoverState: {
    129.         backgroundColor: "#333",
    130.         borderColor: "#fff",
    131.         color: "#fff"
    132.       }
    133.     },
    134.     {
    135.       id: "i10minus",
    136.       text: "-10%",
    137.       y: 30,
    138.       x: 110,
    139.       backgroundColor: "white",
    140.       borderColor: "#7d7d7d",
    141.       borderWidth: 1,
    142.       borderRadius: 3,
    143.       width: 35,
    144.       hoverState: {
    145.         backgroundColor: "#333",
    146.         borderColor: "#fff",
    147.         color: "#fff"
    148.       }
    149.     },
    150.     {
    151.       id: "c10plus",
    152.       text: "+10%",
    153.       y: 60,
    154.       x: 70,
    155.       backgroundColor: "white",
    156.       borderColor: "#7d7d7d",
    157.       borderWidth: 1,
    158.       borderRadius: 3,
    159.       width: 35,
    160.       hoverState: {
    161.         backgroundColor: "#333",
    162.         borderColor: "#fff",
    163.         color: "#fff"
    164.       }
    165.     },
    166.     {
    167.       id: "c10minus",
    168.       text: "-10%",
    169.       y: 60,
    170.       x: 110,
    171.       backgroundColor: "white",
    172.       borderColor: "#7d7d7d",
    173.       borderWidth: 1,
    174.       borderRadius: 3,
    175.       width: 35,
    176.       hoverState: {
    177.         backgroundColor: "#333",
    178.         borderColor: "#fff",
    179.         color: "#fff"
    180.       }
    181.     }
    182.   ],
    183.   series: [{
    184.       values: [3500000, 4200000, 6700000, 8900000],
    185.       backgroundColor: "#447884 #69a3af",
    186.       text: "Internet"
    187.     },
    188.     {
    189.       values: [2800000, 4000000, 3900000, 3600000],
    190.       backgroundColor: "#ff9800 #f2b157",
    191.       text: "Cable"
    192.     }
    193.   ]
    194. }
    195.  
    196. zingchart.render({
    197.   id: 'myChart',
    198.   data: myConfig,
    199.   height: 400,
    200.   width: 600
    201. });