Related
I am trying to get Fusion Grid (https://www.fusioncharts.com/fusiongrid )to work from the example in the online docs. However, it does not parse the HTML. It just prints the unparsed HTML in the column. The grid does not parse the HTML. You can see this problem in F-Series data (last column) in the example below, as well as using a column formatter, see myFunction2. None of the online docs have complete work. Is this a bug or am I missing something?
<!doctype html>
<html>
<head>
<!-- FusionGrid JS files -->
<script src="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.js"></script>
<link rel="stylesheet" href="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.css">
<script type="text/javascript">
var schema = [
{
name: 'Rank',
type: 'number',
},
{
name: 'Model'
},
{
name: 'Make'
},
{
name: 'Units Sold',
},
{
name: 'Assembly Location'
},
{
name: 'Link',
// type: 'html'
}
];
var data = [
[1, "F-Series", "Ford", 896526, "Claycomo, Mo.", "<a href='http://www.google.com>Edit</a>'"],
[2, "Pickup", "Ram", 633694, "Warren, Mich."],
[3, "Silverado", "Chevrolet", 575600, "Springfield, Ohio"],
[4, "RAV4", "Toyota", 448071, "Georgetown, Ky."],
[5, "CR-V", "Honda", 384168, "Greensburg, Ind."],
[6, "Rogue", "Nissan", 350447, "Smyrna, Tenn."],
[7, "Equinox", "Chevrolet", 346048, "Arlington, Tex."],
[8, "Camry", "Toyota", 336978, "Georgetown, Ky."],
[9, "Civic", "Honda", 325650, "Greensburg, Ind."],
[10, "Corolla", "Toyota", 304850, "Blue Springs, Miss."],
[11, "Accord", "Honda", 267567, "Marysville, Ohio"],
[12, "Tacoma", "Toyota", 248801, "San Antonio, Tex."],
[13, "Grand Cherokee", "Jeep", 242969, "Detroit, Mich."],
[14, "Escape", "Ford", 241338, "Louisville, Ky."],
[15, "Highlander", "Toyota", 239438, "Princeton, Ind."],
[16, "Sierra", "GMC", 232325, "Flint, Mich."],
[17, "Wrangler", "Jeep", 228032, "Toledo, Ohio"],
[18, "Altima", "Nissan", 209183, "Smyrna, Tenn."],
[19, "Cherokee", "Jeep", 191397, "Belvidere, Ill."],
[20, "Sentra", "Nissan", 184618, "Canton, Miss."],
];
function myFunction2(params) {
console.log(params.cellValue);
let value = params.cellValue;
let bgColor = '#ff0000';
if (params.cellValue > 346048 && params.cellValue <= 575600) {
bgColor = '#ffff00'
} else if (params.cellValue > 575601) {
bgColor = '#00ff00'
}
//return '{background-color: ' + bgColor + '}';
return ('<span style="background-color: "' + bgColor + '/>' + value + '</span>');
}
function render() {
// Getting the grid-container
var container = document.getElementById('grid-container');
// Passing data through DataStore
var dataStore = new FusionGrid.DataStore();
var dataTable = dataStore.createDataTable(data, schema, {enableIndex: false });
var grid = new FusionGrid(container, dataTable,
{
defaultColumnOptions: {
searchable: true,
filter: {
enable: true,
type: "conditional"
},
},
columns: [
{
field: 'Rank' ,
},
{
field: 'Model' ,
},
{
field: 'Make' ,
},
{
field: 'Units Sold',
type: 'number',
formatter: myFunction2,
},
{
field: 'Assembly Location',
},
{
field: 'Link',
// type: 'html'
}
],
});
// Render the grid
grid.render();
}
</script>
</head>
<body onload="render()">
<h1>Hello from FusionGrid!</h1>
<div id="grid-container" style="width: 100%; height: 450px;"></div>
</body>
</html>
I would expect that <span style="background-color: would be evaluated to actual HTML output, not unprocessed HTML
Thanks to Cesar for finding a solution: use a template with HTML type, not a formatter, as was incorrectly shown in the online documentation:
{
field: 'Units Sold',
type: 'html',
template: myFunction2,
},
use type html and template
{
field: 'Units Sold',
type: 'html',
template: myFunction2
}
I need to remove "toys" from form.value object before submit, and add new data to 'price'. But controls must be declared.
form.value object
{
"red": 1,
"green": 3,
"black": "120",
"blue": 3,
"toys": [
{
"bear": 0,
"soldier": 0,
"car": 0
}
],
"price": [
{
"default": 123,
"pre": 3,
"after": 2
},
{
"default": 3,
"pre": 0,
"after": 0
}
]
}
ts
initForm() {
this.form = this._fb.group({
red: 0,
green: 0,
black: '',
blue: 0,
toys: this._fb.array([this.inittoys()]),
price: this._fb.array([this.initprice()]),
});
html
<div class="form-group">
<label for="black">Max travel time</label>
<select class="form-control" id="black" formControlName="black">
<option *ngFor="let t of colors; let i=index" [ngValue]="i">{{t}}</option>
</select>
</div>
You can modify the values in the function before you send the form like this:
<form [formGroup]="yourForm" (ngSubmit)="yourSendFunction(yourForm.value)">
....
in the component:
yourSendFunction(values) {
delete values.toys;
values.price.push({
// Here anything you wants to addd
})
// Next send the values
}
I have a collection with a few arrays. I am using autoform to display various forms.
I need to pull in the existing data from the same _id into a different form field.
Here is my document with data:
{
"_id": "ERjvecg2GmSBktmn5",
"clientName": "General Motors",
"clientInfo": [
{
"fullname": "John Smith",
"email": "jsmith#gmail.com",
"phone": 2485551212,
"phone2": 7345551212
},
{
"fullname": "Billy Bob",
"email": "bbob#gmail.com",
"phone": 3135551212,
"phone2": 7346661212
}
],
"facilityList": [
{
"name": "GM # Ann Arbor",
"id": "1234",
"facilityType": "option1",
"address": "12345 Main St Ann Arbor, MI 48888",
"contacts": [
{
"contactName": "Jill Sutton",
"contactEmail": "jsutton#gmail.com",
"contactPhone1": 7348881212,
"contactPhone2": 3132224444
}
],
"special": "gsgfsdgdsgdsgdgsdgsdgdgdgggdsgfdgdfgdgsdgsdg",
"_id": "accde038-775d-4d11-b8fd-d0cc3b63c869"
}
],
"TasksWithData": [
{
"inspectionDetails": [
{
"inspector": "cHsSP6jadYa8wAeTi",
"inspectorName": "Joe Reporter",
"projectType": "inspection",
"startDate": "2017-01-13T05:30:00.000Z",
"desc": "fgfsdgsdgsdgdsgsdgdggsdgdg",
"activeTask": false
}
],
"TaskItem": [
{
"DataFacilitySection": "dsfgsdfgds",
"DataItemDescription": "item 1",
"DataItemSection": "dfgdfgdf",
"DataItemCode": "dfgdfgdf",
"DataItemPass": null
},
{
"DataFacilitySection": "ftydftuydrtuy",
"DataItemDescription": "item 2",
"DataItemSection": "dfgdgdf",
"DataItemCode": "dfgdfgdf",
"DataItemPass": null
}
],
"author": "Ss6TjGGzqWJRZYStx"
}
]
}
Really what I need to do is get the "facilityList" objects to appear as options in a select.
I have managed to do this with data from other collections like so:
'TasksWithData.$.inspectionDetails.$.inspector': {
type: String,
label: "Inspector",
optional: true,
autoform: {
firstOption: 'Choose an Inspector',
options: function() {
return Meteor.users.find({}, {
sort: {
profile: 1,
firstName: 1
}
}).map( function ( c ){
return{
label: c.profile.firstName + " " + c.profile.lastName,
value: c._id
};
} );
}
}
},
but it seems a bit different when doing it with items from the same _id.
Here is my autoForm:
{{#autoForm collection="ClientData" id=UpdateForm type="update-pushArray" scope="TasksWithData" doc=this}}
{{> afQuickField name="inspectionDetails.0.TaskFacility"}}
{{> afQuickField name="inspectionDetails.0.inspector"}}
{{> afQuickField name="inspectionDetails.0.inspectorName"}}
{{> afQuickField name="inspectionDetails.0.projectType"}}
{{> afQuickField name="inspectionDetails.0.startDate"}}
{{> afQuickField name="inspectionDetails.0.desc"}}
<div class="panel panel-default">
{{> afArrayField name="TaskItem"}}
</div>
<input class="btn btn-primary btn-block" type="submit" value="Add Task">
{{/autoForm}}
I am a little unsure if this would get done on the autoform side or with the schema. Here is an example of the schema I am using to attempt to pull in the data:
'TasksWithData.$.inspectionDetails.$.TaskFacility': {
type: String,
label: "Choose a Facility",
optional: true,
autoform: {
firstOption: 'Choose a Facility',
options: facilityList
},
Clearly its wrong, but I would REALLY appreciate suggestions on this.
I have a data collection that i want to group by month for a calendar list view with dividers like the attached image. How to do this in ionic 2?
{
"data": [
{
"id": "75",
"title": "Oudergesprekken",
"startDate": "18-01-2017",
},
{
"id": "76",
"title": "Talentmiddag",te ontdekken.</p>",
"startDate": "25-01-2017",
},
{
"id": "77",
"title": "Studiedag team, alle kinderen vrij!",
"startDate": "06-02-2017",
},
{
"id": "79",
"title": "Letterfeest groep 3",
"startDate": "14-02-2017",
},
{
"id": "78",
"title": "Voorjaarsvakantie",
"startDate": "24-02-2017",
}
]
At the moment i have an filter pipe
#Pipe({
name: "filter",
pure: false
})
export class ArrayFilterPipe implements PipeTransform {
transform(items: Array<any>, conditions: {[field: string]: any}): Array<any> {
return items.filter(item => {
for (let field in conditions) {
if (item[field] !== conditions[field]) {
return false;
}
}
return true;
});
}
}
and in the template ill do this.
<ion-item-group *ngFor="let maand of maanden" >
<ion-item-divider sticky>{{maand.title}}</ion-item-divider>
<ion-item *ngFor="let item of agendaItems | filter:{ maandNum:maand.id }" >
{{ item.title }}
</ion-item>
</ion-item-group>
The pipe groups the items with an months array that's works fine but shows dividers of months with no have any data and if there are items that are in 2 different years in the same month this group by not working propaly.
I'd like to have usefull data when programming in front-end. There are a few ways to handle the data you recieved. In my opinion it's the easiest way to manipulate the data you've got, so you are able to iterate through that month array, like following :
Your component
export class YourComponent {
public months: any = [];
public data: any = [];
constructor() {
this.data = [
{
'id': '75',
'title': 'Oudergesprekken',
'startDate': '18-01-2017',
},
{
'id': '76',
'title': 'Talentmiddag,te ontdekken.</p>',
'startDate': '25-01-2017',
},
{
'id': '77',
'title': 'Studiedag team, alle kinderen vrij!',
'startDate': '06-02-2017',
},
{
'id': '79',
'title': 'Letterfeest groep 3',
'startDate': '14-02-2017',
},
{
'id': '78',
'title': 'Voorjaarsvakantie',
'startDate': '24-02-2017',
}
];
}
ngOnInit() {
this.data.forEach( (event) => {
let monthNumber = this.getMonthNumber(event);
if (this.months[monthNumber] === null||undefined ) this.months[monthNumber].events = [];
this.months[monthNumber].events.push(event);
});
}
private getMonthNumber(event: any): number {
return event.startDate.split('-')[1];
}
public getMonthName(monthNumber: any): number {
let maanden = [ {"id": 1, "title": "Januari"}, {"id": 2, "title": "Februari"}, {"id": 3, "title": "Maart"}, {"id": 4, "title": "April"}, {"id": 5, "title": "Mei"}, {"id": 6, "title": "Juni"}, {"id": 7, "title": "Juli"}, ...... ];
maanden.forEach((maand) => {
if ( maand.id === monthNumber) return maand.title;
});
}
}
Your HTML
<ion-item-group *ngFor="let month of months" >
<ion-item-divider sticky *ngIf='month.events.length > 0'>{{getMonthName()}}</ion-item-divider>
<ion-item *ngFor="let event of month.events | filter:{ maandNum:months.indexOf(month) }" >
{{ item.title }}
</ion-item>
</ion-item-group>
I did not test this, so I'll keep an eye on this one. How this make some clear.
On my highchart how can I set the Y AXIS (dataItem) so that it will populate accordingly to amount of times a country appears in my json data. So in my snippet it should show GB as 66% instead of two 33%?
Also what would be a good way to import my json data if I was to keep in in a separate file. Was thinking of keeping it in a separate file called (json_data.json).
Please help.
$(document).ready(function () {
var json=
[
{
"Hot": false,
"Country": "NETHERLANDS",
"DomCountry": "NA",
"DomPortCode": "*PI",
"Code": "RTM",
"Origin": "NL",
"CodeDest": "NA",
},
{
"Hot": true,
"Country": "GREAT BRITAIN",
"DomCountry": "POLAND",
"DomPortCode": "*PI",
"Code": "CAL",
"Origin": "GB",
"CodeDest": "PL",
},
{
"Hot": true,
"Country": "GREAT BRITAIN",
"DomCountry": "POLAND",
"DomPortCode": "*PI",
"Code": "CAL",
"Origin": "GB",
"CodeDest": "PL",
}
];
var listData=json;
console.log(listData);
var dataList = []
var dataItem;
for (var i = 0; i < listData.length; i++) {
dataItem={
name: listData[i].Country,
y: 1
}
dataList.push(dataItem); //dataItem push
}
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'SHIPPING INFO'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: "Try",
colorByPoint: true,
data: dataList
}]
});
});
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<title>Highcharts Examples</title>
</head>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
You need to loop through your data and count the occurrences.
Then you need to calculate the percentages, and format the data in a way that Highcharts can use.
You can loop through it and build your first set up something like this:
var countryCounts = {};
var countryNames = [];
var totalCount = 0;
//loop through the object
$.each(json, function(i, node) {
//get the country name
var countryName = node["Country"];
//build array of unique country names
if($.inArray(countryName, countryNames) == -1) {
countryNames.push(countryName);
}
//add or increment a count for the country name
if(typeof countryCounts[countryName] == 'undefined') {
countryCounts[countryName] = 1;
}
else {
countryCounts[countryName]++;
}
//increment the total count so we can calculate %
totalCount++;
});
That gives you what you need to calculate from.
Then you can loop through your country names and build a data array:
var data = [];
//loop through unique countries to build data for chart
$.each(countryNames, function(i, countryName) {
data.push({
name: countryName,
y: Math.round((countryCounts[countryName] / totalCount) * 100)
});
});
This keeps it dynamic so that you can have any number of countries.
Then you just add your data array to your chart:
http://jsfiddle.net/jlbriggs/e2qq2j2L/