- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8">
- <title>ZingSoft Demo</title>
- <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
-
- <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
- <style></style>
- </head>
-
- <body>
- <div id='myChart'></div>
- <script>
- ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
- var myConfig = {
- globals: {
- "font-family": "Roboto"
- },
- type: "bar",
- backgroundColor: "#f4f2f2",
- title: {
- text: "Revenue Comparison",
- "background-color": "none",
- color: "#333"
- },
- subtitle: {
- text: "Q1-Q4 2015",
- color: "#333",
- width: "10%",
- offsetX: "270px"
- },
- plotarea: {
- "margin-top": 100,
- "margin-bottom": 30,
- "background-color": "#fff"
- },
- scaleX: {
- values: ["Q1", "Q2", "Q3", "Q4"],
- lineColor: "#7d7d7d",
- tick: {
- lineColor: "#7d7d7d"
- },
- guide: {
- visible: false
- },
- markers: [{
- type: "area",
- range: [1.5, 2.5],
- backgroundColor: "red",
- alpha: 0.2,
- label: {
- text: "Netflix reduces fee",
- angle: 0,
- "offset-x": 13,
- "offset-y": -210,
- color: "#7d7d7d"
- }
- }]
- },
- scaleY: {
- lineColor: "#7d7d7d",
- tick: {
- lineColor: "#7d7d7d"
- },
- format: "$%v",
- short: true
- },
- legend: {
- borderRadius: "3px",
- borderColor: "none",
- backgroundColor: "none",
- layout: "h",
- verticalAlign: "bottom",
- align: "center",
- shadow: false,
- marker: {
- borderRadius: "2px",
- borderColor: "none"
- }
- },
- tooltip: {
- borderRadius: "3px",
- borderColor: "#F4F2F2",
- borderWidth: 2,
- width: 90,
- callout: true,
- height: 50,
- fontSize: 12,
- shadow: false,
- text: "%kt: $%v in %t Sales",
- short: true,
- decimals: 1,
- rules: [{
- rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
- text: "%kt Projected: $%v in %t Sales",
- backgroundColor: "#7d7d7d"
- }]
- },
- plot: {
- alpha: 0.8,
- borderRadius: "3px",
- rules: [{
- rule: "%p === 0 && %i === 3",
- backgroundColor: "none",
- "line-style": "dashed",
- "border-color": "#447884",
- "border-width": 1
- },
- {
- rule: "%p === 1 && %i === 3",
- backgroundColor: "none",
- "line-style": "dashed",
- "border-color": "#ff9800",
- "border-width": 1
- },
- ]
- },
- labels: [{
- "text": "Adjust Projections",
- fontSize: 12,
- y: 4,
- x: 38
- },
- {
- text: "Internet:",
- y: 30,
- x: 20
- },
- {
- text: "Cable:",
- y: 60,
- x: 28
- },
- {
- text: "+10%",
- y: 30,
- x: 70,
- backgroundColor: "white",
- borderColor: "#7d7d7d",
- borderWidth: 1,
- borderRadius: 3,
- width: 35,
- hoverState: {
- backgroundColor: "#333",
- borderColor: "#fff",
- color: "#fff"
- }
- },
- {
- text: "-10%",
- y: 30,
- x: 110,
- backgroundColor: "white",
- borderColor: "#7d7d7d",
- borderWidth: 1,
- borderRadius: 3,
- width: 35,
- hoverState: {
- backgroundColor: "#333",
- borderColor: "#fff",
- color: "#fff"
- }
- },
- {
- text: "+10%",
- y: 60,
- x: 70,
- backgroundColor: "white",
- borderColor: "#7d7d7d",
- borderWidth: 1,
- borderRadius: 3,
- width: 35,
- hoverState: {
- backgroundColor: "#333",
- borderColor: "#fff",
- color: "#fff"
- }
- },
- {
- text: "-10%",
- y: 60,
- x: 110,
- backgroundColor: "white",
- borderColor: "#7d7d7d",
- borderWidth: 1,
- borderRadius: 3,
- width: 35,
- hoverState: {
- backgroundColor: "#333",
- borderColor: "#fff",
- color: "#fff"
- }
- }
- ],
- series: [{
- values: [3500000, 4200000, 6700000, 8900000],
- backgroundColor: "#447884 #69a3af",
- text: "Internet"
- },
- {
- values: [2800000, 4000000, 3900000, 3600000],
- backgroundColor: "#ff9800 #f2b157",
- text: "Cable"
- }
- ]
- }
-
- zingchart.render({
- id: 'myChart',
- data: myConfig,
- height: 400,
- width: 600
- });
- </script>
- </body>
-
- </html>
- <!DOCTYPE html>
- <html>
-
- <head>
- <meta charset="utf-8">
- <title>ZingSoft Demo</title>
- <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
-
- <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
- </head>
-
- <body>
- <div id='myChart'></div>
- </body>
-
- </html>
- var myConfig = {
- globals: {
- "font-family": "Roboto"
- },
- type: "bar",
- backgroundColor: "#f4f2f2",
- title: {
- text: "Revenue Comparison",
- "background-color": "none",
- color: "#333"
- },
- subtitle: {
- text: "Q1-Q4 2015",
- color: "#333",
- width: "10%",
- offsetX: "270px"
- },
- plotarea: {
- "margin-top": 100,
- "margin-bottom": 30,
- "background-color": "#fff"
- },
- scaleX: {
- values: ["Q1", "Q2", "Q3", "Q4"],
- lineColor: "#7d7d7d",
- tick: {
- lineColor: "#7d7d7d"
- },
- guide: {
- visible: false
- },
- markers: [{
- type: "area",
- range: [1.5, 2.5],
- backgroundColor: "red",
- alpha: 0.2,
- label: {
- text: "Netflix reduces fee",
- angle: 0,
- "offset-x": 13,
- "offset-y": -210,
- color: "#7d7d7d"
- }
- }]
- },
- scaleY: {
- lineColor: "#7d7d7d",
- tick: {
- lineColor: "#7d7d7d"
- },
- format: "$%v",
- short: true
- },
- legend: {
- borderRadius: "3px",
- borderColor: "none",
- backgroundColor: "none",
- layout: "h",
- verticalAlign: "bottom",
- align: "center",
- shadow: false,
- marker: {
- borderRadius: "2px",
- borderColor: "none"
- }
- },
- tooltip: {
- borderRadius: "3px",
- borderColor: "#F4F2F2",
- borderWidth: 2,
- width: 90,
- callout: true,
- height: 50,
- fontSize: 12,
- shadow: false,
- text: "%kt: $%v in %t Sales",
- short: true,
- decimals: 1,
- rules: [{
- rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
- text: "%kt Projected: $%v in %t Sales",
- backgroundColor: "#7d7d7d"
- }]
- },
- plot: {
- alpha: 0.8,
- borderRadius: "3px",
- rules: [{
- rule: "%p === 0 && %i === 3",
- backgroundColor: "none",
- "line-style": "dashed",
- "border-color": "#447884",
- "border-width": 1
- },
- {
- rule: "%p === 1 && %i === 3",
- backgroundColor: "none",
- "line-style": "dashed",
- "border-color": "#ff9800",
- "border-width": 1
- },
- ]
- },
- labels: [{
- "text": "Adjust Projections",
- fontSize: 12,
- y: 4,
- x: 38
- },
- {
- text: "Internet:",
- y: 30,
- x: 20
- },
- {
- text: "Cable:",
- y: 60,
- x: 28
- },
- {
- text: "+10%",
- y: 30,
- x: 70,
- backgroundColor: "white",
- borderColor: "#7d7d7d",
- borderWidth: 1,
- borderRadius: 3,
- width: 35,
- hoverState: {
- backgroundColor: "#333",
- borderColor: "#fff",
- color: "#fff"
- }
- },
- {
- text: "-10%",
- y: 30,
- x: 110,
- backgroundColor: "white",
- borderColor: "#7d7d7d",
- borderWidth: 1,
- borderRadius: 3,
- width: 35,
- hoverState: {
- backgroundColor: "#333",
- borderColor: "#fff",
- color: "#fff"
- }
- },
- {
- text: "+10%",
- y: 60,
- x: 70,
- backgroundColor: "white",
- borderColor: "#7d7d7d",
- borderWidth: 1,
- borderRadius: 3,
- width: 35,
- hoverState: {
- backgroundColor: "#333",
- borderColor: "#fff",
- color: "#fff"
- }
- },
- {
- text: "-10%",
- y: 60,
- x: 110,
- backgroundColor: "white",
- borderColor: "#7d7d7d",
- borderWidth: 1,
- borderRadius: 3,
- width: 35,
- hoverState: {
- backgroundColor: "#333",
- borderColor: "#fff",
- color: "#fff"
- }
- }
- ],
- series: [{
- values: [3500000, 4200000, 6700000, 8900000],
- backgroundColor: "#447884 #69a3af",
- text: "Internet"
- },
- {
- values: [2800000, 4000000, 3900000, 3600000],
- backgroundColor: "#ff9800 #f2b157",
- text: "Cable"
- }
- ]
- }
-
- zingchart.render({
- id: 'myChart',
- data: myConfig,
- height: 400,
- width: 600
- });