I would like to understand if the following is possible. If have two jsFiddle examples with the same dataset. One contains an array of objects while the other is flatten. I have also added some records that are not fully scoped.
Can the filter on the scatter plot work correctly for the Array of Objects dataset?
Data - Flatten : jsFiddle Example
var data = [
{"_uid": 1, "business": 'Resort', "state": {name: 'Virginia', startups: 15}},
{"_uid": 1, "business": 'Resort', "state": {name: 'Maryland', startups: 6}},
{"_uid": 3, "business": 'Training', "state": {name: 'Virginia', startups: 4}},
{"_uid": 3, "business": 'Training', "state": {name: 'Maryland', startups: 2}},
{"_uid": 3, "business": 'Training', "state": {name: 'D.C.', startups: 3}},
{"_uid": 4, "business": 'Sitting'},
{"_uid": 5, "business": 'Vet', "state": {name: 'Virginia', startups: 4}},
{"_uid": 6, "business": 'Parties', "state": {}},
{"_uid": 7, "business": 'Grooming', "state": {name: 'Virginia', startups: 4}},
{"_uid": 7, "business": 'Grooming', "state": {name: 'D.C.', startups: 3}},
];
Data - Array of Objects : jsFiddle Example
var data = [
{"_uid": 1, "business": 'Resort', "states": [{state: 'Virginia', startups: 15}, {state: 'Maryland', startups: 6}]},
{"_uid": 3, "business": 'Training', "states": [{state: 'Virginia', startups: 4}, {state: 'Maryland', startups: 2}, {state: 'D.C.', startups: 3}]},
{"_uid": 4, "business": 'Sitting'},
{"_uid": 5, "business": 'Vet', "states": [{state: 'Virginia', startups: 4}]},
{"_uid": 6, "business": 'Parties', "state": {}},
{"_uid": 7, "business": 'Grooming', "states": [{state: 'Virginia', startups: 4}, {state: 'D.C.', startups: 3}]}
];
The data is displayed correctly for both datasets.
If I select the Pet Business Type - "Grooming" and brush the scatter plot vertically on 3 the filtered data is correct for the Flatten dataset, but not correct for the Array of Objects dataset.
Flatten dataset - Filtered
CORRECT - It is showing that "Training" also has a startup value of "3"
Array of Objects - Filtered
INCORRECT - All of the business types are showing up along with the other state "Virginia" for "Grooming".
I know we are asking a lot out of Crossfilter and dc.js by not flattening the data, but is this possible?
Related
I have small laravel collection as below.
[
{
id: 1,
data1: 11,
data2: 12,
data3: 13,
created_at: null,
updated_at: null
},
{
id: 2,
data1: 14,
data2: 15,
data3: 16,
created_at: null,
updated_at: null
}
]
But I would like to convert to array collection like below.
{
data: [
[
11,
12,
13
],
[
14,
15,
16
]
]
}
Appreciated for advice and so sorry for my English. Thank you very much.
Use toArray() which converts this object into an array.
$data->toArray();
Now the collection converted into an array and looks like:-
[
[
id: 1,
data1: 11,
data2: 12,
data3: 13,
created_at: null,
updated_at: null
],
[
id: 2,
data1: 14,
data2: 15,
data3: 16,
created_at: null,
updated_at: null
]
]
But as per your requirements, you don't want associative index for the array, So use
$data = array_values($data);
Now your keys has been removed and final data is:-
[
[
11,
12,
13
],
[
14,
15,
16
]
]
I need to create a bar graph with one of the format below. data1 or data2
const data1 = [ { day: 'ABC', data :[ {job_name: "Mon", value: 4}, {job_name: "Tue", value: 5}, {job_name: "Thu", value: 18}, {job_name: "Fri", value: 5} ] }, { day: 'DEF', data :[ {job_name: "Mon", value: 12}, {job_name: "Tue", value: 15}, {job_name: "Wed", value: 18}, {job_name: "Fri", value: 8} ] }, { day: 'XYZ', data :[ {job_name: "Mon", value: 12}, {job_name: "Tue", value: 15}, {job_name: "Wed", value: 18}, {job_name: "Thu", value: 8} ] } ];
const data2 = [ { day: 'Mon', data :[ {job_name: "ABC", value: 4}, {job_name: "DEF", value: 5}, {job_name: "XYZ", value: 8} ] }, { day: 'Tue', data :[ {job_name: "ABC", value: 12}, {job_name: "DEF", value: 15}, {job_name: "XYZ", value: 18} ] }, { day: 'Wed', data :[ {job_name: "DEF", value: 15}, {job_name: "XYZ", value: 18} ] }, { day: 'Thu', data :[ {job_name: "ABC", value: 12}, {job_name: "XYZ", value: 18} ] }, { day: 'Fri', data :[ {job_name: "ABC", value: 12}, {job_name: "DEF", value: 15} ] } ];
Short answer, you can't. The shape of the data in your samples aren't suitable for Rechart.
Please look up the documentation of Rechart - BarChart -> data and reshape your data accordingly.
Here's an example of the required data format from the same page:
const data = [
{
"name": "Page A",
"uv": 4000,
"pv": 2400,
"amt": 2400
},
{
"name": "Page B",
"uv": 3000,
"pv": 1398,
"amt": 2210
}
Where name is the x-axis data label, and uv, pv and amt are the values of the data series.
So a more hands on example:
const data = [
{
"name": "2019-11-01",
"morning_temp": 8,
"midday_temp": 14,
"evening_temp": 10
},
{
"name": "2019-11-02",
"morning_temp": 5,
"midday_temp": 18,
"evening_temp": 7
},
...
Though from my own experience changing the shape you have can be challenging and possibly will end up a high complexity function. If you can't change the data shape you may have a look at react-vis -> sample as react-vis' data-shape looks more similar to your samples.
Either case the data has to be in the right shape.
I have 2 different collections which look like this
Collection 1 :
{typesession_id: 3, formation_id: 7, codeformation: "FR8", id: 3, nomformation: "Sécurité électrique", …}
{typesession_id: 3, formation_id: 8, codeformation: "FR8", id: 4, nomformation: "Sécurité incendie", …}
Collection 2 :
{datesession: "2018-03-15", debutsession: "08:30:00", finsession: "12:00:00", typesession_id: 1, title: "Gestes d'urgence - Soignant", …}
{datesession: "2018-03-16", debutsession: "08:30:00", finsession: "12:00:00", typesession_id: 3, title: "eLearning", …}
{datesession: "2018-03-17", debutsession: "08:30:00", finsession: "12:00:00", typesession_id: 3, title: "eLearning", …}
Those 2 collection have a common key ...
I'm trying to recover the elements of the Collection 2 which have the same value for the "typesession_id" key ...
For example if my collection 1 have elements with typesession_id equal to 1 and 2, i want to have items of the collection 2 with values 1 and 2.
My newCollection should be :
{typesession_id: 3, formation_id: 7, codeformation: "FR8", id: 3, nomformation: "Sécurité électrique", datesession: "2018-03-16", debutsession: "08:30:00", finsession: "12:00:00", title: "eLearning", …}
{typesession_id: 3, formation_id: 7, codeformation: "FR8", id: 4, nomformation: "Sécurité électrique", datesession: "2018-03-17", debutsession: "08:30:00", finsession: "12:00:00", title: "eLearning", …}
{typesession_id: 3, formation_id: 8, codeformation: "FR8", id: 3, nomformation: "Sécurité incendie", datesession: "2018-03-16", debutsession: "08:30:00", finsession: "12:00:00", title: "eLearning", …}
{typesession_id: 3, formation_id: 8, codeformation: "FR8", id: 4, nomformation: "Sécurité incendie", datesession: "2018-03-17", debutsession: "08:30:00", finsession: "12:00:00", title: "eLearning", …}
In other terms : my first collection allows me to know which are the trainings an user can do ... and my second collection allows me to have information concerning sessions available for a specific type of session (typesession_id). I want to have a full list of combination based on typesession_id ...
I tried to figure it out by myself on Laravel guide but i didn't really find my solution...
I haven't tested but code likes below would probably work:
$collection1 = $collection1->groupBy('typessesion_id');
$result = $collection2->map(function($item, $key) {
$typesession_id = $item->typesession_id;
$item_clone = $item;
$data = $collection1[$typesession_id]->map(function($it, $k) use ($item_clone) {
if ($typesession_id == $it->typesession_id) {
return $item_clone->merge($it);
}
return $it;
});
return $data->merge($item);
});
dd($result);
I have a Business model and an Hour model. The Business model overrides the protected $with method to eager load it's hours() hasMany relationship.
When I ::first() a given business I receive something like this:
App\Business {#770
id: 5,
user_id: 5,
name: "Wehner-Hudson",
slug: "wehner-hudson",
lat: "55.33593500",
lng: "112.34818600",
created_at: "2018-01-04 13:00:48",
updated_at: "2018-01-04 13:00:48",
hours: Illuminate\Database\Eloquent\Collection {#753
all: [
App\Hour {#802
id: 13,
business_id: 5,
weekday_id: 3,
open: 1,
split_shift: 1,
},
App\Hour {#803
id: 14,
business_id: 5,
weekday_id: 5,
open: 0,
split_shift: 1,
},
App\Hour {#804
id: 15,
business_id: 5,
weekday_id: 2,
open: 1,
split_shift: 0,
},
],
},
},
],
}
I would like to key the hours: Illuminate\Database\Eloquent\Collection {#753 by weekday_id to facilitate processing on the client side. Something like this:
Illuminate\Database\Eloquent\Collection {#763
all: [
1 => App\Hour {#796
id: 1,
business_id: 1,
weekday_id: 1,
open: 1,
split_shift: 1,
},
5 => App\Hour {#767
id: 2,
business_id: 1,
weekday_id: 5,
open: 0,
split_shift: 0,
},
2 => App\Hour {#765
id: 3,
business_id: 1,
weekday_id: 2,
open: 1,
split_shift: 1,
},
],
}
I tried to use keyBy on the relationship in the Business model:
public function hours()
{
return $this->hasMany(Hour::class)->keyBy('weekday_id');
}
But it is not working, as I believe that at that point the returned object is a builder, not a collection.
Try to define an accessor, like this:
public function getHoursByWeekdayAttribute()
{
return $this->hours->keyBy('weekday_id');
}
What about using groupby in your controller.
Business::with(['hours' => function($query){ $query->groupBy('weekend_id'); }])->get();
I have a dataset that has datetime and I want to shown my data with a period. But if my data set has anordinary data without period also it must be shown.
My dataset;
18.10.2017 08:00
18.10.2017 08:15
18.10.2017 08:30
18.10.2017 08:40
18.10.2017 09:15
My period: 15 min
How I can see data on 18.10.2017 08:40?
Mydata:
[
{
"column-1": 8,
"column-2": 5,
"date": "2014-03-01 08:00"
},
{
"column-1": 6,
"column-2": 7,
"date": "2014-03-01 08:15"
},
{
"column-1": 1,
"column-2": 3,
"date": "2014-03-01 08:30"
},
{
"column-1": 5,
"column-2": 3,
"date": "2014-03-01 08:40"
},
{
"column-1": 2,
"column-2": 1,
"date": "2014-03-01 09:15"
},
{
"column-1": 3,
"column-2": 2,
"date": "2014-03-01 09:30"
},
{
"column-1": 6,
"column-2": 8,
"date": "2014-03-01 09:45"
}
Make sure your minPeriod is set to the lowest period that can display your data. If your data isn't always in 15 minute increments, then use "mm" instead of "15mm". Since you have gaps, you'll also want to set the gapPeriod to a value that best represents where you want the gap to appear - if your data is usually within 15 minutes, then set it to 15.1:
graphs: [
{
// ...
connect: false,
gapPeriod: 15.1,
// ...
},{
// ...
connect: false,
gapPeriod: 15.1,
// ...
}
],
// ...
categoryAxis: {
parseDates: true,
minPeriod: "mm"
}
Demo