Help me please ...
I have two function and question - as to me to receive the chartData variable as AmCharts:
$.get(
"/ITN/TEST/chart_test_JSON_REQUEST/",
{
param1:'title',
param2:'BTSnum'
},
function(data) {
var s = JSON.stringify(data);
var chart;
var chartData = s
alert(chartData)
}
);
AmCharts.ready(function () {
var chartData ????????????????????????????????
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.write('chartdiv');
});
You should make use of JavaScript closures to get the data in the chartData variable using the callback function.
Note how in the callback the chartData variable is not preceded with a var statement. This means that the variable is not local and it references the same variable as the first chartData of the function.
AmCharts.ready(function () {
var chartData;
$.get(
"/ITN/TEST/chart_test_JSON_REQUEST/",
{
param1:'title',
param2:'BTSnum'
},
function(data) {
chartData = JSON.Parse(data);
}
);
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.write('chartdiv');
});
Excuse for the wrong formatting - when sending a question - already I understood and next time I will correctly format... (it is my first question)
AmCharts.ready(function () {
var chartData;
$.get(
"/ITN/TEST/chart_test_JSON_REQUEST/",
{
param1:'title',
param2:'BTSnum'
},
function(data) {
chartData = JSON.Parse(data);
}
);
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.write('chartdiv');
});
I have errors :
chartData is undefined
JSON.Parse is not a function
Related
I am trying to convert a JSON string into an integer so that I can use this data in a google chart. As of right now I can only get one set of data to be displayed in my chart.
Here is my JQUERY code:
$("#shotsandbigcc").click(function(){
//alert("Button works");
$("#shotsandbigcc_popup").toggle();
var integer = $("#shotsandbigcc").attr("name");
//alert("integer: " + integer);
$.ajax('includes/test.php', {
type: 'POST', // http method
data: {myData: integer},// data to submit
dataType: 'json',
success: function(response){
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMultSeries);
function drawMultSeries() {
var len = response.length;
for(var i=0; i<len; i++){
var year = response[i].Year;
var ontarget = parseInt(response[i].Shots_on_Target);
var offtarget = parseInt(response[i].Shots_off_Target);
alert(ontarget);
}
alert(year);
var data = google.visualization.arrayToDataTable([
['Year', 'Shots on Target', 'Shots off Target'],
[year, ontarget, offtarget],
[year, ontarget, offtarget]
]);
var options = {
title: 'Shooting Accuracy',
chartArea: {width: '50%'},
hAxis: {
title: 'Amount of Shots',
minValue: 0
},
vAxis: {
title: 'Year'
}
};
var chart = new google.visualization.BarChart(document.getElementById('shotsandbigcc_chart'));
chart.draw(data, options);
}
}
});
});
The JSON data is in an array which has this format [{"Year":"2019/2020","Shots_on_Target":"302","Shots_off_Target":"578","Accuracy":"0.34"},{"Year":"2020/2021","Shots_on_Target":"74","Shots_off_Target":"93","Accuracy":"0.44"}]
If someone could tell me how I can display both 2019/2020 and 2020/2021 data to be displayed. I would be most grateful as right now only the 2020/2021 data is being displayed. Thank you.
For integet value part:
var ontarget = parseInt(response[i].Shots_on_Target);
For your data part:
var vizData = [];
vizData.push(['Year', 'Shots on Target', 'Shots off Target']);
for(var i=0; i<len; i++){
var year = response[i].Year;
var ontarget = parseInt(response[i].Shots_on_Target);
var offtarget = parseInt(response[i].Shots_off_Target);
vizData.push([year, ontarget, offtarget]);
alert(ontarget);
}
alert(year);
var data = google.visualization.arrayToDataTable(vizData);
explaination: since in the loop the values are getting updated in every iteration so, the 'year', 'ontarget' and 'offtarget' will have the latest values only. So on every iteration you have to store values so that they do not get overwritten. For that now this code is pushing in array in every iteration preserving the previous values. Which now you can use in the google.visualization function.
Happy Coding!
I wanna make a chart with amCharts and have some values that I've recieved from server by ajax call.
now I want to use that data for my chart
can anyone tell me how can i do so?
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data= (dont want to add data by myself)
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "SalePrd";
pieSeries.dataFields.category = "SaleYear";
and data call code
var Ajax_URL= url;
var Year_Val = GetSelectValue("YearSelect");
var Prd_Val = GetSelectValue("PrdSelect");
app.request.get(Ajax_URL, { "Token": Token_Data, "SaleYear":Year_Val, "SalePrd":Prd_Val }, function (data)
{
var data_Str=''+data;
var data_Output = JSON.parse(data_Str);
return data_Output;
});
}
make the ajax call,
then draw the chart when the data is returned...
var Ajax_URL= url;
var Year_Val = GetSelectValue("YearSelect");
var Prd_Val = GetSelectValue("PrdSelect");
app.request.get(Ajax_URL, { "Token": Token_Data, "SaleYear":Year_Val, "SalePrd":Prd_Val }, function (data)
{
var data_Str=''+data;
var data_Output = JSON.parse(data_Str);
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = data_Output;
// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "SalePrd";
pieSeries.dataFields.category = "SaleYear";
});
I am using the following code to render an OHLC chart in CanvasJS:
<script>
var candleData = [];
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: 'Demo Stacker Candlestick Chart (Realtime)'
},
zoomEnabled: true,
axisY: {
includeZero: false,
title: 'Price',
prefix: '$'
},
axisX: {
interval: 1,
},
data: [{
type: 'ohlc',
dataPoints: candleData
}
]
});
function mapDataToPointObject(data) {
var dataPoints = [];
for(var i = 0; i < data.length; i++) {
var obj = data[i];
var newObj = {
x: new Date(obj.time),
y: [
obj.open,
obj.high,
obj.low,
obj.close
]
}
dataPoints.push(newObj);
}
return dataPoints;
}
function updateChart() {
$.ajax({
url: 'http://localhost:8080',
success: function(data) {
candleData = JSON.parse(data);
candleData = mapDataToPointObject(candleData);
chart.render();
}
});
}
$(function(){
setInterval(() => {
updateChart();
}, 500);
});
The data properly loads, parses into the correct format, and render() is called on the interval like it should. The problem is, while the chart axes and titles all render properly, no data shows up. The chart is empty.
What DOES work is setting the data directly to the chart using
chart.options.data[0].dataPoints = candleData;
Why does my above solution not work then? Is there a way I can update the chart's dataPoints without having to hardcode a direct accessor to the chart's dataPoints?
It's related to JavaScript pass by value and pass by reference.
After execution of the following line.
dataPoints: candleData
dataPoints will refer to the current value of candleData. ie. dataPoints = [];
Now if you redefine candleData to any other value.
candleData = JSON.parse(data);
candleData = mapDataToPointObject(candleData);
Then dataPoints won't be aware of this update and will still refer to the empty array (that you pointed earlier).
The following snippet will make it easy to understand
//pass by value
var a = "string1";
var b = a;
a = "string2";
alert("b is: " + b); //this will alert "string1"
//pass by reference
var c = { s: "string1" };
var d = c;
c.s = "string2";
alert("d.s is: " + d.s); //this will alert "string2"
For more, you can read about pass by value and pass by reference.
Javascript by reference vs. by value
Explaining Value vs. Reference in Javascript
Please I want to know where to put the XML file from where I retrieve data for the chart, in a Symfony project?
I tried to put values directely in the javascript code and that worked, but when I retrieved data from XML to fill the chart, that didn't work and I got this error in the developer console : Failed to load resource
$(document).ready(function(){
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
var drawChart= setInterval (function drawCharts() {
var xml=new XMLHttpRequest() ;
xml.open("GET", "statFile.xml",true) ;//this is the line that causes the problem
xml.onreadystatechange = function () {
if (xml.readyState == 4) {
var doc=xml.responseXML ;
var root = doc.getElementsByTagName("CHART") ;
////VALUES IN
var paramss= root[0].getElementsByTagName("VALUES_IN");
console.log(paramss) ;
var value_in1=paramss[0].childNodes[1].innerHTML;
var value_in2=paramss[0].childNodes[3].innerHTML;
var value_in3=paramss[0].childNodes[5].innerHTML;
var value_in4=paramss[0].childNodes[7].innerHTML;
var value_in5=paramss[0].childNodes[9].innerHTML;
var value_in6=paramss[0].childNodes[11].innerHTML;
var value_in7=paramss[0].childNodes[13].innerHTML;
var value_in8=paramss[0].childNodes[15].innerHTML;
var value_in9=paramss[0].childNodes[17].innerHTML;
var value_in10=paramss[0].childNodes[19].innerHTML;
var value_in11=paramss[0].childNodes[21].innerHTML;
var value_in12=paramss[0].childNodes[23].innerHTML;
////VALUES OUT
var paramsx= root3[0].getElementsByTagName("VALUES_OUT");
console.log(paramsx) ;
var value_out1=paramsx[0].childNodes[1].innerHTML;
var value_out2=paramsx[0].childNodes[3].innerHTML;
var value_out3=paramsx[0].childNodes[5].innerHTML;
var value_out4=paramsx[0].childNodes[7].innerHTML;
var value_out5=paramsx[0].childNodes[9].innerHTML;
var value_out6=paramsx[0].childNodes[11].innerHTML;
var value_out7=paramsx[0].childNodes[13].innerHTML;
var value_out8=paramsx[0].childNodes[15].innerHTML;
var value_out9=paramsx[0].childNodes[17].innerHTML;
var value_out10=paramsx[0].childNodes[19].innerHTML;
var value_out11=paramsx[0].childNodes[21].innerHTML;
var value_out12=paramsx[0].childNodes[23].innerHTML;
window.value_in1=value_in1;window.value_in2=value_in2;window.value_in3=value_in3;window.value_in4=value_in4;
window.value_in5=value_in5;window.value_in6=value_in6;window.value_in7=value_in7;window.value_in8=value_in8;
window.value_in9=value_in9;window.value_in10=value_in10;window.value_in11=value_in11;window.value_in12=value_in12;
window.value_out1=value_out1;window.value_out2=value_out2;window.value_out3=value_out3;window.value_out4=value_out4;
window.value_out5=value_out5;window.value_out6=value_out6;window.value_out7=value_out7;window.value_out8=value_out8;
window.value_out9=value_out9;window.value_out10=value_out10;window.value_out11=value_out11;window.value_out12=value_out12;
drawChart();
function drawChart(){
var data = google.visualization.arrayToDataTable([
['Mois', 'Frequence'],
[value_in1, parseInt(value_out1)],
[value_in2, parseInt(value_out2)],
[value_in3, parseInt(value_out3)],
[value_in4, parseInt(value_out4)],
[value_in5, parseInt(value_out5)],
[value_in6, parseInt(value_out6)],
[value_in7, parseInt(value_out7)],
[value_in8, parseInt(value_out8)],
[value_in9, parseInt(value_out9)],
[value_in10, parseInt(value_out10)],
[value_in11, parseInt(value_out11)],
[value_in12, parseInt(value_out12)],
]);
/*series: {
2 : { areaOpacity: 10 },
};
*/
var options = {
title: 'Fréquence des visites du site',
curveType: 'function',
legend: { position: 'bottom' },
backgroundColor: {
fill : 'transparent'
}
};
var chart = new google.visualization.AreaChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
} }
xml.send() ;
});
},30000);
I need to assign a javascript variable to amcharts dataloader. but following code does not work (Graph does not draw)
AmCharts.ready(function () {
var data = [{"employee_no": "101","Salary": "1000"},{"employee_no": "102","Salary": "1500"},{"employee_no": "103","Salary": "1100"},{"employee_no": "104","Salary": "1900"},{"employee_no": "105","Salary": "1200"},
{"employee_no": "106","Salary": "1800"},{"employee_no": "107","Salary": "2000"},{"employee_no": "108","Salary": "1500"}];
var chart = new AmCharts.AmSerialChart();
chart.dataLoader = data;
chart.categoryField = "employee_no";
var graph = new AmCharts.AmGraph();
graph.valueField = "Salary";
graph.type = "line";
graph.bullet = "round";
graph.lineColor = "#8d1cc6";
chart.addGraph(graph);
chart.write('chartdiv');
});
but if I use below code it works fine.
chart.dataLoader = {
url: "MY_URL",
postProcess: function (data, options) {
if (data === null) {
data = [];
options.chart.addLabel("50%", "50%", "No Data Available");
}
return data;
}
};
What is the error of above code ? I cannot figure it out.
Thanks you
Thank you martynasma, You are right
I have to use chart.dataProvider instead of chart.dataLoader
That solved my problem. We have to use chart.dataLoader only with http request.