0
Hello. I would like to have this ajax query return the value to be placed next and feed to the chart. I am running, but the value is not being loaded, the graph appears empty. Any problem in loading two ajax at the same time?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//controller/entrega.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<script type='text/javascript'>
var testegraf;
var endereco = 'http://pipageo.ngrok.io/regre';
$.ajax({
url: endereco,
complete: function(res) {
var meuJSON = JSON.parse(res.responseText);
testegraf = (meuJSON);
}
});
$(function() {
// Give the points a 3D feel by adding a radial gradient
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
var nome = testegraf;
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
fitToPlot: false,
frame: {
bottom: {
size: 1,
color: 'rgba(0,0,0,0.02)'
},
back: {
size: 1,
color: 'rgba(0,0,0,0.04)'
},
side: {
size: 1,
color: 'rgba(0,0,0,0.06)'
}
}
}
},
title: {
text: 'Dispersão Cisternas'
},
subtitle: {
text: 'X - Regressão | Y - Dias | X - Capacidade',
},
plotOptions: {
scatter: {
width: 50,
height: 50,
depth: 50
}
},
yAxis: {
min: 0,
max: 50,
title: null
},
xAxis: {
min: 0,
max: 20,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 20,
showFirstLabel: false
},
legend: {
enabled: false
},
series: [{
name: 'Regressão',
colorByPoint: true,
data: (testegraf)
}]
});
// Add mouse events for rotation
$(chart.container).bind('mousedown.hc touchstart.hc', function(eStart) {
eStart = chart.pointer.normalize(eStart);
var posX = eStart.pageX,
posY = eStart.pageY,
alpha = chart.options.chart.options3d.alpha,
beta = chart.options.chart.options3d.beta,
newAlpha,
newBeta,
sensitivity = 5; // lower is more sensitive
$(document).bind({
'mousemove.hc touchdrag.hc': function(e) {
// Run beta
newBeta = beta + (posX - e.pageX) / sensitivity;
chart.options.chart.options3d.beta = newBeta;
// Run alpha
newAlpha = alpha + (e.pageY - posY) / sensitivity;
chart.options.chart.options3d.alpha = newAlpha;
chart.redraw(false);
},
'mouseup touchend': function() {
$(document).unbind('.hc');
}
});
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
</html>
@Sergio Could you help me?
– HENNING SUMMER
It’s okay to have 2 or more ajax per page. On this page I only see one. What is the missing feature (or whatever the other ajax should do)? You are loading jQuery 2 times... the version
1.4and1.9there’s some reason?– Sergio
I think I know what’s going on, should call the function that mounts the graph on
successajax, becausetestegrafwill not have the value expected when loading the page, but only after the ajax call is successful, a reference: http://stackoverflow.com/questions/5316697/jquery-return-data-afterajax-call-success. This line:data: (testegraf)will only make sense after having the expected values intestegraf– Miguel
Would there have to be something like that? var testegraf = Function testAjax() { $.ajax({ url: address, Success:Function(data) { } }); Return data; }
– HENNING SUMMER
Nop, you can call a function that creates the graph and pass the data as argument:
monta_graph(testegraf);– Miguel
I tried to do what @Miguel told me, but I was unsuccessful. Couldn’t you do the modification for me?? Please!
– HENNING SUMMER
I can’t guarantee it will work but it would be something like this: https://jsfiddle.net/hg2cumy5/1/. I don’t understand why you have this either. I don’t understand why you have this
var nome = testegraf;since in the code you put it does not use the varnome– Miguel
No. If I could make the variable testegraf to receive the result of pipageo.../regre, my problem would be solved. I’ve tried using Location,assign but it renders the entire HTML page, just wanted the values. You can use Location.assign and before it renders capture the values of the tag that contains them and so mount the testegraf?
– HENNING SUMMER