change the Y-axis values from Numbers to Strings - angularjs

<html>
<head>
<script src="../../../../Scripts/angular.min.js"></script>
<script src="../../../../Scripts/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="http://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
</head>
<body ng-app="myApp">
<div style="height:500px; width:800px" ng-controller="BarChartCtrl">
<h2>BarChart example</h2>
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
</div>
<script>
var app=angular.module('myApp', ['chart.js']);
app.controller('BarChartCtrl', function ($scope) {
$scope.labels = ['2014','2015','2016'];
$scope.series = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
$scope.data = [
[65, 59, 80],
[28, 48, 40],
[30, 0, 0],
[44, 10, 0],
[50, 0, 40],
[66, 50, 0],
[70, 0, 0],
[88, 0, 70],
[90, 30, 0],
[10, 0, 60],
[11, 20, 0],
[12, 0, 90]
];
});
In the above code Y-axis values are Numbers and I want to change it to some string in arranged manner so that I can pass the "range" string from $scope.data

You can map your array to a desired string array, like this:
$scope.rangeArray = $scope.data.map(function(item) {
return {
Item.join(",") // join the nested array values to a string separated with a comma for example
}
});
Each item in the map function is a nested array in your data array. In our example you get a rangeArray with nested string arrays.

In AngularJs-Charts we can't able to change Y-axis Integer Values to String Values for Range but in other charts we can able to modify by just appending $ or any such kind of symbols.

Related

How to create a 3D list of 2D lists that vary in size(The 2D lists vary in size) in Python?

I have my dataframe like this. You can see that the column called filename indicates that this row is in a file and another row is in a different file or not. I have also created another column to count the total number of rows are in a file.
I have extracted the ymin and ymax by concatenating all of them to a list and the result is a 2D list:
y = [[4, 43], [9, 47], [76, 122], [30, 74], [10, 47], [81, 125], [84, 124], [47, 90], [1, 38],[2, 40], [2, 44], [4, 48], [5, 48], [6, 44], [8, 45], [75, 116], [73, 123], [28, 73], [39, 84], [84, 121], [2, 39],...]
Thus, this only puts all the coordinates into a list without knowing which belongs to the first file and which belongs to the second
My approach is making a 3D list like this:
y = [[[4, 43], [9, 47], [76, 122], [30, 74], [10, 47], [81, 125], [84, 124], [47, 90], [1, 38]],[[2, 40], [2, 44], [4, 48], [5, 48], [6, 44], [8, 45], [75, 116], [73, 123], [28, 73], [39, 84], [84, 121], [2, 39]],...]
You can see from [4,43] to [1,38] that they are in the same file.
You can also see from [2,40] to [2,39] that they are also in the same file.
Here is my current attempt
def get_y_coordinate(count):
"""
Create a 3D list of y_coordinates that can distinguish which list is in a file which list belongs to another file
:param: count - the list taken from the column "count" from the dataframe
"""
c = 2 # Number of chunks to make
fi_y= lambda y, c: [y[i:i+c] for i in range(0, len(y), c)] # Making y into chunks of 2 ex: from [4,43,9,47] to [4,43],[9,74]
y = fi_y(y,c) # Now y is [[4, 43], [9, 47],...]]
# This is my current approach, I create a new list called bigy.
bigy = []
current = 0
for i in count:
if current != i:
bigy.append([y[j] for j in range(current, i+current)])
current = i
return bigy
>> bigy = [[[4, 43], [9, 47], [76, 122], [30, 74], [10, 47], [81, 125], [84, 124], [47, 90], [1, 38]],[[2, 40], [2, 44], [4, 48], [5, 48], [6, 44], [8, 45], [75, 116], [73, 123], [28, 73], [39, 84], [84, 121], [2, 39]],...]
I achieved the result for a first few hundreds of files. However, up until around file 700, it doesn't work anymore. I need another approach for this problem if anyone can be patient enough to read to here and help me out. Thank you very much!
I think my first inclination would be to just iterate over the dataframe and collect results in a defaultdict. Maybe something like:
import collections
import pandas
mock_data = pandas.DataFrame([
{"Name": "product_name", "ymin": 4, "ymax": 43},
{"Name": "product_name", "ymin": 9, "ymax": 47},
{"Name": "product_total_money", "ymin": 76, "ymax": 122},
{"Name": "vat", "ymin": 30, "ymax": 74},
{"Name": "product_name", "ymin": 10, "ymax": 47}
])
y_results = collections.defaultdict(list)
for _, row in mock_data.iterrows():
y_results[row["Name"]].append((row["ymin"], row["ymax"]))
print(y_results)
Alternately, you might also try:
mock_data.groupby('Name').agg(lambda x: list(x))

Get json data to html

I have a json data from a mysql table that is queried from a php script. The json data is coming correctly like this:
{"result":[["id","name","origin_count","destination_count"],[1,"A S Peta",0,0],[2,"Aachara",0,0],[3,"Aanjangaon",0,0],[4,"Aanjar",0,0], [5,"Aathankarai",0,0],[6,"Abu",0,0],[7,"Abu Road",0,0],[8,"Achanta",0,0], [9,"Addanki",0,0],[10,"Addavaram",0,0],[11,"Adipur",0,0]]}
I tried this code to get the data. But I cant able to access it.
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<script>
$.getJSON("http://hex.com/cities.json",
function (data) {
var tr = data.result
for (var i = 0; i < data.result.length; i++) {
var tr = $('<tr/>');
// Indexing into data.report for each td element
$(tr).append("<td>" + data.result[i].id + "</td>");
$(tr).append("<td>" + data.result[i].name + "</td>");
$(tr).append("<td>" + data.result[i].origin_count + "</td>");
$('.table1').append(tr);
}
});
</script>
<table class="table1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Origin</th>
</tr>
</table>
</body>
Please help me
You can modify your function like below
$.getJSON("http://hex.com/cities.json",
function(data) {
var tbody = $('.table1');
$.each(data.result, function(i, e) {
if (i > 0)
var tr = $('<tr>');
$('<td>').html(e[0]).appendTo(tr); // Id
$('<td>').html(e[1]).appendTo(tr); // Name
$('<td>').html(e[2]).appendTo(tr); // Origin
tbody.append(tr);
});
}
);
Here is Output from given json data
var data = {
"result": [
["id", "name", "origin_count", "destination_count"],
[1, "A S Peta", 0, 0],
[2, "Aachara", 0, 0],
[3, "Aanjangaon", 0, 0],
[4, "Aanjar", 0, 0],
[5, "Aathankarai", 0, 0],
[6, "Abu", 0, 0],
[7, "Abu Road", 0, 0],
[8, "Achanta", 0, 0],
[9, "Addanki", 0, 0],
[10, "Addavaram", 0, 0],
[11, "Adipur", 0, 0]
]
};
var tbody = $('.table1');
$.each(data.result, function(i, e) {
if (i > 0)
var tr = $('<tr>');
$('<td>').html(e[0]).appendTo(tr); // Id
$('<td>').html(e[1]).appendTo(tr); // Name
$('<td>').html(e[2]).appendTo(tr); // Origin
tbody.append(tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Origin</th>
</tr>
</table>
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<script>
$.getJSON("http://hex.com/cities.json",
function (data) {
var tr = data.result
for (var i = 1; i < data.result.length; i++) {
var tr = $('<tr/>');
// Indexing into data.report for each td element
$(tr).append("<td>" + data.result[i][0] + "</td>");
$(tr).append("<td>" + data.result[i][1] + "</td>");
$(tr).append("<td>" + data.result[i][2] + "</td>");
$('.table1').append(tr);
}
});
</script>
<table class="table1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Origin</th>
</tr>
</table>
</body>
Just change the 'data.result[i].id' to 'data.result[i][0] and for other columns.
You have a data structured like this
{
"result": [
["id", "name", "origin_count", "destination_count"],
[1, "A S Peta", 0, 0],
[2, "Aachara", 0, 0],
[3, "Aanjangaon", 0, 0],
[4, "Aanjar", 0, 0],
[5, "Aathankarai", 0, 0],
[6, "Abu", 0, 0],
[7, "Abu Road", 0, 0],
[8, "Achanta", 0, 0],
[9, "Addanki", 0, 0],
[10, "Addavaram", 0, 0],
[11, "Adipur", 0, 0]
]
}
It is a valid JSON object, but what are you trying to do:
$(tr).append("<td>" + data.result[i].id + "</td>");
You try to access ith elemnent of array, but next, you try to get specific property, but you do not have properties in your subarrays. There are only values as array elements.
I suggest you to change (if possible) response format to similar to this, since it is much easier to iterate and access deeper nested data.
{
"result": [{
"id": 2,
"name": "Aachara",
"origin_count": 0,
"destination_count": 0
},
{
"id": 3,
"name": "Aanjangaon",
"origin_count": 0,
"destination_count": 0
} ...
]
}
And then it would be possible to access values by a dot operator
data.result[i].id

Getting a "NoSuchMethodError" when trying to create an array of arrays

I'm using Ruby 2.4. I'm having trouble creating an array of arrays. I have this
data_cols = [[], []]
lines.each do |line|
parts = [0, *shared_space_indexes, line.size].each_cons(2).map { |a, b| line[a...b].strip }
parts.each_with_index do |part, index|
data_cols[index][data_cols[index] ? data_cols[index].size : 0] = part
end
end
But I get a "NoMethodError: undefined method `[]=' for nil:NilClass" error on the "data_cols[index][data_cols[index] ? data_cols[index].size : 0] = part" line. What I'm trying to do is for each parts array, push each item in "parts" onto its own array correspoding to the index of that element in parts. So, for instance, if the first iteration of the loop has parts equal to
[1, 5, 8, 12]
I would have a data_cols array that looks like
[[1], [5], [8], [12]]
and if the next iteration of the loop had a parts array that looked like
[19, 20, 21, 22]
the data_cols array would then be changed to
[[1, 19], [5, 20], [8, 21], [12, 22]]
It's hard to test without knowing what lines and shared_space_indexes look like.
2 columns → a matrix
zip
For the second part of your question you can use :
[1, 5, 8, 12].zip([19, 20, 21, 22])
#=> [[1, 19], [5, 20], [8, 21], [12, 22]]
transpose
[[1, 5, 8, 12],[19, 20, 21, 22]].transpose
#=> [[1, 19], [5, 20], [8, 21], [12, 22]]
With transpose, both arrays need to have the same size.
3 columns → matrix
array1 = [1, 5, 8, 12]
array2 = [19, 20, 21, 22]
array3 = [99, 88, 77, 66]
p [array1, array2, array3].transpose
#=> [[1, 19, 99], [5, 20, 88], [8, 21, 77], [12, 22, 66]]
columns → rows
If you have an array of arrays :
arrays = [
[1, 5, 8, 12],
[19, 20, 21, 22],
[99, 88, 77, 66]
]
p arrays.transpose
#=> [[1, 19, 99], [5, 20, 88], [8, 21, 77], [12, 22, 66]]
So in your case, I'd just concentrate on creating an array of arrays with the same length, and use transpose at the end.
matrix + column → matrix
As you noticed, if you have
data_cols = [[1, 19], [5, 20], [8, 21], [12, 22]]
arr = [99, 88, 77, 66]
data_cols.zip(arr) would produce a weird half-nested array :
[[[1, 19], 99], [[5, 20], 88], [[8, 21], 77], [[12, 22], 66]]
You can use :
p data_cols.zip(arr).map(&:flatten)
#=> [[1, 19, 99], [5, 20, 88], [8, 21, 77], [12, 22, 66]]

Angular chart showing series but no data

When I tried to use the angular-chart framework I can see the series I've defined, but not the labels and data. I've included following three files to my index.html
<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
These are the variables I define in my $scope
$scope.series = ["First", "Second"];
$scope.labels = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
$scope.data = [
[12, 13, 8, 4, 29],
[6, 12, 9, 8, 25]
];
And it only displays this:
What am I doing wrong?
EDIT: After further investigation I noticed that the graph is showing when I did a back -> forward when on the page. So by refreshing you lose the chart...
I can manage to draw the chart after refresh by deferring the scope variables like this:
setTimeout(function (){
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
}, 0);
This implies a timing issue, which I'm unable to resolve.
Is your chart in an element / hierarchy that is hidden / shown (like ng-show or a class that is swapped out, a bootstrap panel...)?
What seems to be happening is that Chart.js is getting the height of the canvas (when it is initializes by angular-chart, which in turn happens when the scope data is changed) as near 0.
For the same reason, a deferred variable change works - because whatever parent / style is causing the canvas to have a small height is now at it's full height.

Handsontable implementation in ADF

I am very much impressed with handsontable functionality. I tried to implement this in Oracle ADF. This functionality working fine with .jsp file but the data is not rendering in .jspx file.
Can we integrate this handsontable functionality Oracle ADF framework? Could you please suggest how to achieve the same in ADF?
I have created the Adf application in Jdeveloper 11.1.1.7 version
I have created the .jspx file with the following code
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:resource type="javascript" source="jquery.min.js"/>
<af:resource type="javascript" source="jquery.handsontable.full.js"/>
<link href="jquery.handsontable.full.css" rel="stylesheet" type="text/css"/>
<div id="dataTable"/>
<af:resource type="javascript">
var data = [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13]
];
$("#dataTable").handsontable({
data: data,
minSpareRows: 1,
startRows: 6,
startCols: 8
});
</af:resource>
</af:form>
</af:document>
</f:view>
</jsp:root>
when I try run the .jspx file data is not rendering.
Please add a script tag.
<script>
var data = [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13]
];
$("#dataTable").handsontable({
data: data,
minSpareRows: 1,
startRows: 6,
startCols: 8
});
</script>

Resources