for (var i = 0; i < valueInfo.length; i++) {
if (++conteur === valueInfo.length) {
MydataPoints+='{ y: '+parseInt(valueInfo[i])+', indexLabel: "Feminin" }';
}
else {
MydataPoints+='{ y: '+parseInt(valueInfo[i])+', indexLabel: "Feminin" },';
}
}
result of MydataPoints is = ["{ y: 3, indexLabel: "Feminin" },{ y: 5, indexLabel: "Feminin" }"]
But for working chart in need like this array : [{ y: 3, indexLabel: "Feminin" },{ y: 5, indexLabel: "Masculin"}]
Thank you very much for your help.
what you are trying to do is to build JSON string manually, whereas ChartJS required JSON object.
[{ y: 3, indexLabel: "Feminin" },{ y: 5, indexLabel: "Masculin"}]
This is valid JSON string and you are trying to build this manually into JS.
Instead, try fetching data from server itself into JSON format and it will give you proper JSON string,
for your manual operation into JSON you can loop through ajax response or take care for it into server logic.
Still, if you need to work on JS manually, instead of JSON binding try making HTML markup for ChartJS.
Try this:
var valueInfo = ["12","13"];
var MydataPoints = [];
for (var i = 0; i < valueInfo.length; i++) {
MydataPoints.push({
y: parseInt(valueInfo[i]),
indexLabel: "Feminin"
});
};
var div = document.getElementById('text');
div.innerHTML = JSON.stringify(MydataPoints);
<div id="text"></div>
var MydataPoints=[]
if(++conteur === valueInfo.length) {
MydataPoints.push({ y:parseInt(valueInfo[i]), "indexLabel": "Feminin" });
}
else{
MydataPoints.push({ y:parseInt(valueInfo[i]), "indexLabel": "Feminin"}); };
Related
I have an x, y JSON object like this
var myJSON = [{x: "2021-06-29T02:00:00.000Z", y: 45.87},
{x: "2021-06-29T03:00:00.000Z", y: 45.97},
{x: "2021-06-29T04:00:00.000Z", y: 47.84},
{x: "2021-06-29T05:00:00.000Z", y: 48.64}]
I would like to apply the date constructor to X for each entry in the array. I have also converted an array format if that is better.
var myArr =[["2021-06-29T02:00:00.000Z", 45.87],
["2021-06-29T03:00:00.000Z", 45.97],
["2021-06-29T04:00:00.000Z", 47.84],
["2021-06-29T05:00:00.000Z", 48.64]]
I currently get from the JSON to the array like so:
var myArr= myJSON.map(d => Array.from(Object.values(d)));
Simply apply new Date(x) when converting
var myJSON = [
{ x: "2021-06-29T02:00:00.000Z", y: 45.87 },
{ x: "2021-06-29T03:00:00.000Z", y: 45.97 },
{ x: "2021-06-29T04:00:00.000Z", y: 47.84 },
{ x: "2021-06-29T05:00:00.000Z", y: 48.64 },
];
const result = myJSON.map(({ x, y }) => [new Date(x), y]);
console.log(result);
Note: console.log on a snippet shows the date as a string, but confirm in your browser console that it is a date
I am trying to create an canvasJS, JavaScript Bar Charts, with the following functions,
var dataPoints = [];
var headers;
var groups = [];
var cityWide = 0;
var chart = createChart();
function createChart(title = "Hospitalized Count") {
return new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Coronavirus Data in NYC Boroughs"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Total number of "+title
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: dataPoints
}]
});
}
I am using this function below to set the dataPoints array:
function call: dataPoints = setDataPoints(4)
function setDataPoints(value){
let temp = [];
for(var i = 0; i<groups.length;i++){
if(groups[i][0] == "Citywide"){
continue;
}
yValue = groups[i][value];
myLabel = groups[i][0];
console.log("y: "+ yValue);
console.log("label: "+ myLabel);
temp.push(
{
y: yValue,
label: myLabel
});
}
console.log(temp);
return temp;
}
But when i console.log(dataPoints) I am getting this:
[
{"y": "136319","label": "Bronx","x": 0},
{"y": "202778","label": "Brooklyn","x": 1},
{"y": "97006","label": "Manhattan","x": 2},
{"y": "202737","label": "Queens","x": 3},
{"y": "54479","label": "StatenIsland","x": 4}
]
the expected result for dataPoints should be as follows:
[
{y:136319, label: "Bronx" },
{y:202778, label: "Brooklyn" },
{y:97006, label: "Manhattan" },
{y:202737, label: "Queens" },
{y:54479, label: "StatenIsland" }|
]
When I tried to set x
temp.push(
{
x: "123",
y: yValue,
label: myLabel
});
or delete temp[i]['x'] it doesn't work.
As you may of notice the x value are the indexes of the array, I have no idea why its being set and how do I even remove.
I have tried
dataPoints = temp;
console.log(dataPoints[0].hasOwnProperty('x'));
and returns false
Any help would appreciate it thanks in advance!
EDIT based of comment:
in for loop:
console.log(temp[i]['x']) returns undefined
If I add in to temp.push({ x: "123", ...})
console.log(temp[i]['x']) returns 123
console.log(temp[i]):
{y: "54479", label: "StatenIsland"}
label: "StatenIsland"
x: 4
y: "54479"
__proto__: Object
function.js:98
I'm not familiar with CanvasJS but my guess is that it's mutating the dataPoints array you give it to fill in the 'x' coordinate on the chart. console.log doesn't run synchronously, so by the time you see the output it's already been mutated.
If you console.log([...dataPoints]) or console.log([...temp]) I bet the x won't be there.
According to the API docs for dataPoints.x:
If not provided, it will be set automatically set according to its index position on dataPoints Array.
If you want to keep your "clean" copy of dataPoints you need to pass a copy of the array to the chart [...dataPoints].
I am really struggling with javascript arrays and objects.
I need to create this structure (array? or ..? unsure of what it is),
data = [ 12, 24, 13, 21]
for a chart.js chart dynamically, from an array.
The array is created as
yAxisArray.push(singularYaxisDataArray);
where
var singularLabelArray = [];
singularLabelArray has values 12, 24, 13, 21 pushed into it.
and 'yAxisArray' could have several singularLabelArray 's in it, which would mean iterating them all
to create several of these structures "data = [ 12, 24, 13, 21]" to put into this
var datasources = [
{
label: "Budgeted",
backgroundColor: 'red',
data: [12, 24, 13, 21]
},
{
label: "Actual",
backgroundColor: "#8e5ea2",
data: [408, 547, 675, 734]
}
];
Iterating the yAxisArray is not the issue , but can't get the structure out of it that I need.
for (idx = 0; idx < yAxisArray.length; idx++)
{
var datasources =
{
label: labelArray[idx],
**data: yAxisArray[idx],**
backgroundColor: colorsList[idx],
}
}
Thank you
declare var outside loop and use push method. Should work.
(If not, Can you add the yAxisArray data and expected)
var datasources = [];
for (idx = 0; idx < yAxisArray.length; idx++) {
datasources.push({
label: labelArray[idx],
data: yAxisArray[idx],
backgroundColor: colorsList[idx],
});
}
I need to get graph generated from Mysql database with help of PHP. I got nice application from (http://canvasjs.com). So, I created my own JSON format in variable element from PHP SESSION. It gies me no error when debugged, but no result.
Line number 34 - 37 gives me graph if I don't comment them. When comment them and replace with my own JSON which is variable element and does not give me graph. Gives me blank page.
I am new to JSON. Help me out with this.
Following are my codes.
var array = <?php echo json_encode($_SESSION["r_array"]); ?>;
var count = 0;
var element = '';
var title = 'Malware lab, TCRC, CTA';
for( var i in array) {
if ( count == 0 ) {
element += ‘{y: ‘+array[i]+’,’+’ indexLabel: “‘+i+'”}';
} else {
element += ‘, {y: ‘+array[i]+’,’+’ indexLabel: “‘+i+'”}';
}
count++;
}
var chart = new CanvasJS.Chart(“chartContainer”,
{
title: {
text: title
},
data: [
{ type: type,
dataPoints: [
/*
34 {y: 2, indexLabel: “Kaka'”},
35 {y: 3, indexLabel: “Blackberry”},
36 {y: 1, indexLabel: “Windows Phone”},
37 {y: 5, indexLabel: “Others”},*/
element,
]
}
]
});
chart.render();
Dumped array of $_SESSION["r_array"] as following
Array (
[Trojan] => 1
[Malware] => 3
[Backdoor] => 6
[Virus] => 2
[Bot] => 5
[Rootkit] => 7
[Worm] => 5
)
element must be an array, you are trying to create it as a string(with syntax errors)
var array = <? php echo json_encode($_SESSION["r_array"]); ?> ;
var count = 0;
var element = [];
var title = 'Malware lab, TCRC, CTA';
for (var i in array) {
element.push({
y: array[i],
indexLabel: i
})
count++;
}
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: title
},
data: [{
type: type,
dataPoints: element
}]
});
chart.render();
Demo: Fiddle
Yo need to pass array in correct Way
Use another variable datapoints = [];
and the push object into that array
var datapoints = [];
for( var i in array) {
datapoints.push({ y : array[i] , indexLabel : i});
}
and then use it as below
var chart = new CanvasJS.Chart(“chartContainer”,
{
title: {
text: title
},
data: [
{ type: type,
dataPoints: datapoints
}
]
});
chart.render();
I want to use the same object for jQplot and a library built on jQtable.
jQplot is fine with arrays but jQtable's library needs an named object (dictionary).
vals =
[
[1, 2],
[3,5.12],
[5,13.1],
[7,33.6],
[9,85.9],
[12,54],
[11,219.9]
];
This is my js array
I want it to be like
{
data: [{
X: 1,
Y: 2
},
{
X: 3,
Y: 5.12
},
{
X: 5,
Y: 13.1
}]
}
How to convert js array into named JSON array of objects? Are there any built in methods or I define my own method to read up that array and create a String for JSON?
var array = vals.map(function(val) {
return {
X : val[0],
Y : val[1]
};
});
var data = Object.keys(vals).map(function(key) {
return {X : vals[key][0], Y : vals[key][1]};
});