c3 graph key value pair - javascript

So my brain is on shut down.
I have a c3 graph that accepts arrays of numbers so it can display the bars on the graph. I'm having trouble parsing the data that is coming from our backend into these arrays dynamically.
I have three variables
var inp = graphNums.inProgress;
var rec = graphNums.received;
var att = graphNums.attention;
That produces data in a key value pair that looks like this
{group1: 3, group2: 0, group3: 0}
These groups match with the x access along the bottom of the graph doing something like this.
for (i in inp) {
if (inp.hasOwnProperty(i)) {
cat.push(i)
}
}
cat.unshift('x'); //x needs to be there for the graph to work
Here is where the issue lies. The graph only accepts the values like this.
['Rec', 5, 1, 4, 8, 5, 3],
['InP', 7, 2, 7, 9, 7, 3],
['Res', 10, 5, 2, 9, 5, 2],
For the life of me I cannot figure out how to get the key value pair to match up with this array. Any help would be appreciated.
A jsfiddle with the full graph and example.
http://jsfiddle.net/17sqrnec/5/

I suggest to have a look at the documentation here : http://c3js.org/samples/data_json.html
You will find the JSON Format that can be used for categories, which would be for instance:
{category: 'cat1', group1: 3, group2: 0, group3: 0}

you need to provide an array with the x categories/labels
and remaining arrays will be considered data with a leading label, matching those of defined x categories
a working fiddle: http://jsfiddle.net/17sqrnec/45/

Related

Wrong sorted array.Javascript

I have the following javascript array:
a=[0, "b", 2, 3, 4, 5, 1, 9, 8, "A", "a", 11010]
Now I want to sort it and I do it like this
a.sort()
But then I get the following:
[0, 1, 11010, 2, 3, 4, 5, 8, 9, "A", "a", "b"]
Which I think is wrong because 11010 is greater than 2 and it should be after 2.
Also even if I do the following:
a.sort(function(a,b){return a-b;});
I get the following:
[0, "b", 11010, 2, 3, 4, 1, 8, 9, "A", "a", 5]
Can someone explain me why this is happening?Thank you
The problem is that, when sorting, JavaScript treats all the array elements as strings by default.
JavaScript is not type-safe, like Haskell or Java. This means that you can perform all sorts of crazy actions like adding numbers and strings, or comparing strings to numbers without throwing an error.
UTF-8 Character Code Table
As you can see in this table, 1 gets a value of 49, which is less than the value of 97 for a lower case a
"1" gets placed before "10110" for the same reason that "a" gets sorted before "apple"
This video covers a lot of the highly unexpected default patterns of JavaScript that result from dissimilar type operations.
Take a look at how array.sort works at this link.
If you don't provide your own sorting function, then
"elements are sorted by converting them to strings and comparing
strings in Unicode code point order."
As a string, 11010 comes before 2. You haven't provided a sort function, so the sort method is using the default behavior.
This is why you're seeing the behavior you've noted.
Your array has both numbers and strings. What you need to do is supply a compare function.
a = [0, "b", 2, 3, 4, 5, 1, 9, 8, "A", "a", 11010]
a.sort(function(c1, c2) {
if(typeof c1 === "number" && typeof c2 == "number") {
return c1 - c2;
} else {
return (c1 + "").localeCompare(c2);
}
);

How come I can't use the length number from this array?

I created an array, and when I try to get the length of the array it works fine.
var map = [
[3, 0, 0, 2],
[7, 6, 6, 8],
[7, 6, 6, 8],
[5, 1, 1, 4]
];
var i = map.length;
i outputs 4.
When I try to use the i variable to get the column using var j = map[i].length; the console returns "map[i] is undefined". How come this won't work, but replacing i with an actual number works?
Here is an example jsfiddle, just uncomment line 11.
i is equal to 4, as you said. JS array indices start from 0, so the last element in your array is map[3] which means there is no element at map[4]
You need to do map[i-1] - this code should work:
var j = map[i-1].length;
And here is it working in your jsfiddle: https://jsfiddle.net/zk7f8Ls2/2/
Because table index are zero-based. The table length is 4 but indexes are 0, 1, 2 and 3. When you try to access index 4, you will get an error.
It's because i is 4, and remember that arrays start with 0 if you want to see the last item of the array just add -1 map[i-1]

Javascript:: Find differences between array that contains duplicated values to a unique array of that array

I found many posts on stack overflow about that similar subject but none of them solve this issue here.
<script>
//Array GanginaA contains duplicated values.
//Array GanginaB contains only unique values that have been fetched from GanginaA
GanginaA=[0,1,2,3,4,5,5,6,7,8,9,9];
GanginaB=[0,1,2,3,4,5,6,7,8,9];
var hezi=<!--The Magic Goes Here-->
console.log(hezi);
/*
* Expected Output:
* 5,9
*/
</script>
GanginaA will always be longer or identical to GanginaB so there is no reason to calculate by the value of the longer array length.
GanginaB will always contains unique values that taken from GanginaA so it will always be the shorter array length or identical to GanginaA array.
Now it makes it a lot easier to find doubles.
You can use filter to get the elements like below
GanginaA = [0, 1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 9];
GanginaB = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var hezi = GanginaB.filter(function (item, index) {
return GanginaA.indexOf(item) !== GanginaA.lastIndexOf(item)
});
console.log(hezi.join(" , ")); // 5, 9
the easier I can think of :
var hezi=[];
for (var i=0;i<GanginaA.length;i++){
hezi[GanginaA[i]] = GanginaA[i];
hezi[GanginaB[i]] = GanginaB[i];
}
hezi = hezi.filter (function(el){return el!=undefined;});
does everything in O(n) actions and not O(n^2)
Javascript's objects have hashmap like behaviour, so you can use them kind of like a set. If you iterate over all the values and set them to be keys within an object, you can use the Object.keys method to get an array of unique values out.
function uniqueValues() {
var unique = {};
[].forEach.call(arguments, function(array) {
array.forEach(function(value) {
unique[value] = true;
});
});
return Object.keys(unique);
};
This function will return the unique elements in any number of arrays, passed as arguments.
uniqueValues([1, 2, 3], [ 1, 1, 1], [2, 2, 2], [3, 3, 3]); // [ 1, 2 3 ]
One drawback to this method is that Javascript coerces all keys to strings, you can turn them back into numbers by changing the return statement to:
return Object.keys(unique).map(Number);

Nested array manipulation to look like a matrix

I'm retrieving some data and the data looks like this:
1, 2, 3, 4, 5
6, 7, 8, 9, 10
11, 12, 13, 14, 15
I want it to look like this
[
[[1],[2],[3],[4],[5]],
[[6],[7],[8],[9],[10]],
[[11],[12],[13],[14],[15]]
]
So that I may address the array like a matrix, data[0][1] would be "2".
Through this answer, it's almost there, but not quite. I'm having trouble getting to look like what I want.
How about this, assuming this accurately represents your input data:
var data = "1,2,3,4,5\n6,7,8,9,10\n11,12,13,14,15";
var matrix = data.split('\n').map(function(val) {
return val.split(',');
});
Note that your specified output is probably not what you meant. Each number should probably not be its own single-item array. Instead, the code above produces:
[
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 1]
]
Which means matrix[0][1] would return 2, as opposed to having to do matrix[0][1][0]
Edit: As noted in the comments, I've left it up to you to ensure this fits your browser-support needs. This also goes for every other line of JS you ever write...
NOTE - If you need to iterate through an array use a simple for, and not a for..in
for..in returns the items in no guaranteed order which is probably not what you want when working with an array
for..in returns not the just the array elements, but anything added to the Array prototype (meaning if you use a traditional for loop you can be completely confident the code will work regardless of what external libraries may be included on the page. No need to worry that some other coder has added properties/methods to Array.prototype)
If \n is the line separator and , is the item seperator within a line, you can use something like:
/* assuming data is already filled like:
1,2,3,4,5
6,7,8,9,10
11,12,13,14,15
*/
var arr = data.split("\n"), arr2 = [];
for(var i = 0; i < arr.length; i++) {
if(arr[i] != '') arr2.push(arr[i].split(','));
}
console.log(arr2);
/* arr2 will be like:
[
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15]
]
*/
var data = '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15'.split(',');
var matrixData = [];
while (data.length > 0) {
matrixData.push(data.splice(0, 5));
}
document.write(matrixData[0][1]);
Edit: If you get the data as a simple array of numbers

testing for all values in an array over a certain value

I have an array of values that are produced from an equation.
e.g.
testArray = [1,2,3,4,5,6,7,8,9,10];
What I want to do is write a function to look for all the values over a particular value and output the result.
So for example, in the above testArray how would I return all the values over 7 (8,9, 10 only not including 7)?
Happy for the response to use Javascript and/or Jquery.
Thanks in advance.
You could use filter().
var testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter(function(element) {
return element > 7;
});
jsFiddle.

Categories