Cant Load Data from JSON in FlotChart.js - javascript

Hello i have problem to load data in flotchart.js
here's the original code that works
var pageviews = [
[1,2],
[2, 3]
];
var visitors = [
[1, 3],
[2, 2]
];
var plot = $.plot($("#site_statistics"), [{
data: pageviews,
label: "Unique Visits"
}, {
data: visitors,
label: "Page Views"
}]);
but when i change the data that i load from json it doesn't work.
here's the data json on load_statistik_bidang.php:
[{"data":[["1",12],["1",11],["3",10],["14",9]],"label":"EMSA"},{"data":[["1",12],["4",9]],"label":"BSSA"},{"data":[["1",2],["1",10]],"label":"OSSAC"}]
if i copy the json in manual it's works but when im using function to load the data it doesnt work .
code that i load the json is like this :
function loadMyData(){
$.ajax({
url:"load_statistik_bidang.php",
dataType: "json",
method:"get",
success: function(data){
tampung = data;
console.log(data.EMSA);
}
});
}
var plot = $.plot($("#site_statistics"), tampung);
any ideas for this? thanks

Your JSON is broken/invalid. You're not closing your first data array.
Should look like this:
[{
"label": "EMSA",
"data": [
[
"1",
12
],
[
"1",
11
]
] // <-- you forgot this
},
{
"label": "BSSA",
"data": [
[
"1",
12
],
[
"4",
9
]
]
}
]
You can use this site to validate it in the future:
http://jsonlint.com/

Related

Nested Arrays and returning non-labeled values

I've got an API that returns the following:
{
"data": {
"columns": [
"epoch_timestamp_millieseconds",
"cpu_used_percent"
],
"values": [
[
1615230210000,
28.24
],
...
I'm able to get the second metric using the following three lines of code:
<#assign metricvalue = jsonObj.data.values[0]>
<#assign arr = metricvalue[1]>
&value=${arr}
&value would equal 28.24.
Is there a way to combine these into one line of code?
I'm looking for something like this:
&value=jsonObj.data.values[0].[1]
The issue is the [1] doesn't have a label
Your code is almost correct. Just a small correction. Remove the . between [0] and [1]. You don't need to use . to specify the index. You only need to use it to specify the property/key.
The code should be like
jsonObj.data.values[0][0] // 1615230210000
jsonObj.data.values[0][1] // 28.24
Sure! You were very close. Just remove the dot:
const response = {
"data": {
"columns": [
"epoch_timestamp_millieseconds",
"cpu_used_percent"
],
"values": [
[
1615230210000,
28.24
]
]
}
};
console.log(response.data.values[0][1]);
You can use destructuring as well:
const response = {
"data": {
"columns": [
"epoch_timestamp_millieseconds",
"cpu_used_percent"
],
"values": [
[
1615230210000,
28.24
]
]
}
};
const { data: { values: [[_, target]] } } = response;
console.log(target)

Send non-editable Array with JSON & Ajax

Is it possible to send non-editable arrays?
What i'm trying to send is:
var items = [];
//console.log(JSON.stringify(items));
allitems = JSON.stringify(items);
[{
"assetid": "7814010469",
"classid": "1797256701",
"instanceid": "0",
"name_color": "D2D2D2",
"icon_url": "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsUFJ5KBFZv668FFYznarJJjkQ6ovjw4SPlfP3auqEl2oBuJB1j--WoY322QziqkdpZGr3IteLMlhpw4RJCv8",
"market_hash_name": "Gamma Case"
}]
$.ajax({
type: "POST",
async: true,
url: "jackpot/deposit",
data: {
myData: allitems
},
success: function(body) {
toastr["info"]("Success! Our bots are generating your trade. Please wait...", "Inventory");
},
});
But I want to make it not editable via the console.
And send it.
You should be able to use Object.freeze() to prevent the array from being changed. For example:
var arr = [1, 2, 3];
Object.freeze(arr);
arr.push(4); // error

About C3.js chart data split

Since i am not familiar with C3.js library, i am bit confuse when i tried to split the Array data.
For instant i have some array value from a json.
var jsondata=[[123],[45],[56],[22]];
var jsondataName=[["apple"],["orange"],["banana"],["pear"]];
I tried to pass the first array jsondata into the chart but these values go into the same column which is not something i would like to see.
I want these array value become independent data and push the name into it
Please see the demo i made :
http://jsfiddle.net/q8h39/92/
And the result i want should looks like
Update the json data format :
"Name": apple,
"data": {
"value": 1434,
}
"Name": banana,
"data": {
"value": 342,
}
}
}
You can set the JSON object to data.json and then set data.keys.value to an array of values in that JSON:
var jsondata = [{
"Name": "apple",
"data": {
"value": 1434,
},
}, {
"Name": "banana",
"data": {
"value": 342,
}
}];
var chart = c3.generate({
data: {
json: jsondata,
keys: {
value: [
"name", "data.value"
]
},
type: "scatter"
//hide: true
}
});
http://jsfiddle.net/aendrew/mz9ccbrc/
n.b., You need C3 v0.4.11 for this (the dot syntax for keys.value was just added), and your JSON object needs to be an array (currently it's not valid).
If you want to convert the two arrays from your initial question to that format of JSON, try this:
d3.zip(jsondataName, jsondata)
.map((d) => Object({name: d[0][0], data: { value: d[1][0] } }));

how to effeciantly format json data

I am trying to format json data in the most efficient way. I need to format 2 different keys in a object. both are strings
I made a fiddle with the json
fiddle
var json = [
{
"Id": 1,
"ReportId": 1,
"ReportName": "HBO: {MSA}"
"QueueDate": "2015-08-25T17:16:54.233",
"Parameters": "<xml><CBSA>Abilene, TX</CBSA><CBSASK>3</CBSASK><CBSAID>1203</CBSAID><CBSACode>10180</CBSACode><MonthNumber>6</MonthNumber><Month>June</Month><Year>2015</Year><FromDate>06/01/2014</FromDate><ToDate>06/01/2015</ToDate></xml>"
},
{
"Id": 2,
"ReportId": 2,
"ReportName": "HBO:{Marvin}"
"QueueDate": "2015-08-25T17:20:50.463",
"Parameters": "<xml><CBSA>Abilene, TX</CBSA><CBSASK>3</CBSASK><CBSAID>1203</CBSAID><CBSACode>10180</CBSACode><MonthNumber>6</MonthNumber><Month>June</Month><Year>2015</Year><FromDate>06/01/2014</FromDate><ToDate>06/01/2015</ToDate></xml>"
},
{
"Id": 3,
"ReportId": 2,
"ReportName": "HBO:{Marvin}"
"QueueDate": "2015-08-25T17:23:58.377",
"Parameters": "<xml><CBSA>Abilene, TX</CBSA><CBSASK>3</CBSASK><CBSAID>1203</CBSAID><CBSACode>10180</CBSACode><MonthNumber>6</MonthNumber><Month>June</Month><Year>2015</Year><FromDate>06/01/2014</FromDate><ToDate>06/01/2015</ToDate></xml>"
}
]
I need to end up with:
ReportName: 'MSA',
Parameters: 'Abilene, Tx'
You can use $.parseXML() to convert the xml string to an xml document object, then wrap that in $() to use jQuery traverse methods on it
$.each(json, function (_, item) {
var $xml = $($.parseXML(item.Parameters));
var cbsa = $xml.find('CBSA').text();
$('body').append($('<p>').text(cbsa));
});
Reference: parseXML() docs
DEMO

how to loop through array of objects and separate nested array of arrays

I have JSON that I currently use for a kendo-ui chart. I need to use the data for a grid so I need to separate the nested data array of arrays into there own object. Javascript or linq.js will work fine. here is the JSON I am starting with.
customSeries = [{
"name": "Chantal Hamlet - Green Castle Homes",
"subId": "10223",
"bldId": "13551",
"data": [
[179900, 1386],
[214900, 1440],
[194500, 1496],
[217900, 1504],
[189900, 1542],
[184900, 1546],
[192500, 1570]
],
}, {
"name": "Ella Sea Condos - Sahnow Construction",
"subId": "9761",
"bldId": "27380",
"data": [
[199900, 1500]
]
}, {
"style": "smooth",
"color": "blue",
"data": [
[20000, 200],
[40000, 400],
[40000, 400]
],
"name": "Subject Property"
}]
I need to end up with 2 separate arrays.
First Array
Array1 = [{
"name": "Chantal Hamlet - Green Castle Homes",
"subId": "10223",
"bldId": "13551"
}, {
"name": "Ella Sea Condos - Sahnow Construction",
"subId": "9761",
"bldId": "27380"
}, {
"style": "smooth",
"color": "blue",
"name": "Subject Property"
}]
Second Array
Array2 = [
{
"data": [
[179900, 1386],
[214900, 1440],
[194500, 1496],
[217900, 1504],
[189900, 1542],
[184900, 1546],
[192500, 1570]
]
}, {
"data": [
[199900, 1500]
]
}, {
"data": [
[20000, 200],
[40000, 400],
[40000, 400]
]
}
]
You could use Array.prototype.map method.
var Array1 = customSeries.map(function(el) {
return {
name: el.name,
subId: el.subId,
bldId: el.bldId
};
});
var Array2 = customSeries.map(function(el) {
return {
data: el.data
};
});
Update:
The above code not work when your elements in customSeries don't have fixed keys except data.
If you using lodash, you could do this:
var Array1 = customSeries.map(function(el) {
return _.omit(el, 'data');
});
var Array2 = customSeries.map(function(el) {
return _.pick(el, 'data');
});
Depending on the length of the array, you might want to do this in a single pass. Using linq.js here won't help much for this, it'll just be added overhead with no real benefit.
If you don't mind obliterating your original data, you can process them both simultaneously by going through each of the items and add a copy of the data array to the second array while deleting the data from the item.
var array1 = data,
array2 = [];
array1.forEach(function (item) {
array2.push({
data: item.data
});
delete item.data;
});
If you'd rather keep your original data, you'll have to clone each item as you process them.
var array1 = [],
array2 = [];
data.forEach(function (item) {
var noData = yourCloneMethod(item); // replace call with preferred clone method
delete noData.data;
array1.push(noData);
array2.push({
data: item.data
});
});
You might want to look into using lodash, it has a lot of great functions for manipulating arrays and performing MapReduce functions.

Categories