Zero Plane
Zero plane is a plane separating the positive and negative numbers on the y-axis of a chart; it is rendered by default in a chart that plots both negative and positive values.
The zero plane appears in the column, line, scatter, bubble and the area charts. Additionally, scatter chart and bubble chart also support vertical zero plane on the x-axis.
This article talks about:
Customizing the Zero Plane in a 2D and 3D chart
Zero Plane in a 2D chart
A column 2D chart with customized zero plane looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Website Visitors WoW Growth",
"subcaption": "Last 10 weeks",
"xAxisName": "Week",
"yAxisName": "Growth",
"numberSuffix": "%",
"theme": "fint",
"showValues": "0",
"showZeroPlane": "1",
"zeroPlaneColor": "#003366",
"zeroPlaneAlpha": "100",
"zeroPlaneThickness": "3",
"divLineDashed": "0",
"divLineAlpha": "40"
},
"data": [
{
"label": "Week 1",
"value": "14.5"
},
{
"label": "Week 2",
"value": "-6.5"
},
{
"label": "Week 3",
"value": "9.8"
},
{
"label": "Week 4",
"value": "9.2"
},
{
"label": "Week 5",
"value": "-7.45"
},
{
"label": "Week 6",
"value": "-3.19"
},
{
"label": "Week 7",
"value": "-11.78"
},
{
"label": "Week 8",
"value": "3.32"
},
{
"label": "Week 9",
"value": "8.57"
},
{
"label": "Week 10",
"value": "16.95"
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
id: 'myChart',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Website Visitors WoW Growth",
"subcaption": "Last 10 weeks",
"xAxisName": "Week",
"yAxisName": "Growth",
"numberSuffix": "%",
"theme": "fint",
"showValues": "0",
//Show Zero plane
"showZeroPlane": "1",
//Customize Zero Plane Properties
"zeroPlaneColor": "#003366",
"zeroPlaneAlpha": "100",
"zeroPlaneThickness": "3",
"divLineDashed": "0",
"divLineAlpha": "40"
},
"data": [{
"label": "Week 1",
"value": "14.5"
}, {
"label": "Week 2",
"value": "-6.5"
}, {
"label": "Week 3",
"value": "9.8"
}, {
"label": "Week 4",
"value": "9.2"
}, {
"label": "Week 5",
"value": "-7.45"
}, {
"label": "Week 6",
"value": "-3.19"
}, {
"label": "Week 7",
"value": "-11.78"
}, {
"label": "Week 8",
"value": "3.32"
}, {
"label": "Week 9",
"value": "8.57"
}, {
"label": "Week 10",
"value": "16.95"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below are the attributes used to customize the zero plane in a 2D chart:
| Attribute | Description |
|---|---|
|
If specifies the hex code for the color that will be used to render zero plane. e.g. |
|
Sets the thickness of zero plane(in pixels). |
|
Sets the transparency of zero plane. Can take values from |
Zero Plane in a 3D chart
A column 3D chart with a customized zero plane looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Website Visitors WoW Growth",
"subcaption": "Last 10 weeks",
"xAxisName": "Week",
"yAxisName": "Growth",
"numberSuffix": "%",
"theme": "fint",
"showValues": "0",
"showZeroPlane": "1",
"zeroPlaneColor": "#99ccff",
"zeroPlaneAlpha": "100",
"zeroPlaneThickness": "3",
"divLineDashed": "0",
"divLineAlpha": "40"
},
"data": [
{
"label": "Week 1",
"value": "14.5"
},
{
"label": "Week 2",
"value": "-6.5"
},
{
"label": "Week 3",
"value": "9.8"
},
{
"label": "Week 4",
"value": "9.2"
},
{
"label": "Week 5",
"value": "-7.45"
},
{
"label": "Week 6",
"value": "-3.19"
},
{
"label": "Week 7",
"value": "-11.78"
},
{
"label": "Week 8",
"value": "3.32"
},
{
"label": "Week 9",
"value": "8.57"
},
{
"label": "Week 10",
"value": "16.95"
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'column3d',
renderAt: 'chart-container',
id: 'myChart',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Website Visitors WoW Growth",
"subcaption": "Last 10 weeks",
"xAxisName": "Week",
"yAxisName": "Growth",
"numberSuffix": "%",
"theme": "fint",
"showValues": "0",
//Zero plane configuration
"showZeroPlane": "1",
"zeroPlaneColor": "#99ccff",
"zeroPlaneAlpha": "100",
"zeroPlaneThickness": "3",
"divLineDashed": "0",
"divLineAlpha": "40"
},
"data": [{
"label": "Week 1",
"value": "14.5"
}, {
"label": "Week 2",
"value": "-6.5"
}, {
"label": "Week 3",
"value": "9.8"
}, {
"label": "Week 4",
"value": "9.2"
}, {
"label": "Week 5",
"value": "-7.45"
}, {
"label": "Week 6",
"value": "-3.19"
}, {
"label": "Week 7",
"value": "-11.78"
}, {
"label": "Week 8",
"value": "3.32"
}, {
"label": "Week 9",
"value": "8.57"
}, {
"label": "Week 10",
"value": "16.95"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below are the attributes used to customize the zero plane in a 3D chart:
| Attribute | Description |
|---|---|
|
If specifies the hex code for the color that will be used to render zero plane. e.g. |
|
Sets the transparency of zero plane. Can take values from |
|
Set this to |
|
It specifies the hex code of the color that will be used to render the border of the zero plane e.g. |
Configuring the vertical zero plane in the Scatter and Bubble Charts
Zero Plane is the line/plane that appears at zero x-position on canvas, when negative data is being shown on the chart. You can configure vertical zero planes for scatter and bubble charts.
A scatter chart with customized vertical zero plane looks as below:
FusionCharts will load here..
{
"chart": {
"caption": "Old Stock Clearance",
"subcaption": "Price Vs Profit",
"yaxisname": "Price (In USD)",
"xaxisname": "Profit (In %)",
"xaxismaxvalue": "40",
"xaxisminvalue": "-20",
"yaxismaxvalue": "1000",
"xnumbersuffix": "%",
"ynumberprefix": "$",
"showVZeroPlane": "1",
"vZeroPlaneColor": "#cc3300",
"vZeroPlaneThickness": "3",
"vZeroPlaneAlpha": "90",
"theme": "fint"
},
"dataset": [
{
"drawline": "0",
"seriesname": "Televisions",
"color": "#6baa01",
"anchorsides": "3",
"anchorradius": "4",
"anchorbgcolor": "#6baa01",
"anchorbordercolor": "#6baa01",
"data": [
{
"id": "TV_1",
"x": "-9.89",
"y": "642"
},
{
"id": "TV_2",
"x": "21.59",
"y": "947"
},
{
"id": "TV_3",
"x": "-8.8",
"y": "433"
},
{
"id": "TV_4",
"x": "-10.88",
"y": "750"
},
{
"id": "TV_5",
"x": "5.43",
"y": "593"
},
{
"id": "TV_6",
"x": "23.76",
"y": "426"
},
{
"id": "TV_7",
"x": "17.74",
"y": "575"
},
{
"id": "TV_8",
"x": "8.71",
"y": "962"
},
{
"id": "TV_9",
"x": "-1.56",
"y": "205"
},
{
"id": "TV_10",
"x": "16.42",
"y": "937"
},
{
"id": "TV_11",
"x": "10.42",
"y": "689"
},
{
"id": "TV_12",
"x": "-1.19",
"y": "425"
},
{
"id": "TV_13",
"x": "-12.58",
"y": "804"
},
{
"id": "TV_14",
"x": "25.49",
"y": "700"
},
{
"id": "TV_15",
"x": "24.27",
"y": "302"
},
{
"id": "TV_16",
"x": "19.07",
"y": "276"
},
{
"id": "TV_17",
"x": "16.16",
"y": "913"
},
{
"id": "TV_18",
"x": "4.37",
"y": "744"
},
{
"id": "TV_19",
"x": "-2.15",
"y": "939"
},
{
"id": "TV_20",
"x": "15.67",
"y": "569"
},
{
"id": "TV_21",
"x": "10.94",
"y": "257"
},
{
"id": "TV_22",
"x": "24.97",
"y": "893"
},
{
"id": "TV_23",
"x": "28.15",
"y": "523"
},
{
"id": "TV_24",
"x": "-1.76",
"y": "930"
},
{
"id": "TV_25",
"x": "11.53",
"y": "564"
},
{
"id": "TV_26",
"x": "-3.31",
"y": "571"
},
{
"id": "TV_27",
"x": "9.73",
"y": "582"
},
{
"id": "TV_28",
"x": "4.96",
"y": "582"
},
{
"id": "TV_29",
"x": "-7.77",
"y": "756"
},
{
"id": "TV_30",
"x": "-11.56",
"y": "404"
}
]
},
{
"seriesname": "Cell Phones",
"color": "#f8bd19",
"anchorsides": "4",
"anchorradius": "4",
"anchorbgcolor": "#f8bd19",
"anchorbordercolor": "#f8bd19",
"data": [
{
"id": "Mob_1",
"x": "-2.79",
"y": "681"
},
{
"id": "Mob_2",
"x": "0.74",
"y": "214"
},
{
"id": "Mob_3",
"x": "16.82",
"y": "215"
},
{
"id": "Mob_4",
"x": "-13.31",
"y": "530"
},
{
"id": "Mob_5",
"x": "17.96",
"y": "973"
},
{
"id": "Mob_6",
"x": "12.92",
"y": "217"
},
{
"id": "Mob_7",
"x": "1.35",
"y": "369"
},
{
"id": "Mob_8",
"x": "28.21",
"y": "304"
},
{
"id": "Mob_9",
"x": "17.95",
"y": "495"
},
{
"id": "Mob_10",
"x": "26.99",
"y": "795"
},
{
"id": "Mob_11",
"x": "-7.85",
"y": "315"
},
{
"id": "Mob_12",
"x": "10.46",
"y": "866"
},
{
"id": "Mob_13",
"x": "20.09",
"y": "671"
},
{
"id": "Mob_14",
"x": "4.99",
"y": "670"
},
{
"id": "Mob_15",
"x": "3.88",
"y": "479"
},
{
"id": "Mob_16",
"x": "19.22",
"y": "737"
},
{
"id": "Mob_17",
"x": "29.81",
"y": "928"
},
{
"id": "Mob_18",
"x": "20.44",
"y": "569"
},
{
"id": "Mob_19",
"x": "22.67",
"y": "885"
},
{
"id": "Mob_20",
"x": "28.76",
"y": "444"
},
{
"id": "Mob_21",
"x": "22.98",
"y": "288"
},
{
"id": "Mob_22",
"x": "-7.61",
"y": "817"
},
{
"id": "Mob_23",
"x": "17.2",
"y": "357"
},
{
"id": "Mob_24",
"x": "-12.12",
"y": "913"
},
{
"id": "Mob_25",
"x": "-0.98",
"y": "579"
},
{
"id": "Mob_26",
"x": "-5.64",
"y": "537"
},
{
"id": "Mob_27",
"x": "23.62",
"y": "522"
},
{
"id": "Mob_28",
"x": "6.84",
"y": "267"
},
{
"id": "Mob_29",
"x": "-12.15",
"y": "825"
},
{
"id": "Mob_30",
"x": "-11.62",
"y": "857"
},
{
"id": "Mob_31",
"x": "9.58",
"y": "204"
},
{
"id": "Mob_32",
"x": "-11.57",
"y": "232"
},
{
"id": "Mob_33",
"x": "-14.13",
"y": "450"
},
{
"id": "Mob_34",
"x": "5.99",
"y": "900"
},
{
"id": "Mob_35",
"x": "9.24",
"y": "228"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'scatter',
renderAt: 'chart-container',
id: 'myChart',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Old Stock Clearance",
"subcaption": "Price Vs Profit",
"yaxisname": "Price (In USD)",
"xaxisname": "Profit (In %)",
"xaxismaxvalue": "40",
"xaxisminvalue": "-20",
"yaxismaxvalue": "1000",
"xnumbersuffix": "%",
"ynumberprefix": "$",
//Vertical zero plane
"showVZeroPlane": "1",
"vZeroPlaneColor": "#cc3300",
"vZeroPlaneThickness": "3",
"vZeroPlaneAlpha": "90",
//Theme
"theme": "fint"
},
"dataset": [{
"drawline": "0",
"seriesname": "Televisions",
"color": "#6baa01",
"anchorsides": "3",
"anchorradius": "4",
"anchorbgcolor": "#6baa01",
"anchorbordercolor": "#6baa01",
"data": [{
"id": "TV_1",
"x": "-9.89",
"y": "642"
}, {
"id": "TV_2",
"x": "21.59",
"y": "947"
}, {
"id": "TV_3",
"x": "-8.8",
"y": "433"
}, {
"id": "TV_4",
"x": "-10.88",
"y": "750"
}, {
"id": "TV_5",
"x": "5.43",
"y": "593"
}, {
"id": "TV_6",
"x": "23.76",
"y": "426"
}, {
"id": "TV_7",
"x": "17.74",
"y": "575"
}, {
"id": "TV_8",
"x": "8.71",
"y": "962"
}, {
"id": "TV_9",
"x": "-1.56",
"y": "205"
}, {
"id": "TV_10",
"x": "16.42",
"y": "937"
}, {
"id": "TV_11",
"x": "10.42",
"y": "689"
}, {
"id": "TV_12",
"x": "-1.19",
"y": "425"
}, {
"id": "TV_13",
"x": "-12.58",
"y": "804"
}, {
"id": "TV_14",
"x": "25.49",
"y": "700"
}, {
"id": "TV_15",
"x": "24.27",
"y": "302"
}, {
"id": "TV_16",
"x": "19.07",
"y": "276"
}, {
"id": "TV_17",
"x": "16.16",
"y": "913"
}, {
"id": "TV_18",
"x": "4.37",
"y": "744"
}, {
"id": "TV_19",
"x": "-2.15",
"y": "939"
}, {
"id": "TV_20",
"x": "15.67",
"y": "569"
}, {
"id": "TV_21",
"x": "10.94",
"y": "257"
}, {
"id": "TV_22",
"x": "24.97",
"y": "893"
}, {
"id": "TV_23",
"x": "28.15",
"y": "523"
}, {
"id": "TV_24",
"x": "-1.76",
"y": "930"
}, {
"id": "TV_25",
"x": "11.53",
"y": "564"
}, {
"id": "TV_26",
"x": "-3.31",
"y": "571"
}, {
"id": "TV_27",
"x": "9.73",
"y": "582"
}, {
"id": "TV_28",
"x": "4.96",
"y": "582"
}, {
"id": "TV_29",
"x": "-7.77",
"y": "756"
}, {
"id": "TV_30",
"x": "-11.56",
"y": "404"
}]
}, {
"seriesname": "Cell Phones",
"color": "#f8bd19",
"anchorsides": "4",
"anchorradius": "4",
"anchorbgcolor": "#f8bd19",
"anchorbordercolor": "#f8bd19",
"data": [{
"id": "Mob_1",
"x": "-2.79",
"y": "681"
}, {
"id": "Mob_2",
"x": "0.74",
"y": "214"
}, {
"id": "Mob_3",
"x": "16.82",
"y": "215"
}, {
"id": "Mob_4",
"x": "-13.31",
"y": "530"
}, {
"id": "Mob_5",
"x": "17.96",
"y": "973"
}, {
"id": "Mob_6",
"x": "12.92",
"y": "217"
}, {
"id": "Mob_7",
"x": "1.35",
"y": "369"
}, {
"id": "Mob_8",
"x": "28.21",
"y": "304"
}, {
"id": "Mob_9",
"x": "17.95",
"y": "495"
}, {
"id": "Mob_10",
"x": "26.99",
"y": "795"
}, {
"id": "Mob_11",
"x": "-7.85",
"y": "315"
}, {
"id": "Mob_12",
"x": "10.46",
"y": "866"
}, {
"id": "Mob_13",
"x": "20.09",
"y": "671"
}, {
"id": "Mob_14",
"x": "4.99",
"y": "670"
}, {
"id": "Mob_15",
"x": "3.88",
"y": "479"
}, {
"id": "Mob_16",
"x": "19.22",
"y": "737"
}, {
"id": "Mob_17",
"x": "29.81",
"y": "928"
}, {
"id": "Mob_18",
"x": "20.44",
"y": "569"
}, {
"id": "Mob_19",
"x": "22.67",
"y": "885"
}, {
"id": "Mob_20",
"x": "28.76",
"y": "444"
}, {
"id": "Mob_21",
"x": "22.98",
"y": "288"
}, {
"id": "Mob_22",
"x": "-7.61",
"y": "817"
}, {
"id": "Mob_23",
"x": "17.2",
"y": "357"
}, {
"id": "Mob_24",
"x": "-12.12",
"y": "913"
}, {
"id": "Mob_25",
"x": "-0.98",
"y": "579"
}, {
"id": "Mob_26",
"x": "-5.64",
"y": "537"
}, {
"id": "Mob_27",
"x": "23.62",
"y": "522"
}, {
"id": "Mob_28",
"x": "6.84",
"y": "267"
}, {
"id": "Mob_29",
"x": "-12.15",
"y": "825"
}, {
"id": "Mob_30",
"x": "-11.62",
"y": "857"
}, {
"id": "Mob_31",
"x": "9.58",
"y": "204"
}, {
"id": "Mob_32",
"x": "-11.57",
"y": "232"
}, {
"id": "Mob_33",
"x": "-14.13",
"y": "450"
}, {
"id": "Mob_34",
"x": "5.99",
"y": "900"
}, {
"id": "Mob_35",
"x": "9.24",
"y": "228"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below are the attributes used to render and customize the vertical zero plane:
| Attribute | Description |
|---|---|
|
Set this to |
|
It specifies the hex code for the color that will be used to render the vertical zero plane e.g. |
|
Sets the thickness of the vertical zero plane(in pixels). |
|
Sets the transparency of vertical zero plane. Can take values from |
Showing/hiding the zero plane value
FusionCharts Suite XT allows you to show or hide the data value (‘0’) where the zero plane exists on the y-axis. A column 2D chart with the zero plane value hidden is shown below:
FusionCharts will load here..
{
"chart": {
"caption": "Website Visitors Growth",
"subcaption": "Last 10 weeks",
"xAxisName": "Week",
"yAxisName": "Growth",
"numberSuffix": "%",
"theme": "fint",
"showValues": "0",
"showZeroPlane": "1",
"zeroPlaneColor": "#003366",
"zeroPlaneAlpha": "100",
"zeroPlaneThickness": "3",
"divLineDashed": "0",
"divLineAlpha": "40",
"showZeroPlaneValue": "0"
},
"data": [
{
"label": "Week 1",
"value": "14.5"
},
{
"label": "Week 2",
"value": "-6.5"
},
{
"label": "Week 3",
"value": "9.8"
},
{
"label": "Week 4",
"value": "9.2"
},
{
"label": "Week 5",
"value": "-7.45"
},
{
"label": "Week 6",
"value": "-3.19"
},
{
"label": "Week 7",
"value": "-11.78"
},
{
"label": "Week 8",
"value": "3.32"
},
{
"label": "Week 9",
"value": "8.57"
},
{
"label": "Week 10",
"value": "16.95"
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
id: 'myChart',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Website Visitors Growth",
"subcaption": "Last 10 weeks",
"xAxisName": "Week",
"yAxisName": "Growth",
"numberSuffix": "%",
"theme": "fint",
"showValues": "0",
"showZeroPlane": "1",
"zeroPlaneColor": "#003366",
"zeroPlaneAlpha": "100",
"zeroPlaneThickness": "3",
"divLineDashed": "0",
"divLineAlpha": "40",
//Hiding zero plane value
"showZeroPlaneValue": "0"
},
"data": [{
"label": "Week 1",
"value": "14.5"
}, {
"label": "Week 2",
"value": "-6.5"
}, {
"label": "Week 3",
"value": "9.8"
}, {
"label": "Week 4",
"value": "9.2"
}, {
"label": "Week 5",
"value": "-7.45"
}, {
"label": "Week 6",
"value": "-3.19"
}, {
"label": "Week 7",
"value": "-11.78"
}, {
"label": "Week 8",
"value": "3.32"
}, {
"label": "Week 9",
"value": "8.57"
}, {
"label": "Week 10",
"value": "16.95"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is the attribute used to hide the zero plane value:
| Attribute | Description |
|---|---|
|
Set this to |
In dual y-axis charts, showPZeroPlaneValue attribute of the chart object is used to show/hide the zero plane value for the primary y-axis and showSZeroPlaneValue is used to show/hide the zero plane value for the secondary y-axis.
Showing/hiding the zero plane
Zero plane can be removed in the line, scatter and bubble charts but not in the column and area charts because they use it as their base to draw. A scatter chart with the vertical zero plane hidden is shown below:
FusionCharts will load here..
{
"chart": {
"caption": "Old Stock Clearance",
"subcaption": "Price Vs Profit",
"yaxisname": "Price (In USD)",
"xaxisname": "Profit (In %)",
"xaxismaxvalue": "40",
"xaxisminvalue": "-20",
"yaxismaxvalue": "1000",
"xnumbersuffix": "%",
"ynumberprefix": "$",
"showVZeroPlane": "0",
"vZeroPlaneColor": "#cc3300",
"vZeroPlaneThickness": "3",
"vZeroPlaneAlpha": "90",
"theme": "fint"
},
"dataset": [
{
"drawline": "0",
"seriesname": "Televisions",
"color": "#6baa01",
"anchorsides": "3",
"anchorradius": "4",
"anchorbgcolor": "#6baa01",
"anchorbordercolor": "#6baa01",
"data": [
{
"id": "TV_1",
"x": "-9.89",
"y": "642"
},
{
"id": "TV_2",
"x": "21.59",
"y": "947"
},
{
"id": "TV_3",
"x": "-8.8",
"y": "433"
},
{
"id": "TV_4",
"x": "-10.88",
"y": "750"
},
{
"id": "TV_5",
"x": "5.43",
"y": "593"
},
{
"id": "TV_6",
"x": "23.76",
"y": "426"
},
{
"id": "TV_7",
"x": "17.74",
"y": "575"
},
{
"id": "TV_8",
"x": "8.71",
"y": "962"
},
{
"id": "TV_9",
"x": "-1.56",
"y": "205"
},
{
"id": "TV_10",
"x": "16.42",
"y": "937"
},
{
"id": "TV_11",
"x": "10.42",
"y": "689"
},
{
"id": "TV_12",
"x": "-1.19",
"y": "425"
},
{
"id": "TV_13",
"x": "-12.58",
"y": "804"
},
{
"id": "TV_14",
"x": "25.49",
"y": "700"
},
{
"id": "TV_15",
"x": "24.27",
"y": "302"
},
{
"id": "TV_16",
"x": "19.07",
"y": "276"
},
{
"id": "TV_17",
"x": "16.16",
"y": "913"
},
{
"id": "TV_18",
"x": "4.37",
"y": "744"
},
{
"id": "TV_19",
"x": "-2.15",
"y": "939"
},
{
"id": "TV_20",
"x": "15.67",
"y": "569"
},
{
"id": "TV_21",
"x": "10.94",
"y": "257"
},
{
"id": "TV_22",
"x": "24.97",
"y": "893"
},
{
"id": "TV_23",
"x": "28.15",
"y": "523"
},
{
"id": "TV_24",
"x": "-1.76",
"y": "930"
},
{
"id": "TV_25",
"x": "11.53",
"y": "564"
},
{
"id": "TV_26",
"x": "-3.31",
"y": "571"
},
{
"id": "TV_27",
"x": "9.73",
"y": "582"
},
{
"id": "TV_28",
"x": "4.96",
"y": "582"
},
{
"id": "TV_29",
"x": "-7.77",
"y": "756"
},
{
"id": "TV_30",
"x": "-11.56",
"y": "404"
}
]
},
{
"seriesname": "Cell Phones",
"color": "#f8bd19",
"anchorsides": "4",
"anchorradius": "4",
"anchorbgcolor": "#f8bd19",
"anchorbordercolor": "#f8bd19",
"data": [
{
"id": "Mob_1",
"x": "-2.79",
"y": "681"
},
{
"id": "Mob_2",
"x": "0.74",
"y": "214"
},
{
"id": "Mob_3",
"x": "16.82",
"y": "215"
},
{
"id": "Mob_4",
"x": "-13.31",
"y": "530"
},
{
"id": "Mob_5",
"x": "17.96",
"y": "973"
},
{
"id": "Mob_6",
"x": "12.92",
"y": "217"
},
{
"id": "Mob_7",
"x": "1.35",
"y": "369"
},
{
"id": "Mob_8",
"x": "28.21",
"y": "304"
},
{
"id": "Mob_9",
"x": "17.95",
"y": "495"
},
{
"id": "Mob_10",
"x": "26.99",
"y": "795"
},
{
"id": "Mob_11",
"x": "-7.85",
"y": "315"
},
{
"id": "Mob_12",
"x": "10.46",
"y": "866"
},
{
"id": "Mob_13",
"x": "20.09",
"y": "671"
},
{
"id": "Mob_14",
"x": "4.99",
"y": "670"
},
{
"id": "Mob_15",
"x": "3.88",
"y": "479"
},
{
"id": "Mob_16",
"x": "19.22",
"y": "737"
},
{
"id": "Mob_17",
"x": "29.81",
"y": "928"
},
{
"id": "Mob_18",
"x": "20.44",
"y": "569"
},
{
"id": "Mob_19",
"x": "22.67",
"y": "885"
},
{
"id": "Mob_20",
"x": "28.76",
"y": "444"
},
{
"id": "Mob_21",
"x": "22.98",
"y": "288"
},
{
"id": "Mob_22",
"x": "-7.61",
"y": "817"
},
{
"id": "Mob_23",
"x": "17.2",
"y": "357"
},
{
"id": "Mob_24",
"x": "-12.12",
"y": "913"
},
{
"id": "Mob_25",
"x": "-0.98",
"y": "579"
},
{
"id": "Mob_26",
"x": "-5.64",
"y": "537"
},
{
"id": "Mob_27",
"x": "23.62",
"y": "522"
},
{
"id": "Mob_28",
"x": "6.84",
"y": "267"
},
{
"id": "Mob_29",
"x": "-12.15",
"y": "825"
},
{
"id": "Mob_30",
"x": "-11.62",
"y": "857"
},
{
"id": "Mob_31",
"x": "9.58",
"y": "204"
},
{
"id": "Mob_32",
"x": "-11.57",
"y": "232"
},
{
"id": "Mob_33",
"x": "-14.13",
"y": "450"
},
{
"id": "Mob_34",
"x": "5.99",
"y": "900"
},
{
"id": "Mob_35",
"x": "9.24",
"y": "228"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'scatter',
renderAt: 'chart-container',
id: 'myChart',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Old Stock Clearance",
"subcaption": "Price Vs Profit",
"yaxisname": "Price (In USD)",
"xaxisname": "Profit (In %)",
"xaxismaxvalue": "40",
"xaxisminvalue": "-20",
"yaxismaxvalue": "1000",
"xnumbersuffix": "%",
"ynumberprefix": "$",
//Vertical zero plane
"showVZeroPlane": "0",
"vZeroPlaneColor": "#cc3300",
"vZeroPlaneThickness": "3",
"vZeroPlaneAlpha": "90",
//Theme
"theme": "fint"
},
"dataset": [{
"drawline": "0",
"seriesname": "Televisions",
"color": "#6baa01",
"anchorsides": "3",
"anchorradius": "4",
"anchorbgcolor": "#6baa01",
"anchorbordercolor": "#6baa01",
"data": [{
"id": "TV_1",
"x": "-9.89",
"y": "642"
}, {
"id": "TV_2",
"x": "21.59",
"y": "947"
}, {
"id": "TV_3",
"x": "-8.8",
"y": "433"
}, {
"id": "TV_4",
"x": "-10.88",
"y": "750"
}, {
"id": "TV_5",
"x": "5.43",
"y": "593"
}, {
"id": "TV_6",
"x": "23.76",
"y": "426"
}, {
"id": "TV_7",
"x": "17.74",
"y": "575"
}, {
"id": "TV_8",
"x": "8.71",
"y": "962"
}, {
"id": "TV_9",
"x": "-1.56",
"y": "205"
}, {
"id": "TV_10",
"x": "16.42",
"y": "937"
}, {
"id": "TV_11",
"x": "10.42",
"y": "689"
}, {
"id": "TV_12",
"x": "-1.19",
"y": "425"
}, {
"id": "TV_13",
"x": "-12.58",
"y": "804"
}, {
"id": "TV_14",
"x": "25.49",
"y": "700"
}, {
"id": "TV_15",
"x": "24.27",
"y": "302"
}, {
"id": "TV_16",
"x": "19.07",
"y": "276"
}, {
"id": "TV_17",
"x": "16.16",
"y": "913"
}, {
"id": "TV_18",
"x": "4.37",
"y": "744"
}, {
"id": "TV_19",
"x": "-2.15",
"y": "939"
}, {
"id": "TV_20",
"x": "15.67",
"y": "569"
}, {
"id": "TV_21",
"x": "10.94",
"y": "257"
}, {
"id": "TV_22",
"x": "24.97",
"y": "893"
}, {
"id": "TV_23",
"x": "28.15",
"y": "523"
}, {
"id": "TV_24",
"x": "-1.76",
"y": "930"
}, {
"id": "TV_25",
"x": "11.53",
"y": "564"
}, {
"id": "TV_26",
"x": "-3.31",
"y": "571"
}, {
"id": "TV_27",
"x": "9.73",
"y": "582"
}, {
"id": "TV_28",
"x": "4.96",
"y": "582"
}, {
"id": "TV_29",
"x": "-7.77",
"y": "756"
}, {
"id": "TV_30",
"x": "-11.56",
"y": "404"
}]
}, {
"seriesname": "Cell Phones",
"color": "#f8bd19",
"anchorsides": "4",
"anchorradius": "4",
"anchorbgcolor": "#f8bd19",
"anchorbordercolor": "#f8bd19",
"data": [{
"id": "Mob_1",
"x": "-2.79",
"y": "681"
}, {
"id": "Mob_2",
"x": "0.74",
"y": "214"
}, {
"id": "Mob_3",
"x": "16.82",
"y": "215"
}, {
"id": "Mob_4",
"x": "-13.31",
"y": "530"
}, {
"id": "Mob_5",
"x": "17.96",
"y": "973"
}, {
"id": "Mob_6",
"x": "12.92",
"y": "217"
}, {
"id": "Mob_7",
"x": "1.35",
"y": "369"
}, {
"id": "Mob_8",
"x": "28.21",
"y": "304"
}, {
"id": "Mob_9",
"x": "17.95",
"y": "495"
}, {
"id": "Mob_10",
"x": "26.99",
"y": "795"
}, {
"id": "Mob_11",
"x": "-7.85",
"y": "315"
}, {
"id": "Mob_12",
"x": "10.46",
"y": "866"
}, {
"id": "Mob_13",
"x": "20.09",
"y": "671"
}, {
"id": "Mob_14",
"x": "4.99",
"y": "670"
}, {
"id": "Mob_15",
"x": "3.88",
"y": "479"
}, {
"id": "Mob_16",
"x": "19.22",
"y": "737"
}, {
"id": "Mob_17",
"x": "29.81",
"y": "928"
}, {
"id": "Mob_18",
"x": "20.44",
"y": "569"
}, {
"id": "Mob_19",
"x": "22.67",
"y": "885"
}, {
"id": "Mob_20",
"x": "28.76",
"y": "444"
}, {
"id": "Mob_21",
"x": "22.98",
"y": "288"
}, {
"id": "Mob_22",
"x": "-7.61",
"y": "817"
}, {
"id": "Mob_23",
"x": "17.2",
"y": "357"
}, {
"id": "Mob_24",
"x": "-12.12",
"y": "913"
}, {
"id": "Mob_25",
"x": "-0.98",
"y": "579"
}, {
"id": "Mob_26",
"x": "-5.64",
"y": "537"
}, {
"id": "Mob_27",
"x": "23.62",
"y": "522"
}, {
"id": "Mob_28",
"x": "6.84",
"y": "267"
}, {
"id": "Mob_29",
"x": "-12.15",
"y": "825"
}, {
"id": "Mob_30",
"x": "-11.62",
"y": "857"
}, {
"id": "Mob_31",
"x": "9.58",
"y": "204"
}, {
"id": "Mob_32",
"x": "-11.57",
"y": "232"
}, {
"id": "Mob_33",
"x": "-14.13",
"y": "450"
}, {
"id": "Mob_34",
"x": "5.99",
"y": "900"
}, {
"id": "Mob_35",
"x": "9.24",
"y": "228"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below are the attributes used to show or hide the zero plane:
| Attribute | Description |
|---|---|
|
Set this to |
|
Set this to |