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>
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 try to use in a View a JS function and mix with a Razor Code, but for any reason after the code marked FROM HERE not continues the execution of function, something missing to the function to continue after included the Razor code?
<script type="text/javascript">
FusionCharts.ready(function () {
var data2 = [];
#for (var i = 0; i < totalt; i++)
{
#:data2.push({
#:label: "#data.Results[i].Timestamp",
#:value: "#data.Results[i].Value",
});
**FROM HERE**
var chartObj = new FusionCharts({
type: 'line',
renderAt: 'chart-containeriot',
width: '493',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"showBorder": "0",
"showShadow": "0",
"use3DLighting": "0",
"showLabels": "0",
"showValues": "1",
"paletteColors": "#58E2C2, #F7E53B",
"bgColor": "#191c51",
"bgAlpha": "100",
"canvasBgAlpha": "0",
"decimals": "0",
"baseFont": "Arial",
"baseFontColor": "#FFFFFF",
"canvasTopMargin": "0",
"showTickMarks": "0",
"showTickValues": "0",
"showLimits": "0",
"majorTMAlpha": "0",
"minorTMAlpha": "0",
"pivotFillAlpha": "0",
"showPivotBorder": "0",
"xAxisName": "Day",
"yAxisName": "Metros Cubicos",
"lineThickness": "2"
},
"data": data2
}
});
chartObj.render();
});
</script>
Razor interprets # as razor syntax. You should escape your code with ##
##:data2.push({
##:label: "#data.Results[i].Timestamp",
##:value: "#data.Results[i].Value",
});
Please, how can I remove colour range slider from fusion chart? I have tried to remove the colorrange from the chart object but it is stil there.
Thanks
In your dataSource colorrange object, set "gradient" to 0
"colorrange": {
"gradient": 0,
"color": [
{
"minvalue": "0",
"maxvalue": "50",
"code": "#62B58F"
},
{
"minvalue": "50",
"maxvalue": "75",
"code": "#FFC533"
},
{
"minvalue": "75",
"maxvalue": "100",
"code": "#F2726F"
}
]
}
I have a bar graph in which I am calling a javascript function to do some operation on mouse click of the bar, I want to get starting point of X & Y axis of the same bar on which I clicked, Can I do this in fusion chart, if yes how?
I highlighted with yellow color, I need these positions according to screen.
Yes, you can get the x and y co-ordinates with respect to the chart dimension when you click on the bar plots.
You need to use the FusionCharts "dataPlotClick" event API that is triggered when you click anywhere on the plots. Then, in the event function parameter you can use the predefined attributes "chartX" and "chartY" to fetch the x and y co-ordinate of the clicked point.
Please check the documentation link for reference : https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events#dataplotclick-261
Also find a sample fiddle for reference : https://jsfiddle.net/mf1qh9ku/1/
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'bar2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenue (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"data": [{
"label": "Jan",
"value": "420000"
}, {
"label": "Feb",
"value": "810000"
}, {
"label": "Mar",
"value": "720000"
}, {
"label": "Apr",
"value": "550000"
}, {
"label": "May",
"value": "910000"
}, {
"label": "Jun",
"value": "510000"
}, {
"label": "Jul",
"value": "680000"
}, {
"label": "Aug",
"value": "620000"
}, {
"label": "Sep",
"value": "610000"
}, {
"label": "Oct",
"value": "490000"
}, {
"label": "Nov",
"value": "900000"
}, {
"label": "Dec",
"value": "730000"
}]
},
"events": {
"dataPlotClick": function(eventObj, dataObj) {
alert("X : " + eventObj.data.chartX + ", Y : " + eventObj.data.chartY);
}
}
}).render();
});
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..