Related
EDIT:
Now I am getting the data properly by adding an *ngIf condition for graph component. But, the chart getting rendered, not getting any fill color. The fill URL getting is
fill="url('http://localhost:4200/#rr-1272-xr___89_110_110__rgba_118_193_134_0.9__78-rgba_118_193_134_0.9__89')"
OLD:(Found solution)
In my application, the Fusioncharts graphs are not rendering when the tab is not active. Even when the tab comes to active, the graphs are not rendering. Showing No data to display message as follows
HTML:
<section class="">
<!-- fusion chart starts here -->
<fusioncharts width="220" height="220" type="doughnut2d"
[dataSource]="dataSource" dataFormat="json" SVGDefinitionURL='absolute'>
</fusioncharts>
<!-- fusion chart ends here -->
</section>
Component:
let xyz = {
chart: {
"bgColor": "#ffffff",
"startingAngle": "310",
"showLegend": "0",
"defaultCenterLabel": this.returnValue(this.chartData) + "\n" + "Total",
// "centerLabel": "$value" + "\n" + "$label",
"centerLabelBold": "0",
"showTooltip": "0",
"theme": "fusion",
"minAngleForValue": "75",
"enablesmartLabel": "0",
"showLabels": "0",
"showValues": "0",
"enableMultiSlicing": "0",
"showBorder": "0",
"showPlotBorder": "1",
"plotBorderColor": "#ffffff",
"plotBorderThickness": "5",
// "legendPosition": "RIGHT",
"doughnutRadius": "70",
"paletteColors": "#6C7DED,#3CA653,#FFAB27,#3AC9E9,#6C7DED,#0C8455,#FDCF12,#76E4FC",
"animateClockwise": "0",
"chartLeftMargin": "0",
"chartRightMargin": "0",
"chartTopMargin": "0",
"chartBottomMargin": "0",
"captionPadding": "0",
"slicingDistance": "0",
"plotHoverEffect": "1",
"centerLabelFontSize": "20",
"centerLabelFont": "DroidSans",
"centerLabelColor": "#222222",
},
data: [
{
"label": "Pilot",
"id": "Pilot",
"value": 5,
"color": "#3CA653",
"link": "studies?studies-by-phase=Pilot"
},
{
"label": "Pivotal",
"id": "Pivotal",
"value": 2,
"color": "#FFAB27",
"link": "studies?studies-by-phase=Pivotal"
},
{
"label": "Phase 1",
"id": "Phase 1",
"value": 4,
"color": "#3AC9E9",
"link": "studies?studies-by-phase=Phase 1"
},
{
"label": "Phase 2",
"id": "Phase 2",
"value": 3,
"color": "#6C7DED",
"link": "studies?studies-by-phase=Phase 2"
}
]
};
this.dataSource = { ...xyz };
Please help me solve this issue.
Thank you...
In the module.ts file add SVGDefinitionURL as absolute instead of adding in component.html
FusionCharts.options['SVGDefinitionURL'] = absolute;
I have a JSON data object which I am retrieving from mongoDB. It has the following format:
var billData = [{
"_id": "PT155/454",
"_class": "com.aventyn.hms.domain.OPDBill",
"billingDate": "2017-11-20",
"patientId": "PT155",
"transactions": [{
"txnId": "PT155/454/1",
"toBePaid": "0",
"txnAmount": "0",
"due": "0",
"selfPay": true
}, {
"txnId": "PT155/454/2",
"toBePaid": "450",
"txnAmount": "350",
"due": "100",
"selfPay": false
}]
}, {
"_id": "PT156/455",
"_class": "com.aventyn.hms.domain.OPDBill",
"billingDate": "2017-11-20",
"patientId": "PT156",
"transactions": [{
"txnId": "PT156/455/1",
"toBePaid": "300",
"txnAmount": "200",
"due": "100",
"selfPay": true
}, {
"txnId": "PT156/455/2",
"toBePaid": "100",
"txnAmount": "50",
"due": "50",
"selfPay": true
}]
}];
My problem is I want to remove those transactions which have property of selfPay: false for this I am doing the following but It is not working:
$.each(billData, function (k, v) {
$.each(v.transactions, function (tK, tV) {
if (tV.selfPay == true) {
billData[k].transactions = tV;
}
});
});
But the data which I get is same as what I am getting from the database.
Any idea how can I achieve this?
Thanks for your Help.
Link for jsfiddle is: https://jsfiddle.net/0uy38pLf/
You can use a combination of Array#map and Array#filter to achieve the desired results (without even using any method of jQuery):
var billData = [{
"_id": "PT155/454",
"_class": "com.aventyn.hms.domain.OPDBill",
"billingDate": "2017-11-20",
"patientId": "PT155",
"transactions": [{
"txnId": "PT155/454/1",
"toBePaid": "0",
"txnAmount": "0",
"due": "0",
"selfPay": true
},
{
"txnId": "PT155/454/2",
"toBePaid": "450",
"txnAmount": "350",
"due": "100",
"selfPay": false
}
]
},
{
"_id": "PT156/455",
"_class": "com.aventyn.hms.domain.OPDBill",
"billingDate": "2017-11-20",
"patientId": "PT156",
"transactions": [{
"txnId": "PT156/455/1",
"toBePaid": "300",
"txnAmount": "200",
"due": "100",
"selfPay": true
},
{
"txnId": "PT156/455/2",
"toBePaid": "100",
"txnAmount": "50",
"due": "50",
"selfPay": true
}
]
}
];
var result = billData.map(bill => {
bill.transactions = bill.transactions.filter(tran => tran.selfPay);
return bill;
});
console.log(result);
As far as I can see, it could be better, you negate the if clause. So that you check against selfPay === false.
console.log(billData);
$.each(billData,function(k,v){
$.each(v.transactions,function(tK,tV){
if(tV.selfPay === false ){
billData[k].transactions.splice(tK, 1);
}
});
});
console.log(billData)
Also I guess you want to remove just that single item. To remove a single item use the splice function which takes the index of the item you want to remove in this case tK.
Hope it helps!
I am trying to use water fall chart of fusioncharts API.
I want to disable hovering property of chart. Here you can see the on hovering it shows "Variable Costs, $-156K" on the "Variable Costs" column.
I am using some following configuration-
{
"chart": {
"caption": "Total Profit Calculation",
"subcaption": "Last month",
"yAxisname": "Amount (In USD)",
"numberprefix": "$",
"connectordashed": "1",
"sumlabel": "Total {br} Profit",
"positiveColor": "#6baa01",
"negativeColor": "#e44a00",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineDashed": "1",
"divLineDashLen": "1",
"usePlotGradientColor": "0",
"showplotborder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"showAlternateHGridColor": "0"
},
"data": [
{
"label": "Online sales",
"value": "420000"
},
{
"label": "Store Sales",
"value": "710000"
},
{
"label": "Total Sales",
"issum": "1"
},
{
"label": "Fixed Costs",
"value": "-250000"
},
{
"label": "Variable Costs",
"value": "-156000"
},
{
"label": "COGS",
"value": "-310000"
},
{
"label": "Promotion Costs",
"value": "-86000"
},
{
"label": "Total Costs",
"issum": "1",
"cumulative": "0"
}
]
}
You can also check the data and configuration at the following link.
Waterfall Chart
Please suggest fusioncharts API way(If possible) to disable on-hover property. Other way solutions are also welcome.
Just disable the hover event by adding css rule to the elements.
Jquery Solution
$('div#chart-container-1 rect').css('pointer-events','none');
CSS solution
div#chart-container-1 rect {
pointer-events: none !important;
}
Note: chart-container-1 was the id of the parent div which wraps the chart in the link you provied, you can change it to match your div.
!important is used in the css because the elements have inline styles for pointer-events and it takes priority in the rule, So override the inline property priority I have used !important
Also note pointer-events:none will remove all the mouse events including click, hover, mousein, mouseout etc..
Please, I need help with scale in FusionCharts.
Instead of (0$, 20$ ...) I want : A B C D where each letter has a significant value (A = 1, B = 2 , ...).
The people at the support told me that it's not supported natively. And I could do it with trendlines.
Anyone has tried with trendlines or any other solution ?
Thank you for your help.
You can consider using annotation feature. Here is fiddle which should help you to achieve what you want.
Hide the yAxis by
"showYAxisValues": "0",
Then create the axis through annotation.
For anyone looking for a solution, I've tried with annotations but it did'nt work for me because I was using a multi series bar chart.
So I've finally gone with Trendlines :
"trendlines": [
{
"line": [
{
"startvalue": "1",
"endvalue": "1",
"color": "#111111",
"displayvalue": "A",
"dashed": "0",
"thickness": "0",
"dashgap": "6",
"alpha": "100",
"showontop": "1"
},
{
"startvalue": "2",
"endvalue": "2",
"color": "#111111",
"displayvalue": "B",
"dashed": "0",
"thickness": "0",
"dashgap": "6",
"alpha": "100",
"showontop": "1"
}
]
}
]
I am new to javascript and not great at coding in general. I have been trying to use javascript code I got from Fusion Charts to create a doughnut chart but it isn't working. I've tried using both a separate .js file with a src in html, and placing the javascript code in script tags within the html. The javascript doesn't show up on the webpage for either. It's probably something really simple.
<div id="chart-container">FusionCharts will render here</div>
(and my javascript)
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'doughnut2d',
renderAt: 'chart-container',
width: '450',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Homicides by Weapon",
"subCaption": "USA 2013",
"numberPrefix": "",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor": "#ffffff",
"showBorder": "0",
"use3DLighting": "0",
"showShadow": "0",
"enableSmartLabels": "0",
"startingAngle": "310",
"showLabels": "0",
"showPercentValues": "1",
"showLegend": "1",
"legendShadow": "0",
"legendBorderAlpha": "0",
"defaultCenterLabel": "Total homicides: 11583",
"centerLabel": "Homicides from $label: $value",
"centerLabelBold": "1",
"showTooltip": "0",
"decimals": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0"
},
"data": [
{
"label": "Firearms",
"value": "8454"
},
{
"label": "Knives or cutting instruments",
"value": "1490"
},
{
"label": "Personal Weapons (hands, fists, etc.)",
"value": "687"
},
{
"label": "Other",
"value": "952"
}
]
}
}).render();
});
To render FusionCharts you need to add FC library in head tag.
please have a try to use cdn link FC 3.10.1 Library
or you can use below code to render fusionchart
<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">
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'doughnut2d',
renderAt: 'chart-container',
width: '450',
height: '450',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Homicides by Weapon",
"subCaption": "USA 2013",
"numberPrefix": "",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor": "#ffffff",
"showBorder": "0",
"use3DLighting": "0",
"showShadow": "0",
"enableSmartLabels": "0",
"startingAngle": "310",
"showLabels": "0",
"showPercentValues": "1",
"showLegend": "1",
"legendShadow": "0",
"legendBorderAlpha": "0",
"defaultCenterLabel": "Total homicides: 11583",
"centerLabel": "Homicides from $label: $value",
"centerLabelBold": "1",
"showTooltip": "0",
"decimals": "0",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0"
},
"data": [
{
"label": "Firearms",
"value": "8454"
},
{
"label": "Knives or cutting instruments",
"value": "1490"
},
{
"label": "Personal Weapons (hands, fists, etc.)",
"value": "687"
},
{
"label": "Other",
"value": "952"
}
]
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts will render here</div>
</body>
</html>