I am using fusion charts in my jsp to present data. Here is the code I am using.
FusionCharts.ready(function(){
var summaryChart = new FusionCharts(
{
type: "line",
renderAt: "chartContainer1",
width: "500",
height: "300",
dataFormat: "json",
"dataSource": {
"chart": {
"caption": "Total Revenues from 2008-2013",
"numberprefix": "$",
"bgcolor": "FFFFFF",
"showalternatehgridcolor": "0",
"plotbordercolor": "008ee4",
"plotborderthickness": "3",
"showvalues": "0",
"divlinecolor": "CCCCCC",
"showcanvasborder": "0",
"tooltipbgcolor": "00396d",
"tooltipcolor": "FFFFFF",
"tooltipbordercolor": "00396d",
"numdivlines": "2",
"yaxisvaluespadding": "20",
"anchorbgcolor": "008ee4",
"anchorborderthickness": "0",
"showshadow": "0",
"anchorradius": "4",
"chartrightmargin": "25",
"canvasborderalpha": "0",
"showborder": "0"
},
"data": [
{
"label": "2009",
"value": "4400000",
"color": "008ee4"
},
{
"label": "2010",
"value": "4800000",
"color": "008ee4"
},
{
"label": "2011",
"value": "5500000",
"color": "008ee4"
},
{
"label": "2012",
"value": "6700000",
"color": "008ee4",
"anchorradius": "7",
"tooltext": "Historical high"
},
{
"label": "2013",
"value": "4200000",
"color": "008ee4"
}
]
}
});
summaryChart.render();
});
I want to add some data that has been read from the database as data to this chart. I tried using arrays inside javascipt and the stuff and still unable to do that.
Please help me.
yes, you can do it by using fusioncharts jsp wrapper
http://www.fusioncharts.com/jsp-charts/
More details about this wrapper
http://www.fusioncharts.com/dev/using-with-server-side-languages/java/introduction.html
Related
I want make clickable links in pie chart.
I used FusionCharts.js. How I make links in chart?
For example (FusionChart.js create multilevelpie chart with slices "seafood", "breads", "clothing", "sun glasses", "food & beverages", "apparel & accessories"):
FusionCharts.ready(function() {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id: "myChart",
width: '400',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Split of Top Products Sold",
"subCaption": "Last Quarter",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"basefontsize": "9",
"subcaptionFontBold": "0",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showCanvasBorder": "0",
"pieFillAlpha": "60",
"pieBorderThickness": "2",
"hoverFillColor": "#cccccc",
"pieBorderColor": "#ffffff",
"useHoverColor": "1",
"showValuesInTooltip": "1",
"showPercentInTooltip": "0",
"numberPrefix": "$",
"plotTooltext": "$label, $$valueK, $percentValue",
"pieRadius": "170"
},
"category": [{
"label": "Sales by category",
"color": "#ffffff",
"value": "150",
"category": [{
"label": "Food & {br}Beverages",
"color": "#f8bd19",
"value": "55.5",
"category": [{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
},
{
"label": "Seafood",
"color": "#f8bd19",
"value": "6.66"
}
]
},
{
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "10.08"
},
{
"label": "Clothing",
"color": "#e44a00",
"value": "18.9"
},
]
},
]
}]
}
});
topProductsChart.render();
});
Live demo: http://jsfiddle.net/cebu68vt/
I want this slices, for example - "Breads", be a clickable link.
In order to set a link to a specific Pie plot please set link attribute for that data object here is an example
{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1",
"link":"https://www.fusioncharts.com/dev"
}
Check this demo - http://jsfiddle.net/byzre3vj/
To know more about this feature check here - https://www.fusioncharts.com/dev/chart-guide/chart-configurations/drill-down
like I wrote in the title, I have a web page in which I render a list of object from a controller. I have to iterate on it to display values and create a multi series chart bar.
At the end of the process the only value I obtain is the last of the list.
The template of the html page is groovy.
How can I solve and display all the values to obtain a correct chart?
Here is the code:
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'msbar2d',
renderAt: 'chart-container',
width: '800',
height: '800',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Title",
"subCaption": "Subtitle",
"xAxisname": "x",
"yAxisName": "y",
"plotFillAlpha": "80",
"paletteColors": "#0075c2,#1aaf5d",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"showplotborder": "0",
"valueFontColor": "#ffffff",
"placeValuesInside": "1",
"showHoverEffect": "1",
"rotateValues": "1",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"showAlternateHGridColor": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"exportEnabled": "1"
},
#{list poList, as:'person'}
"categories": [{
"category": [{
"label": "${person?.surname} ${person?.name}"
},]
}],
"dataset": [{
"seriesname": "Ore di straordinario",
"data": [{
"value": "${person?.overtimeHour}"
},]
}, {
"seriesname": "Ore in più",
"data": [{
"value": "${person?.positiveHourForOvertime}"
},]
}],
#{/list}
}
}
);
fusioncharts.render();
});
</script>
I'm having a major brain fart. I have a java application that adds items to carts, and I'm using JSOUP to parse the html document since it can't run any javascript scripts. So I extracted this out of the getElementsByTag().html(); function. And now I need to find the value 1038, but while keeping in mind the values is not always 1038. So I would need it to search attribute -> 92 -> options -> id = 1038.
var spConfig = new Product.Config({
"attributes": {
"92": {
"id": "92",
"code": "color",
"label": "Color",
"options": [{
"id": "1038",
"label": "GREEN",
"price": "0",
"oldPrice": "0",
"products": ["94035", "94036", "94037", "94038", "94039", "94040", "94041", "94042", "94043", "94044"]
}]
},
"196": {
"id": "196",
"code": "size",
"label": "Size",
"options": [{
"id": "189",
"label": "8 ",
"price": "0",
"oldPrice": "0",
"products": ["94041"]
}, {
"id": "188",
"label": "8.5",
"price": "0",
"oldPrice": "0",
"products": ["94042"]
}, {
"id": "187",
"label": "9",
"price": "0",
"oldPrice": "0",
"products": ["94043"]
}, {
"id": "186",
"label": "9.5",
"price": "0",
"oldPrice": "0",
"products": ["94044"]
}, {
"id": "185",
"label": "10",
"price": "0",
"oldPrice": "0",
"products": ["94035"]
}, {
"id": "184",
"label": "10.5",
"price": "0",
"oldPrice": "0",
"products": ["94036"]
}, {
"id": "183",
"label": "11",
"price": "0",
"oldPrice": "0",
"products": ["94037"]
}, {
"id": "182",
"label": "11.5",
"price": "0",
"oldPrice": "0",
"products": ["94038"]
}, {
"id": "181",
"label": "12",
"price": "0",
"oldPrice": "0",
"products": ["94039"]
}, {
"id": "179",
"label": "13",
"price": "0",
"oldPrice": "0",
"products": ["94040"]
}]
}
},
"template": "$#{price}",
"basePrice": "129.98",
"oldPrice": "180",
"productId": "94013",
"chooseText": "Choose an Option...",
"taxConfig": {
"includeTax": false,
"showIncludeTax": false,
"showBothPrices": false,
"defaultTax": 0,
"currentTax": 0,
"inclTaxTitle": "Incl. Tax"
}
});
I need to receive the value "1038", but it can't just be a search function for integer 1038, because that value can possibly change in my script.
could you please tell me remove labels y axis labels .I make a simple chart using fusion library .
http://www.fusioncharts.com/dev/chart-attributes.html?chart=area2d
I saw some y axis label 0$,4$,12$..etc I want to remove that label .I need to show chart like this as shown in image [![enter image description here][1]][1]
http://jsfiddle.net/Tu57h/135/
can we show this on right side as shown in image ?
here is my code
http://jsfiddle.net/Tu57h/135/
FusionCharts.ready(function () {
var salesChart = new FusionCharts({
type: 'msarea',
renderAt: 'chart-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Sales of Liquor",
"subCaption": "Previous week vs current week",
"xAxisName": "Day",
"numberPrefix": "$",
"paletteColors": "#0075c2,#1aaf5d",
"bgColor": "#ffffff",
"showBorder": "0",
"showCanvasBorder": "0",
"plotBorderAlpha": "10",
"usePlotGradientColor": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"plotFillAlpha": "60",
"showXAxisLine": "1",
"axisLineAlpha": "25",
"showValues": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showAlternateHGridColor": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
},
"categories": [
{
"category": [
{
"label": "jan 2015"
},
{
"label": "feb 2015"
},
{
"label": "mar 2015"
},
{
"label": "may 2015"
},
{
"label": "jun 2015"
},
{
"label": "jul 2015"
},
{
"label": "aug 2015"
},{
"label": "sep 2015"
},{
"label": "oct 2015"
}
,{
"label": "nov 2015"
},{
"label": "dec 2015"
}
]
}
],
"dataset": [
{
"seriesname": "Previous Week",
"data": [
{
"value": "13000"
},
{
"value": "14500"
},
{
"value": "13500"
},
{
"value": "15000"
},
{
"value": "15500"
},
{
"value": "17650"
},
{
"value": "19500"
}
]
}
]
}
})
.render();
});
What's shown on the right side of your image are trendlines. You can remove the y-axis labels with showYAxisValues: "0" in your chart setup, and add trendlines with:
"trendlines": [
{
"line": [
{
"startvalue": "12000",
"color": "#1aaf5d",
"valueOnRight": "1",
"displayvalue": "$12K"
}
]
}
]
fiddle here http://jsfiddle.net/Tu57h/138/
I'm not sure if the API offers such functionality. However, to hide the y-axis labels, you may target the section of the DOM created by the API and hide it.
setTimeout(function () {
$('#chart-container .fusioncharts-yaxis-0-gridlabels').eq(0).hide();
}, 50);
Fiddle : http://jsfiddle.net/Tu57h/137/ ( I couldn't get it working on jsfiddle but it works fine when running on local machine).
I want to add description value from X and Y axies in tooltip of heat map data plots. I achieved that using trLabel and tlLabel properties but as it is used to show that values in top left and top right inside the square box. I don't want that values inside data plot boxes. I want these only in tooltips.
If I'm doing it wrong way, please suggest me the correct way.
Fiddle Showing my approach.
Any help would be appreciated.
I tried solving the your issue, hope this will help you..
FusionCharts.ready(function() {
var salesHMChart = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '270',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showplotborder": "1",
"xAxisLabelsOnTop": "1",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tlLabel</b>{br}<b>$trLabel</b>",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
},
"rows": {
"row": [
{
"id": "SGS5",
"label": "Samsung Galaxy S5"
},
{
"id": "HTC1M8",
"label": "HTC One (M8)"
},
{
"id": "IPHONES5",
"label": "Apple iPhone 5S"
},
{
"id": "LUMIA",
"label": "Nokia Lumia 1520"
}
]
},
"columns": {
"column": [
{
"id": "processor",
"label": "Processor"
},
{
"id": "screen",
"label": "Screen Size"
},
{
"id": "price",
"label": "Price"
},
{
"id": "backup",
"label": "Battery Backup"
}
,
{
"id": "cam",
"label": "Camera"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tllabel": "Quad Core 2.5 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "SGS5",
"columnid": "screen",
"value": "8.5",
"tllabel": "5.1 inch",
"trlabel": "AMOLED screen"
},
{
"rowid": "SGS5",
"columnid": "price",
"value": "9.3",
"tllabel": "$600"
},
{
"rowid": "SGS5",
"columnid": "backup",
"value": "9.7",
"tllabel": "29 Hrs",
"trlabel": "Battery : 2800 MAH"
},
{
"rowid": "SGS5",
"columnid": "cam",
"value": "8",
"tllabel": "16 MP",
"trlabel": "Front Camera : 2.1 MP"
},
{
"rowid": "HTC1M8",
"columnid": "processor",
"value": "9.2",
"tllabel": "Quad Core 2.3 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "HTC1M8",
"columnid": "screen",
"value": "8.3",
"tllabel": "5 inch",
"trlabel": "LCD screen"
},
{
"rowid": "HTC1M8",
"columnid": "price",
"value": "7.3",
"tllabel": "$600"
},
{
"rowid": "HTC1M8",
"columnid": "backup",
"value": "8.8",
"tllabel": "20 Hrs",
"trlabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC1M8",
"columnid": "cam",
"value": "8.7",
"tllabel": "4 MP",
"trlabel": "Front Camera : 5 MP"
},
{
"rowid": "IPHONES5",
"columnid": "processor",
"value": "9.1",
"tllabel": "Dual Core",
"trlabel": "OS : iOS 7"
},
{
"rowid": "IPHONES5",
"columnid": "screen",
"value": "8.6",
"tllabel": "4 inch",
"trlabel": "Retina LCD screen"
},
{
"rowid": "IPHONES5",
"columnid": "price",
"value": "7.2",
"tllabel": "$649"
},
{
"rowid": "IPHONES5",
"columnid": "backup",
"value": "8.4",
"tllabel": "10 Hrs",
"trlabel": "Battery : 1560 MAH"
},
{
"rowid": "IPHONES5",
"columnid": "cam",
"value": "9.5",
"tllabel": "8 MP",
"trlabel": "Front Camera : 1.2 MP"
},
{
"rowid": "LUMIA",
"columnid": "processor",
"value": "8.8",
"tllabel": "Quad Core 2.2 GHz",
"trlabel": "OS: Windows Phone 8"
},
{
"rowid": "LUMIA",
"columnid": "screen",
"value": "9.1",
"tllabel": "6 inch",
"trlabel": "LCD screen"
},
{
"rowid": "LUMIA",
"columnid": "price",
"value": "9.7",
"tllabel": "$470"
},
{
"rowid": "LUMIA",
"columnid": "backup",
"value": "9.2",
"tllabel": "27 Hrs",
"trlabel": "Battery : 3400 MAH"
},
{
"rowid": "LUMIA",
"columnid": "cam",
"value": "8.1",
"tllabel": "20MP",
"trlabel": "Front Camera : 1.2 MP"
}
]
}
],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#e24b1a",
"startLabel": "Poor",
"endLabel": "Good",
"color": [
{
"code": "#e24b1a",
"minValue": "1",
"maxValue": "5",
"label": "Bad"
},
{
"code": "#f6bc33",
"minValue": "5",
"maxValue": "7",
"label": "Average"
},
{
"code": "#6da81e",
"minValue": "7",
"maxValue": "10",
"label": "Good"
}
]
}
}
});
salesHMChart.render();
});
Try using "toolText" attribute.
"toolText": "8.7 {br} Quad Core 2.5 GHz {br} OS : Android 4.4 Kitkat"