Loading
Data Plot
Data plot refers to the column in column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart. This section shows how you can enhance the way your data plot looks with the help of colors, gradients and hover effects.
This section talks about:
-
Configuring colors for data plots
-
Customizing gradient effect for data plots
-
Configuring plot transparency
-
Configuring plot border
-
Configuring plot hover effects
Configuring colors for data plots
Specifying color for individual data plots
Using FusionCharts Suite XT you can specify a custom color for each data plot. A column 2D chart with colors based on the quarter of the year is shown below:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000",
"color": "#008ee4"
},
{
"label": "Feb",
"value": "810000",
"color": "#008ee4"
},
{
"label": "Mar",
"value": "720000",
"color": "#008ee4"
},
{
"label": "Apr",
"value": "550000",
"color": "#9b59b6"
},
{
"label": "May",
"value": "910000",
"color": "#9b59b6"
},
{
"label": "Jun",
"value": "510000",
"color": "#9b59b6"
},
{
"label": "Jul",
"value": "680000",
"color": "#6baa01"
},
{
"label": "Aug",
"value": "620000",
"color": "#6baa01"
},
{
"label": "Sep",
"value": "610000",
"color": "#6baa01"
},
{
"label": "Oct",
"value": "490000",
"color": "#e44a00"
},
{
"label": "Nov",
"value": "900000",
"color": "#e44a00"
},
{
"label": "Dec",
"value": "730000",
"color": "#e44a00"
}
]
}<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',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"data": [{
"label": "Jan",
"value": "420000",
//Using color attribute to specifically add color to each data plot
"color": "#008ee4"
}, {
"label": "Feb",
"value": "810000",
"color": "#008ee4"
}, {
"label": "Mar",
"value": "720000",
"color": "#008ee4"
}, {
"label": "Apr",
"value": "550000",
"color": "#9b59b6"
}, {
"label": "May",
"value": "910000",
"color": "#9b59b6"
}, {
"label": "Jun",
"value": "510000",
"color": "#9b59b6"
}, {
"label": "Jul",
"value": "680000",
"color": "#6baa01"
}, {
"label": "Aug",
"value": "620000",
"color": "#6baa01"
}, {
"label": "Sep",
"value": "610000",
"color": "#6baa01"
}, {
"label": "Oct",
"value": "490000",
"color": "#e44a00"
}, {
"label": "Nov",
"value": "900000",
"color": "#e44a00"
}, {
"label": "Dec",
"value": "730000",
"color": "#e44a00"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is the list of attributes used to define custom colors for individual data plots:
| Attribute Name | Description |
|---|---|
|
Sets the data-plot color in hex code, eg. |
|
Specifies custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., |
Specifying a list of colors for different data series/data plots:
You can also specify a comma separated list of colors for use in different data series (or in case of single series charts, different data plots). The colors are selected from the list in a round-robin way for each data series.
A multi-series 2D chart configured with a comma separated list of colors looks as below:
Given below is the attribute used to specify a comma separated list of colors for coloring data series:
| Attribute Name | Description |
|---|---|
|
Specifies custom list of hex colors for the data items. The list of colors have to be separated by comma e.g., |
Customizing gradient effects for data plots
Adding gradient effect to data plots
You can apply a global gradient color for an entire data plot as described in this sub-section.
A column 2D chart with global gradient color specified for individual data plots is shown below:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"theme": "fint",
"numberPrefix": "$",
"usePlotGradientColor": "1"
},
"data": [
{
"label": "Q1",
"value": "1950000",
"color": "#008ee4"
},
{
"label": "Q2",
"value": "1450000",
"color": "#9b59b6"
},
{
"label": "Q3",
"value": "1730000",
"color": "#6baa01"
},
{
"label": "Q4",
"value": "2120000",
"color": "#e44a00"
}
]
}<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',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"theme": "fint",
"numberPrefix": "$",
//Removing default gradient fill from columns
"usePlotGradientColor": "1"
},
"data": [{
"label": "Q1",
"value": "1950000",
"color": "#008ee4"
}, {
"label": "Q2",
"value": "1450000",
"color": "#9b59b6"
}, {
"label": "Q3",
"value": "1730000",
"color": "#6baa01"
}, {
"label": "Q4",
"value": "2120000",
"color": "#e44a00"
}]
},
"events": {
beforeRender: function(e, a) {
var appendBox = document.createElement("div"),
revenueChart = e.sender;
appendBox.innerHTML = '<input type="checkbox" id="dataplot-useGradient" checked="true">Use gradient fill for columns?</input>';
a.container.appendChild(appendBox);
var gradientCheckBox = document.getElementById('dataplot-useGradient');
//Set event listener for radio button
if (gradientCheckBox.addEventListener) {
gradientCheckBox.addEventListener("click", changeGradient);
}
function changeGradient(evt, obj) {
//Set gradient fill for chart using usePlotGradientColor attribute
(gradientCheckBox.checked) ? revenueChart.setChartAttribute('usePlotGradientColor', 1) : revenueChart.setChartAttribute('usePlotGradientColor', 0);
};
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The list of attributes used to configure gradient color for data plots is shown below:
| Attribute Name | Description |
|---|---|
|
Set this to |
|
You can globally add a gradient color to the entire plot of chart by specifying the second color as this attribute. For example, if you’ve specified individual colors for your columns and now you want a gradient that ends in white, you need to specify |
Customizing gradient properties
Apart from a basic gradient effect, you can also customize the gradient angle, and fill ratio for a data plot. A column 2D chart with customized gradient properties used for data plots looks as below:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showshadow": "1",
"usePlotGradientColor": "1",
"plotGradientColor": "#003366",
"plotFillAngle": "0",
"plotFillRatio": "0,100"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}<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',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showshadow": "1",
//Using plot gradient color
"usePlotGradientColor": "1",
//Applying plot gradient color
"plotGradientColor": "#003366",
//Applying fill angle for plots
"plotFillAngle": "0",
//Applying fill ratio for plots
"plotFillRatio": "0,100"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is the list of attributes used to configure gradient effects:
| Attribute Name | Description |
|---|---|
|
Sets the fill angle for gradient (for column, area and pie charts). Values can range from |
|
Specifies the start and end of the gradient effect in a comma separated format. For example a setting of “20, 40” would cause the gradient effect to start at 20% of width and end at 40% of width. The colour before gradient start would be set to the data plot color and after gradient end would get set to the gradient fill color. |
Customizing data plot transparency
You can set the transparency of a data plot fill colour. A column 2D chart with data plot transparency property applied looks as below:
{
"chart": {
"caption": "Comparison of Quarterly Revenue",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "90",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Previous Year",
"alpha": "30",
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Current Year",
"data": [
{
"value": "25400"
},
{
"value": "29800"
},
{
"value": "21800"
},
{
"value": "26800"
}
]
}
]
}<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: 'mscolumn2d',
renderAt: 'chart-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Comparison of Quarterly Revenue",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "90",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Q1"
}, {
"label": "Q2"
}, {
"label": "Q3"
}, {
"label": "Q4"
}]
}],
"dataset": [{
"seriesname": "Previous Year",
"alpha": "30",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}]
}, {
"seriesname": "Current Year",
"data": [{
"value": "25400"
}, {
"value": "29800"
}, {
"value": "21800"
}, {
"value": "26800"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is the list of attributes used to customize transparency of a data plot:
| Attribute Name | Description |
|---|---|
|
Used to set the transparency of all data plots in chart object. In case of gradients we can provide more than one alpha in a comma separated format. Values ranges from |
|
Sets the transparency for specific dataset / data plot using |
Customizing plot border
Showing or hiding plot border
Every data plot (column, area, or pie) has a border by default.You can choose to either retain the border or remove it. A chart with the ability to configure plot borders is shown below:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showPlotBorder": "1"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}<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',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
//Hiding plot borders
"showPlotBorder": "1"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
},
"events": {
"beforeRender": function(e, a) {
var appendBox = document.createElement("div"),
revenueChart = e.sender;
appendBox.innerHTML = '<input type="checkbox" id="dataplot-showBorder" checked="true">Show border for data plot (columns)?</input>';
a.container.appendChild(appendBox);
var showBorderCheckBox = document.getElementById('dataplot-showBorder');
//Set event listener for radio button
if (showBorderCheckBox.addEventListener) {
showBorderCheckBox.addEventListener("click", changeBorder);
}
function changeBorder(evt, obj) {
//Set gradient fill for chart using usePlotGradientColor attribute
(showBorderCheckBox.checked) ? revenueChart.setChartAttribute('showPlotBorder', 1) : revenueChart.setChartAttribute('showPlotBorder', 0);
};
}
}
}
);
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 plot border:
| Attribute Name | Description |
|---|---|
|
Set the value to |
Using a dashed data plot border
You can set a dashed border for the data plot and can also customize dash-length and the gap between dashes. A column 2D chart with a black dashed border around the data plots looks as below:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"showPlotBorder": "1",
"plotBorderDashed": "1",
"plotBorderDashLen": "4",
"plotBorderDashGap": "4",
"plotBorderThickness": "1",
"plotBorderColor": "#000000"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}<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',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
//Plot border properties
"showPlotBorder": "1",
"plotBorderDashed": "1",
"plotBorderDashLen": "4",
"plotBorderDashGap": "4",
"plotBorderThickness": "1",
"plotBorderColor": "#000000"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to change the data plot border:
| Attribute Name | Description |
|---|---|
|
Set this to |
|
Sets the length of each dash in plot-border (in pixels). This is applicable at a chart object level. |
|
Sets the gap between two consecutive dashes in plot border (in pixels). This is applicable at a chart object level. |
|
Set this to |
|
Sets the length of each dash in plot-border (in pixels). Affects an individual data-plot. |
|
Sets the gap between two consecutive dashes in plot border (in pixels). Affects an individual data-plot. |
Using rounded edges
You can configure data plots with rounded edges in 2D Column or Bar charts. A chart with the data plots having round edges is shown below:
{
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"useRoundEdges": "1"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}<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',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
//Applying round edges and glass fill effect for data plots
"useRoundEdges": "1"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to apply round edges for data plots:
| Attribute Name | Description |
|---|---|
|
Set this attribute to |
Configuring plot hover effects
You can display hover effects for data plots to add an interactive element to the charts. Shown below is a chart with hover effects enabled:
{
"chart": {
"caption": "Quarterly Revenue ",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"plotHoverEffect": "1",
"plotBorderHoverThickness": "1",
"plotBorderHoverDashed": "1",
"plotBorderHoverDashLen": "6",
"plotBorderHoverDashGap": "2"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}<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": "Quarterly Revenue ",
"subCaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
//Additional plot hover cosmetics attributes
"plotHoverEffect": "1",
"plotBorderHoverThickness": "1",
"plotBorderHoverDashed": "1",
"plotBorderHoverDashLen": "6",
"plotBorderHoverDashGap": "2"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is the list of attributes used to configure hover effects at a chart level. These settings are used in the chart object and will apply to all data plots in a chart.
| Attribute Name | Description |
|---|---|
|
Set this to |
|
Sets the hover color for data plots. Value should be in hex code format, eg. |
|
Sets the transparency for hover colour for data plots. Can take values from |
|
Sets the hover border color. Value should be in hex code format, eg. |
|
Sets the transparency of hover borders. Can take values from |
|
Sets the hover border thickness (in pixels). |
|
Set this to |
|
Sets the length of each dash for all data plots on hover(in pixels). |
|
Sets the gap between two consecutive dashes for all data plots on hover(in pixels). |
Given below is the list of attributes used to configure hover effects for individual data plots.
| Attribute Name | Description |
|---|---|
|
Sets the hover color for data plots. Value should be in hex code format, eg. |
|
Sets the transparency for hover colour for data plots. Can take values from |
|
Sets the hover border color. Value should be in hex code format, eg. |
|
Sets the transparency of hover borders. Can take values from |
|
Sets the hover border thickness (in pixels). |
|
Set this to |
|
Sets the length of each dash for all data plots on hover(in pixels). |
|
Sets the gap between two consecutive dashes for all data plots on hover(in pixels). |