I want to display response data in charts. but Tankvalue is getting out of scope and giving error message
Tankvalue is not defined.
How to make variable can be accessed globally. Charts are not loading due to an undefined value. want to show Tankvalue in the chart.
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.get('url', {
headers: {
'Authorization': 'Basic Pasword=='
}
})
.then(function (response) {
$scope.names = response.data;
$scope.decodedFrame = atob($scope.names.dataFrame);
var Tankvalue = $scope.decodedFrame.substring(6);
});
});
FusionCharts.ready(function () {
var fusioncharts = new FusionCharts({
type: 'cylinder',
dataFormat: 'json',
id: 'fuelMeter-1',
renderAt: 'chart-container',
width: '200',
height: '350',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Tank",
"subcaption": "Bakersfield Central",
"lowerLimit": "0",
"upperLimit": "25",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": " ltrs",
"showValue": "1",
"chartBottomMargin": "45",
"showValue": "0"
},
"value": Tankvalue,
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [{
"id": "range",
"items": [{
"id": "rangeBg",
"type": "rectangle",
"x": "$canvasCenterX-45",
"y": "$chartEndY-30",
"tox": "$canvasCenterX +45",
"toy": "$chartEndY-75",
"fillcolor": "#6caa03"
}, {
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#333333",
"text": "80 ltrs",
"x": "$chartCenterX-45",
"y": "$chartEndY-50"
}]
}]
}
},
});
fusioncharts.render();
});
Move FusionCharts.ready() inside then block as shown below.
.then(function (response) {
$scope.names = response.data;
$scope.decodedFrame = atob($scope.names.dataFrame);
var Tankvalue = $scope.decodedFrame.substring(6);
FusionCharts.ready(function () {
var fusioncharts = new FusionCharts({
type: 'cylinder',
dataFormat: 'json',
id: 'fuelMeter-1',
renderAt: 'chart-container',
width: '200',
height: '350',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Tank",
"subcaption": "Bakersfield Central",
"lowerLimit": "0",
"upperLimit": "25",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": " ltrs",
"showValue": "1",
"chartBottomMargin": "45",
"showValue": "0"
},
"value": Tankvalue,
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [{
"id": "range",
"items": [{
"id": "rangeBg",
"type": "rectangle",
"x": "$canvasCenterX-45",
"y": "$chartEndY-30",
"tox": "$canvasCenterX +45",
"toy": "$chartEndY-75",
"fillcolor": "#6caa03"
}, {
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#333333",
"text": "80 ltrs",
"x": "$chartCenterX-45",
"y": "$chartEndY-50"
}]
}]
}
},
});
fusioncharts.render();
});
});
$http.get() is an async function, so FusionCharts.ready() runs before the value assigned to Tankvalue variable.
To fix this move ready() function inside .then().
Do it like:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http.get('url', {
headers: {
'Authorization': 'Basic Pasword=='
}
})
.then(function (response) {
$scope.names = response.data;
$scope.decodedFrame = atob($scope.names.dataFrame);
var Tankvalue = $scope.decodedFrame.substring(6);
FusionCharts.ready(function () {
var fusioncharts = new FusionCharts({
type: 'cylinder',
dataFormat: 'json',
id: 'fuelMeter-1',
renderAt: 'chart-container',
width: '200',
height: '350',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Tank",
"subcaption": "Bakersfield Central",
"lowerLimit": "0",
"upperLimit": "25",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": " ltrs",
"showValue": "1",
"chartBottomMargin": "45",
"showValue": "0"
},
"value": Tankvalue,
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [{
"id": "range",
"items": [{
"id": "rangeBg",
"type": "rectangle",
"x": "$canvasCenterX-45",
"y": "$chartEndY-30",
"tox": "$canvasCenterX +45",
"toy": "$chartEndY-75",
"fillcolor": "#6caa03"
}, {
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#333333",
"text": "80 ltrs",
"x": "$chartCenterX-45",
"y": "$chartEndY-50"
}]
}]
}
},
});
fusioncharts.render();
});
});
});
You can not use local variable out of other function.make it a global or make as scope variable by using $scope.
$scope.Tankvalue = $scope.decodedFrame.substring(6);
Related
I need to group (and show) labels of X axis of a grahp, but still showing all single labels.
This is the code I actually use, and its a normal column2d graph:
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "column2d",
renderAt: "chart",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
"chart": {
"animation": 0,
"caption": "Graph title",
"xAxisName": "Performance",
"baseFontColor": "#000000",
},
"data": [
{
"label": "351-08",
"value": "91"
},
{
"label": "351-09",
"value": "90"
},
{
"label": "351-10",
"value": "94"
},
{
"label": "351-01",
"value": "99"
},
{
"label": "351-07",
"value": "92"
},
{
"label": "351-06",
"value": "81"
},
],
"trendlines": [
{
"line": [
{
"startvalue": "82",
"color": "#ff3333",
"thickness": "5",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
]
}
}).render();
});
What I need is showing another label on X axis that groups labels.
For example:
Group 1: [label1, label2];
Group 2: [label3, label4, label5];
Group 3: [label6];
UPDATED
I attached an image of what I need.
As you can see I need another labels line ("Fattore1", "Fattore2" and "Fattore3") that group other labels.
I have a div of a map and a div of pie chart on the web page. There are several pins on the map, and I want to refresh the chart div based on different click.
Here is the click function of leaflet.js:
var country = "";
map.on('click', function(e) {
country = "Worldwide";
alert("Set map to worldwide");
});
markerUS.on('click', function(e) {
country = "U.S.";
alert('U.S');
});
in the chart.js (pie chart):
AmCharts.makeChart("chartdiv1", {
"type": "pie",
"angle": 12,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"depth3D": 15,
"titleField": "category",
"valueField": "column-1",
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"align": "center",
"markerType": "circle"
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Number of Projects distribution of " + country
}],
"dataProvider": [{
"category": "a",
"column-1": 8
},
{
"category": "b",
"column-1": 6
},
{
"category": "c",
"column-1": 2
},
{
"category": "d",
"column-1": "3"
},
{
"category": "e",
"column-1": "4"
},
{
"category": "f",
"column-1": "2"
}
]
});
inside "titles" I make country as variable based on the pin I clicked.
But I got country is undefined and the value country from leaflet.js seems didn't pass to chart.js. Why? How to correct this and realize the function?
You got undefined country because its value only be initialized when user click on map or on a maker. You could try to update your code like this
map.on('click', function(e) {
var country = "Worldwide";
makeChart(country);
});
markerUS.on('click', function(e) {
var country = "U.S.";
makeChart(country);
});
function makeChart(country) {
AmCharts.makeChart("chartdiv1", {
// your chart option ....
});
}
As Trung said you need to call a function that refrech the chart on each click event
var country = "";
map.on('click', function(e) {
country = "Worldwide";
refrechChart(country);
});
markerUS.on('click', function(e) {
country = "U.S.";
refrechChart(country);
});
and then make the refrechChart function
function refrechChart(country) {
AmCharts.makeChart("chartdiv1", {
"type": "pie",
"angle": 12,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"depth3D": 15,
"titleField": "category",
"valueField": "column-1",
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"align": "center",
"markerType": "circle"
},
"titles": [{
"id": "Title-1",
"size": 15,
"text": "Number of Projects distribution of " + country
}],
"dataProvider": [{
"category": "a",
"column-1": 8
},
{
"category": "b",
"column-1": 6
},
{
"category": "c",
"column-1": 2
},
{
"category": "d",
"column-1": "3"
},
{
"category": "e",
"column-1": "4"
},
{
"category": "f",
"column-1": "2"
}
]
});
}
you can also pass more parameter to use in your chart like
function refrechChart(country,value1,value2) {
//...
}
Is it possible to create an animation with D3.js (version 4)? In particular I want to create multiple line charts that "runs" from left to right like in this example with react-fusionchart:
http://jsfiddle.net/thadeuszlay/m18qaekm/12/
(just look at the example above.)
FusionCharts.ready(function () {
var myDataSource = {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "ocean"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "Projected Revenue",
"renderas": "line",
"showvalues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}]
}]
};
var chartConfigs = {
id: "revenue-profits-chart",
renderAt: "revenue-profits-chart-container",
type: "mscombi2d",
width: 600,
height: 400,
dataFormat: "json",
dataSource: myDataSource
};
React.render( < react_fc.FusionCharts {...chartConfigs
}
/>,
document.getElementById("chart-container")
);
});
Yes you can do that: you just need to replace the methods that have changed from d3 v3 to v4, such as:
var parse = d3.timeParse("%b %Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
xAxis = d3.axisBottom(x).tickSize(-height),
yAxis = d3.axisLeft(y).tickArguments(4);
Etc. Etc.
You can find the working example on my bl.ocks.
My example is the v4 update of another bl.ocks.
Hope that helps.
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.
So, i usually pass the url for the VAST XML into the plugins.ova.ads.schedule[0].server.tag.
Is there a way to pass the VAST XML string directly instead of a url for it?
ova: {
url: 'flowplayer/ova.swf',
autoPlay: true,
"canFireEventAPICalls": true,
debug: {
levels: 'all, fatal, config, vast_template, vpaid, http_calls'
},
ads: {
companions: {
regions: [
{ id: "companionad300x60", "width": "300", "height": "60", "resourceType": "static" },
{ id: "companionad300x60", "width": "300", "height": "60", "resourceType": "iframe" },
{ id: "companionad728x90", "width": "728", "height": "90", "index": 0 },
{ id: "companionad728x90", "width": "728", "height": "90", "index": 1 },
{ id: "companionad300x250", "width": "300", "height": "250", "resourceType": "static" },
{ id: "companion-300x250-iframe", "width": "300", "height": "250", "index": 1 }
]
},
schedule: [
{
position: "pre-roll",
server: {
type: "direct",
tag: undefined
}
}
]
}
}
Thanks
As it turns out, it's as simple as changing the type to "inject".
schedule: [{
position: "pre-roll",
server: {
type: "inject",
tag: xmlString
}
}]