I'm new to highcharts and have an issue with creating a dynamic bar chart using the dictionary dataset. Could you please help/suggest with it.
Following is the dataset parsed to html:
data = {
'Queue1': [{'name': 'user1', 'tickets': 1}, {'name': 'user2', 'tickets': 1}], 'Queue2': [{'name': 'user3', 'tickets': 1}, {'name': 'user1', 'tickets': 1}], 'Queue3': [{'name': 'user1', 'tickets': 30}, {'name': 'user2', 'tickets': 37}], 'Queue4': [{'name': 'user4', 'tickets': 2}]
}
Would like to display as multiple bar charts with Queue's as category and list of users with tickets handled under each queue( dynamic dataset queried from sql)
Appreciate any help/suggestions.
Thankyou.
You need to parse your data to the format required by Highcharts, for example:
var key,
series = [];
for (key in data) {
series.push({
name: key,
data: []
});
data[key].forEach(function(el) {
series[series.length - 1].data.push({
name: el.name,
y: el.tickets
});
});
}
Live demo: http://jsfiddle.net/BlackLabel/9asrxwej/
API Reference: https://api.highcharts.com/highcharts/series.column.data
Related
I'm using faust-streaming and python-schema-registry-client to serialize faust.Record classes to avro.
When I try to deserialize a Union of two complex types however faust cannot reconstruct the correct records and only presents a dictionary instead of a faust.Record class.
I have the following code and schema:
schema_union = schema.AvroSchema({
'type': 'record',
'name': 'UnionRecord',
'fields': [
{
'name': 'entity',
'type': [
'null',
{
'name': 'company',
'type': 'record',
'fields': [
{'name': 'name_company', 'type': 'string'},
]
},
{
'name': 'person',
'type': 'record',
'fields': [
{'name': 'name_person', 'type': 'string'},
]
}
]
}
]
})
client = SchemaRegistryClient(url='http://localhost:8081')
faust_serializer_union = FaustSerializer(client, 'schema-union', schema_union)
class Company(faust.Record):
name_company: str
class Person(faust.Record):
name_person: str
class UnionRecord(
faust.Record,
validation=True,
serializer=faust_serializer_union
):
entity: Optional[Union[Company, Person]] # Union is typing.Union
record = UnionRecord(entity=Company(name_company='name'))
If I now try to serialize record and then deserialize it:
out = record.dumps() # == b'\x00\x00\x00\x00\x13\x02\x08name'
UnionRecord.loads(out)
I get this:
<UnionRecord: entity={'name_company': 'name'}>
Whereas I expect to get this:
<UnionNoneRecord: entity=<Company: name_company='name'>>
If I remove the Union type and alter the schema so that I can have a faust.Record that has only this field: Optional[Company], I do get the correct deserialization.
I have a map like this:
{id2: {quantity: 6, name: NEW NAME}, 1484: {quantity: 1, name: NEW NAME 404}, id: {quantity: 34, name: NEW NAME}}
here I have a key called "quantity" what i need to do is calculate the total quantity , for this example 6+1+34 = 41 , maybe using .reduce method but can't find how to implement it on a map.
I think it make more sense to use fold which you can read about here: https://api.dart.dev/stable/2.10.5/dart-core/Iterable/fold.html
void main() {
final map = {
'id2': {'quantity': 6, 'name': 'NEW NAME'},
1484: {'quantity': 1, 'name': 'NEW NAME 404'},
'id': {'quantity': 34, 'name': 'NEW NAME'}
};
final sum = map.values
.fold(0, (int sum, element) => sum + (element['quantity'] as int));
print(sum); // 41
}
But if you really want to use reduce you can do it like this:
void main() {
final map = {
'id2': {'quantity': 6, 'name': 'NEW NAME'},
1484: {'quantity': 1, 'name': 'NEW NAME 404'},
'id': {'quantity': 34, 'name': 'NEW NAME'}
};
final sum =
map.values.map((e) => e['quantity'] as int).reduce((a, b) => a + b);
print(sum); // 41
}
Let's say I have a list that goes like this!
List<Map<String, String>> names = [
{'name': 'John'},
{'name': 'Adam'},
{'name': 'Sean'},
{'name': 'Shirley'},
{'name': 'Samantha'},
];
How would I be able to retrieve only the list of values inside the map?
I want the output to be this:
List<String> names = [
'John',
'Adam',
'Sean',
'Shirley',
'Samantha',
];
Something like this:
void main() {
List<Map<String, String>> names = [
{'name': 'John'},
{'name': 'Adam'},
{'name': 'Sean'},
{'name': 'Shirley'},
{'name': 'Samantha'},
];
final onlyNames1 = names.map((map) => map.values.first).toList();
final onlyNames2 = names.expand((map) => map.values).toList();
print(onlyNames1); // [John, Adam, Sean, Shirley, Samantha]
print(onlyNames2); // [John, Adam, Sean, Shirley, Samantha]
}
I would like to detect the value of change event to the input on form.component.ts.
I would not like to call the function ex: (onChange) = "function($event.target.value)"
public form: FormGroup;
constructor(private formBuilder: FormBuilder){
}
private loadForm(){
this.form = this.formBuilder.group({
tipo: [null, Validators.required],
nomeRazao: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
apelidoFantasia: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
cpfCnpj: [null, Validators.compose([Validators.required, Validators.minLength(11), Validators.maxLength(14)])],
rgIe: [null],
contato: this.formBuilder.group({
email: [null],
telefone: [null]
}),
endereco: this.formBuilder.group({
cep: [null, Validators.pattern('^([0-9]){5}([-])([0-9]){4}$')],
uf: [null],
cidade: [null],
bairro: [null, Validators.required],
logradouro: [null],
complemento: [null],
numero: [null, Validators.pattern('/^\d+$/')]
})
});
}
ngOnInit() {
this.loadForm();
}
You can subscribe to your form changes by using this :
this.form.valueChanges.subscribe(() => {
if (this.registerForm.controls['yourControlName'].value === 'someValue') {
//
}
});
For detecting changes in value of a particular field, 'valueChanges' event on that field can be subscribed, as shown below:
this.myForm.get('formcontrolname').valueChanges.subscribe(val => {
this.message = val;
});
For people who are checking for higher versions of Angular or to whom the accepted solution isn't working,
Try this
this.myForm.valueChanges.subscribe(val => {
this.message = val.formcontrolname;});
the approach is to use the variables inside the change detection and you can restrict it with the respective form control name
I'm using select2 v4 and trying to make dependent lists with local (already loaded) choices.
var list1 = [
{id: 42, name: 'xxx'},
{id: 43, name: 'yyy'}
];
var list2 = [
{id: 1, name: 'aaa', list1: 42},
{id: 2, name: 'bbb', list1: 42},
{id: 3, name: 'ccc', list1: 43},
{id: 4, name: 'ddd', list1: 43}
]
I'd like list2 to depend on list1
I tried to use a callback on data:
$('#list1').select2({
data: list1
});
$('#list2').select2({
data: function () {
var list2_filtered = $.grep(list2, function (choice) {
return choice.list1 == $('#list1').val();
});
return list2_filtered;
}
});
but it does not seem to be called.
Why is my callback function never called ?
How can I make these local lists dependent ?
Refreshing a select2 data is a quite known issue.
So I implemented my own "data updater":
function refreshSelect($input, data) {
$input.html($('<option />')); // if a default blank is needed
for (var key in data) {
var $option = $('<option />')
.prop('value', data[key]['id'])
.text(data[key]['text'])
;
$input.append($option)
}
$input.trigger('change');
}
Here is how to use it:
<select id="my_select_input"></select>
var $input = $('#my_select_input');
var data = [
{
id: 42,
text: 'XX'
},
{
id: 43,
text: 'YY'
}
];
refreshSelect($input, data);
It works with and without select2