Can anyone figure out why the legend is undefined?
here is a plunker https://plnkr.co/edit/uSbRpx5w7nHvGQ3OG3x2?p=preview
here is the code
$scope.chartData = {
data: [20, 20, 20, 20, 20, 20, 20],
labels: [
"Joe",
"Jason",
"Mark",
"Mike",
"Ryan",
"Sean",
"Stephanie"
],
series: ['Year 2016',]
};
i have made 2 examples. the top one works, the one below it doesn't
Any idea?
In charts the data-set must be an array of data, where the data in-turn is itself an array
i.e)data-set: [data_1, data_2, data_3], where data_1=[1,2,3,4,5]; data_2=[45,32,12,25,12];..
And the series represents the corresponds the data.
But here in your case the data-set is an array of numbers, which is why the legend becomes undefined.
$scope.chartData = {
data: [[20, 20, 20, 20, 20, 20, 20]],
labels: [
"Joe",
"Jason",
"Mark",
"Mike",
"Ryan",
"Sean",
"Stephanie"
],
series: ['Year 2016' ]
};
Related
So I have successfully managed to parse the JSON data shown below:
[
{
"IsRecentlyVerified": false,
"ID": 136888,
"UUID": "254B0B07-E7FC-4B4B-A37C-899BCB9D7261",
"DataProviderID": 18,
"DataProvidersReference": "0a9fdbb17feb6ccb7ec405cfb85222c4",
"OperatorID": 3,
"UsageTypeID": 1,
"AddressInfo": {
"ID": 137234,
"Title": "Ballee Road Park & Share",
"AddressLine1": "Ballee Road",
"Town": "Ballymena",
"Postcode": "BT42 2HD",
"CountryID": 1,
"Latitude": 54.844648,
"Longitude": -6.273606,
"AccessComments": "Ballee Road Park and Share, Ballymena",
"RelatedURL": "http://pod-point.com",
"Distance": 3.812940207797744,
"DistanceUnit": 2
},
"Connections": [
{
"ID": 191571,
"ConnectionTypeID": 25,
"Reference": "1",
"StatusTypeID": 50,
"LevelID": 2,
"Amps": 32,
"Voltage": 400,
"PowerKW": 22,
"CurrentTypeID": 20
},
{
"ID": 191572,
"ConnectionTypeID": 25,
"Reference": "2",
"StatusTypeID": 50,
"LevelID": 2,
"Amps": 32,
"Voltage": 400,
"PowerKW": 22,
"CurrentTypeID": 20
}
],
"StatusTypeID": 0,
"DateLastStatusUpdate": "2020-02-21T15:15:00Z",
"MetadataValues": [
{
"ID": 6740,
"MetadataFieldID": 4,
"ItemValue": "Contains public sector information licensed under the Open Government Licence v2.0. http://www.nationalarchives.gov.uk/doc/open-government-licence/version/2/"
}
],
"DataQualityLevel": 3,
"DateCreated": "2019-12-24T05:23:00Z",
"SubmissionStatusTypeID": 100
},
{
"IsRecentlyVerified": false,
"ID": 48636,
"UUID": "69C483E6-E271-4315-A56F-E3747EA59D52",
"DataProviderID": 1,
"OperatorID": 93,
"OperatorsReference": "SC99",
"UsageTypeID": 4,
"UsageCost": "Free",
"AddressInfo": {
"ID": 48982,
"Title": "Dunsilly Park and Ride, Dunsilly Roundabout",
"AddressLine1": "Dunsilly Park and Ride, Dunsilly Roundabout,",
"Town": "Antrim",
"Postcode": "BT41 2JH",
"CountryID": 1,
"Latitude": 54.74636,
"Longitude": -6.234244,
"Distance": 4.081140533868653,
"DistanceUnit": 2
},
"Connections": [
{
"ID": 60091,
"ConnectionTypeID": 25,
"Reference": "1",
"StatusTypeID": 50,
"LevelID": 2,
"Amps": 32,
"Voltage": 400,
"PowerKW": 22,
"CurrentTypeID": 20,
"Quantity": 2
}
],
With the data struct file:
import Foundation
struct PublicCharger: Decodable {
let AddressInfo: AddressInfo
let Connections: [Connections]
}
struct AddressInfo: Decodable {
let Title: String
let Latitude: Double
let Longitude: Double
}
struct Connections: Decodable {
let StatusTypeID: Int
let ConnectionTypeID: Int
let PowerKW: Int
}
In my View Controller:
let decodedData = try decoder.decode([PublicCharger].self, from: data)
if !decodedData.isEmpty {
//print("Ran")
//print("Data: \(decodedData[0].AddressInfo.Title)")
let count = 0...10
for i in count {
publicChargerTitle.append(decodedData[i].AddressInfo.Title)
publicChargerLatitude.append(decodedData[i].AddressInfo.Latitude)
publicChargerLongitude.append(decodedData[i].AddressInfo.Longitude)
publicChargerStatus1.append(decodedData[i].Connections[0].StatusTypeID)
publicChargerStatus2.append(decodedData[i].Connections[1].StatusTypeID)
publicChargerConnector1.append(decodedData[i].Connections[0].ConnectionTypeID)
publicChargerConnector2.append(decodedData[i].Connections[1].ConnectionTypeID)
publicChargerKW1.append(decodedData[i].Connections[0].PowerKW)
publicChargerKW2.append(decodedData[i].Connections[1].PowerKW)
}
This works and adds the data to its own array.
The issue I'm seeing is not all chargers have the same number of connections. So when parsed the arrays are not matching each other at the end. Instead of skipping that array allocation with the next charger data, is there a way I can instead insert Null into the array to hold its place?
I have looked around and haven't yet found a clear solution to this issue. Any help would be greatly appreciated. API data from: https://api.openchargemap.io/
Thanks
I currently have two arrays formatted as below:
FreeChampions [
15,
17,
21,
27,
37,
45,
61,
72,
78,
89,
92,
99,
102,
121,
142
]
and
ChampionList [
[
"266",
"Aatrox",
"Aatrox"
],
[
"103",
"Ahri",
"Ahri"
],
[
"84",
"Akali",
"Akali"
],
[
"12",
"Alistar",
"Alistar"
],
[
"32",
"Amumu",
"Amumu"
],
[
"34",
"Anivia",
"Anivia"
],
[
"1",
"Annie",
"Annie"
],
I want to use the values of the FreeChampions Array to extract the object with the same value in the ChampionList array.
and then store those values in a new array.
This line should give you what you need. The filter filters out any elements who do not satisfy the find condition of the element being included in the FreeChampions array. Due to the type mismatch the y value needs to be cast to int for the includes to return truthy. Note that this will only work if the positions of the fields are static, ie the number in the inner array of ChampionsList is always at position 0.
var foundItems = ChampionList.filter(x => x.find(y => FreeChampions.includes(parseInt(y, 10))));
I need the text in this graph to stay center wrapped but it goes horizontal instead. Had anyone had this issue with chartjs?
Picture of the graph
It works if you used a set amount of letters such as 'dummy'.
datasets: {
labels: ["Dummy text 1", "Dummy text 2", "Dummy text 3"],
datasets: [
{
label: "",
data: [13, 11, 2],
backgroundColor: [
"rgba(0, 135, 136)",
"rgba(0, 193, 189)",
"rgba(255, 9, 49)"
],
borderColor: [
"rgba(0, 135, 136)",
"rgba(0, 193, 189)",
"rgba(255, 9, 49)"
],
borderWidth: 1
}
]
Fixed this easily with a multi-array and changing the xaxes. Here's the example fix -
labels: [
["Dummy", "Data 1"],
["Dummy", "Data 2"],
["Dummy", "Data 3"]
],
xAxes: [
{
ticks: {
maxRotation: 0,
minRotation: 0
},
}
]
Hopefully this helps someone out :)
scales: {
xAxes: [
{
ticks: {
callback: function (label, index, labels) {
if (/\s/.test(label)) {
return label.split(' ');
} else {
return label;
}
}
}
}
]
This callback function will split your X Axis labels on the basis of space and arrange all the words in a wrapped manner. You can use the same function for Y axis values as well
I have an array made of several hashes. I would like to find the highest value for a specific key/value and print the name value for that hash. For example, I have a "student" array of hashes containing information to each student. I would like to find which student had the highest test score and print their name out. For the array below, "Kate Saunders" has the highest test score, so I would like to print out her name.
Any help or pointers were to start on this would be greatly appreciated. I have a hacky work around right now, but I know there's a better way. I'm new to Ruby and loving it, but stumped on this one. Thanks so much!!!
students = [
{
name: "Mary Jones",
test_score: 80,
sport: "soccer"
},
{
name: "Bob Kelly",
test_score: 95,
sport: "basketball"
}.
{
name: "Kate Saunders",
test_score: 99,
sport: "hockey"
},
{
name: "Pete Dunst",
test_score: 88,
sport: "football"
}
]
You can use max_bymethod
students = [ { name: "Mary Jones", test_score: 80, sport: "soccer" }, { name: "Bob Kelly", test_score: 95, sport: "basketball" }, { name: "Kate Saunders", test_score: 99, sport: "hockey" }, { name: "Pete Dunst", test_score: 88, sport: "football" } ]
students.max_by{|k| k[:test_score] }
#=> {:name=>"Kate Saunders", :test_score=>99, :sport=>"hockey"}
students.max_by{|k| k[:test_score] }[:name]
#=> "Kate Saunders"
students = [ { name: "Mary Jones", test_score: 80, sport: "soccer" },
{ name: "Bob Kelly", test_score: 95, sport: "basketball" },
{ name: "Kate Saunders", test_score: 99, sport: "hockey" },
{ name: "Pete Dunst", test_score: 88, sport: "football" },
{ name: "Ima Hogg", test_score: 99, sport: "darts" }
]
Determine the highest score ala #Bartek.
max_score = students.max_by { |h| h[:test_score] }[:test_score]
#=> 99
Then determine which student(s) had that score.
star_students = students.select { |h| h[:test_score] == max_score }.
map { |h| h[:name] }
#=> ["Kate Saunders", "Ima Hogg"]
puts star_students
# Kate Saunders
# Ima Hogg
Ima's father was James ("Big Jim") Hogg, governor of Texas between 1891 and 1895. That Ima had a sister named "Ura" (which I thought was fact) turns out to be urban legend.
In the Flex app, the metadata is loaded as xml which has very good functions for searching deep into the xml nodes. In the extjs version I have converted the xml data to json, keeping the deep hierarchical content, and am loading to an extjs Store using a json reader. I have not created a model, deeming this not necessary as the model does not add add any search functionality(?). I am looking at store.find, store.findBy which can use a function, store.findRecord etc, but these functions look very 'one-levelish'. I need to go to the 'Tabs' "node", find its child 'Tab' with 'Name' of 'Tab1', and find the value of its attribute 'Title' ... am using the description "node" but it is hierarchical json data. Am I missing store functionality that would do this, should I use the store's raw json data - does json have better search functionality, or shall I revert to brute-force javascript by looping through all the "nodes"? I was hoping to avoid looping and find a function of some kind. As always, tia
Well, what I understood from our comments is that you need a kinda storage to access your JSON data as quickly and easily as possible.
JSON means JavaScript Object Notation, so it's an object!
Ok, I give you two examples.
First of all, setup JSON data:
{
"users": [{
"user": {
"id": 0 ,
"name": "foo" ,
"age": 22 ,
"skills": [{
"type": "bowcrafting" ,
"skillLevel": 50 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 1 ,
"name": "bar" ,
"age": 71 ,
"skills": [{
"type": "fencing" ,
"skillLevel": 32 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "swordsmanship" ,
"skillLevel": 73 ,
"levels": [10, 25, 50, 75, 80, 85, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 2 ,
"name": "foobar" ,
"age": 132 ,
"skills": [{
"type": "tactics" ,
"skillLevel": 90 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "carpentery" ,
"skillLevel": 86 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
} , {
"type": "hiding" ,
"skillLevel": 100 ,
"levels": [10, 25, 50, 65, 75, 80, 85, 90, 95, 99, 100]
}]
}
}]
}
And now here we got two ways to follow:
First way: we can imagine the above JSON saved into a file called nested-json.json and we read it with a simple store. Than, we can use findBy search to find what we need:
var jstore = Ext.create ('Ext.data.Store', {
fields: ['id', 'name', 'age', 'skills'] ,
proxy: {
type: 'ajax' ,
url: 'nested-json.json' ,
reader: {
type: 'json' ,
root: 'users' ,
record: 'user' ,
idProperty: 'id'
}
} ,
autoLoad: true
});
Ext.create ('Ext.button.Button', {
text: 'Push me' ,
renderTo: Ext.getBody () ,
handler: function (btn) {
var index = jstore.findBy (function (user, id) {
// Here's the hint
if (user.data.skills.skillLevel === 50) return id;
else return -1;
});
if (index != -1) {
// It will print 'foo' because it's the user
// that has the skillLevel equal to 50
console.log (jstore.getAt(index).get ('name'));
}
}
});
The other way is to imagine the above JSON as an object, read directly from a raw JSON data. At this point, just use it as a javascript object:
// Users model: required by JSON reader
Ext.define ('Users', {
extend: 'Ext.data.Model' ,
fields: ['id', 'name', 'age', 'skills']
});
// JSON reader
var jreader = Ext.create ('Ext.data.reader.Json', {
model: 'Users' ,
root: 'users' ,
record: 'user' ,
idProperty: 'id'
});
// Reads records directly from raw JSON
var users = jreader.readRecords ({
"users": [{
"user": {
"id": 0 ,
"name": "foo" ,
"age": 22 ,
"skills": [{
"type": "bowcrafting" ,
"skillLevel": 50 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 1 ,
"name": "bar" ,
"age": 71 ,
"skills": [{
"type": "fencing" ,
"skillLevel": 32 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "swordsmanship" ,
"skillLevel": 73 ,
"levels": [10, 25, 50, 75, 80, 85, 90, 95, 99, 100]
}]
}} , {
"user": {
"id": 2 ,
"name": "foobar" ,
"age": 132 ,
"skills": [{
"type": "tactics" ,
"skillLevel": 90 ,
"levels": [10, 25, 50, 90, 95, 99, 100]
} , {
"type": "carpentery" ,
"skillLevel": 86 ,
"levels": [10, 25, 50, 75, 90, 95, 99, 100]
} , {
"type": "hiding" ,
"skillLevel": 100 ,
"levels": [10, 25, 50, 65, 75, 80, 85, 90, 95, 99, 100]
}]
}
}]
});
// Here's the magic
Ext.each (users.records, function (user) {
console.log ('*** USER ***');
console.log (user);
console.log ('id: ' + user.get ('id'));
console.log ('name: ' + user.get ('name'));
console.log ('age: ' + user.get ('age'));
Ext.each (user.get ('skills'), function (skill) {
console.log ('*** SKILL ***');
console.log (skill);
console.log ('type: ' + skill.type);
console.log ('level: ' + skill.skillLevel);
console.log ('*** LEVELS ***');
Ext.each (skill.levels, function (level) {
console.log (level);
});
});
});
Here's a jsfiddle to test this last one: jsfiddle
I hope to have understood what you requested. If I didn't, please let me know with an example made by yourself ;)