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",
});
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 chart that contain
<script type="text/javascript">
console.log('{{ $cpe_mac }}');
var ajax = $.ajax({url: '/api/timebase/'+'{{ $cpe_mac }}'});
ajax.done(function (data) {
console.log(data)
var array_hour_g_down = [];
var array_hour_g_up = [];
var array_hour_p_down = [];
var array_hour_p_up = [];
for (var i = 0; i < data.hour_g_up.length; i++) {
array_hour_g_down[i] = {"value":data.hour_g_down[i]};
array_hour_g_up[i] = {"value":data.hour_g_up[i]};
array_hour_p_down[i] = {"value":data.hour_p_down[i]};
array_hour_p_up[i] = {"value":data.hour_p_up[i]};
}
var granular_time_network_day = new FusionCharts({
"type": "msstackedcolumn2d",
"renderAt": "granular-time-network",
"width": "100%",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Time-Based Bandwidth Usage",
"subcaption": "Daily View",
"xaxisname": data.month + ' ' + data.dth + ',' + ' '+ data.year,
"yaxisname": "Bandwidth (in Megabytes)",
"paletteColors": color_home_down+','+color_home_up+','+color_guest_down+','+color_guest_up,
// "numbersuffix": "MB",
"showvalues": "0",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"categories": [{
"category": [{
"label": "12am-2am"
}, {
"label": "2am-4am"
}, {
"label": "4am-6am"
}, {
"label": "6am-8am"
}, {
"label": "8am-10am"
}, {
"label": "10am-12pm"
}, {
"label": "12pm-2pm"
}, {
"label": "2pm-4pm"
}, {
"label": "4pm-6pm"
}, {
"label": "6pm-8pm"
}, {
"label": "8pm-10pm"
}, {
"label": "10pm-12am"
}]
}],
"dataset": [{
"dataset": [{
"seriesname": "Home Network - Downlink",
"data": array_hour_p_down
}, {
"seriesname": "Home Network - Uplink",
"data": array_hour_p_up
}]
}, {
"dataset": [{
"seriesname": "Guest Network - Downlink",
"data": array_hour_g_down
}, {
"seriesname": "Guest Network - Uplink",
"data": array_hour_g_up
}]
}]
}
});
});
</script>
I wrap my code around ajax.done() because I don't want my page load to wait for that data and rendering the chart as soon as the data arrive. But now I face another issue.
Uncaught ReferenceError: granular_time_network_day is not defined
Error
$('#granular-time').on('click', function() {
$('#granular-total-view').hide();
$('#granular-time-view').fadeIn('slow');
granular_time_network_day.render();
granular_time_device_day.render();
$('#btn-interval').prop('disabled', false);
});
How do I prevent this from happening?
Did I do anything wrong on my Ajax?
Should I look into promise or something like that?
You need to defined granular_time_network_day outside of your ajax.done function
define the function outside of your .done() callback so the click is aware of it even if the call hasn't completed yet.
EDIT
You don't need to check to see if a function is available, you need to check and see if you have the data yet from the $.ajax call:
var data = null;
$.ajax().done(function(data) {
// assign data
data = data;
});
$('#granular-time'.on('click', function() {
// check to see if you have data
if (data) {
// do your stuff
var granular_time_network_day = new FusionCharts({
"type": "msstackedcolumn2d",
"renderAt": "granular-time-network",
"width": "100%",
"dataFormat": "json",
....
})
}
});
});
I would suggest checking to see if granular_time_network_day exists before calling render.
Example:
$('#interval-day').on('click',function(){
if (granular_time_network_day) {
granular_time_network_day.render();
} else {
//tell user that the data is still being retrieved or handle another way
}
});
I did notice a potential other problem related to the variable being declared in the done call - granular_time_network_day will be in scope only for the done function. It would work out to declare it outside the done function, so that the click handler will be able to access it when the ajax call is complete.
window.
Turn out that window. save my life, and the answer that I am looking for.
Here is my final script
<script type="text/javascript">
var ajax = $.ajax({url: '/api/timebase/'+'{{ $cpe_mac }}'});
ajax.done(function (data) {
console.log(data)
var array_hour_g_down = [];
var array_hour_g_up = [];
var array_hour_p_down = [];
var array_hour_p_up = [];
for (var i = 0; i < data.hour_g_up.length; i++) {
array_hour_g_down[i] = {"value":data.hour_g_down[i]};
array_hour_g_up[i] = {"value":data.hour_g_up[i]};
array_hour_p_down[i] = {"value":data.hour_p_down[i]};
array_hour_p_up[i] = {"value":data.hour_p_up[i]};
}
window.granular_time_network_day = new FusionCharts({
"type": "msstackedcolumn2d",
"renderAt": "granular-time-network",
"width": "100%",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Time-Based Bandwidth Usage",
"subcaption": "Daily View",
"xaxisname": data.month + ' ' + data.dth + ',' + ' '+ data.year,
"yaxisname": "Bandwidth (in Megabytes)",
"paletteColors": color_home_down+','+color_home_up+','+color_guest_down+','+color_guest_up,
// "numbersuffix": "MB",
"showvalues": "0",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"categories": [{
"category": [{
"label": "12am-2am"
}, {
"label": "2am-4am"
}, {
"label": "4am-6am"
}, {
"label": "6am-8am"
}, {
"label": "8am-10am"
}, {
"label": "10am-12pm"
}, {
"label": "12pm-2pm"
}, {
"label": "2pm-4pm"
}, {
"label": "4pm-6pm"
}, {
"label": "6pm-8pm"
}, {
"label": "8pm-10pm"
}, {
"label": "10pm-12am"
}]
}],
"dataset": [{
"dataset": [{
"seriesname": "Home Network - Downlink",
"data": array_hour_p_down
}, {
"seriesname": "Home Network - Uplink",
"data": array_hour_p_up
}]
}, {
"dataset": [{
"seriesname": "Guest Network - Downlink",
"data": array_hour_g_down
}, {
"seriesname": "Guest Network - Uplink",
"data": array_hour_g_up
}]
}]
}
});
});
</script>
I'm no longer getting the error.
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>
I have the following JSON stored in a variable named data. How can i filter it excluding the "0" values?
{
"BTC": "0",
"XCP": "0",
"LTC": "0",
"NXT": "0",
"XPM": "0",
"NMC": "0",
"MMC": "0",
"NOBL": "0",
"USDE": "0",
"SOC": "0",
"KDC": "0",
"DOGE": "0.00000001",
"GLB": "0",
"Q2C": "0",
"FOX": "0",
"MRC": "0",
"MTS": "0"
}
I tried:
var datos = data.filter(function(data){
return !!data;
});
res.send(data);
but it's telling me
Object # has no method 'filter'
Regards,
Objects dont have a filter method, you need to convert your object to an array if you want to use the array filter method.
But to answer the question,
var newData = {};
for(i in data){
if(data.hasOwnProperty(i) && data[i] != "0"){
newData[i] = data[i];
}
}
var dataObj = {
"BTC": "0",
"XCP": "0",
"LTC": "0",
"NXT": "0",
"XPM": "0",
"NMC": "0",
"MMC": "0",
"NOBL": "0",
"USDE": "0",
"SOC": "0",
"KDC": "0",
"DOGE": "0.00000001",
"GLB": "0",
"Q2C": "0",
"FOX": "0",
"MRC": "0",
"MTS": "0"
}
var keys = Object.keys(dataObj);
keys.forEach(function(key){ if(dataObj[key] === "0") delete dataObj[key];})
console.log(dataObj);
The CMS I am using will give me JSON data of each item within a database. I use the following code to access this data:
var items = new BCAPI.Models.WebApp.ItemCollection("Strain Bank");
items.fetch({
success: function (items) {
items.each(function (item) {
item.fetch({
success: function (itemDetails) {
console.log(JSON.stringify(itemDetails.attributes))
}
});
});
}
});
This console.log(JSON.stringify(itemDetails.attributes)) outputs the following code for each item. An example of an items code is below:
{
"id": 4441485,
"name": "Alien OG",
"fields": {
"Buzz Length": "580",
"Strength": "37",
"Sativa Percentage": "231",
"Overall Rating": "40",
"Flower Time": "61",
"Potency": "10",
"Yield": "10",
"Height": "20",
"Reviews": "4",
"Grow Reviews": "1",
"Creative": "2",
"Euphoric": "0",
"Uplifted": "0",
"Energetic": "2",
"Lazy": "0",
"Focused": "2",
"Happy": "1",
"Talkative": "0",
"Giggly": "0",
"Tingly": "0",
"Hungry": "0",
"Sleepy": "0",
"Aroused": "0",
"Migraines": "1",
"Nausea": "0",
"Insomnia": "0",
"Pain": "2",
"Anxiety": "0",
"Stress": "2",
"PMS": "0",
"Lack of Appetite": "0",
"Muscle Spasms": "0",
"Depression": "2",
"Seizures": "0",
"Fatigue": "1",
"Fruity": "0",
"Citrus": "0",
"Seasonings-Spicy": "1",
"Floral": "2",
"Pungent": "2",
"Chemical": "1",
"Earthy": "2",
"Sweet": "0",
"Grass": "1",
"Skunky": "0"
}
}
What I need to do is access the data within each item. I am unsure how to do this. I tried:
//Thecode below replaces console.log(JSON.stringify(itemDetails.attributes)) in the above example.
var json = JSON.stringify(itemDetails.attributes)
$.each($.parseJSON(json), function(idx, obj) {
console.log(obj.name);
});
When I try the above code I see two things in the console.log:
TypeError: obj is null
and
undefined
How do I properly access the JSON data?
You should be able to access data in each item by . notation, like itemDetails.attributes.id, itemDetails.attributes.name and itemDetails.attributes.fields
Replace below:
console.log(JSON.stringify(itemDetails.attributes))
With below and try
console.log(itemDetails.attributes.name);
You are accessing the desired object wrongly. Try,
$.each(xObj.fields, function (key, val) {
console.log(key + " : " + val);
});
DEMO