I have an array of objects that need to be filtered through, and displayed depending on which checkbox is selected. I can get it to work with a one dimension array, when I nest deeper I don't understand how to get everything working again.
This is the initial function that filters the array:
computed: {
selectedFilters: function() {
let filters = [];
let checkedFilters = this.shopFilters.filter(obj => obj.checked);
checkedFilters.forEach(element => {
filters.push(element.value);
});
return filters;
}
}
Tis is the data it pulls from:
shopFilters: [
{
name: 'price',
categories: [
{
checked: false,
value: 'Under $50'
},
{
checked: false,
value: '$50 to $100'
},
{
checked: false,
value: '$100 to $150'
},
{
checked: false,
value: '$150 to $200'
},
{
checked: false,
value: 'Over $200'
},
]
},
{
name: 'sports',
categories: [
{
checked: false,
value: 'lifestyle'
},
{
checked: false,
value: 'running'
},
{
checked: false,
value: 'basketball'
},
{
checked: false,
value: 'football'
},
{
checked: false,
value: 'soccer'
},
{
checked: false,
value: 'training & gym'
},
{
checked: false,
value: 'skateboarding'
},
{
checked: false,
value: 'baseball / softball'
},
{
checked: false,
value: 'golf'
}
]
}
]
This is the function that filters through the product data in another file to display on the page:
methods: {
getfilteredData: function() {
this.filteredData = data;
let filteredDataByfilters = [];
// first check if filters where selected
if (this.selectedFilters.length > 0) {
filteredDataByfilters= this.filteredData.filter(obj => this.selectedFilters.every(val => obj.indexOf(val) >= 0));
this.filteredData = filteredDataByfilters;
}
}
}
What the data looks like:
const data = [
{
name: 'SNKR 001',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
},
{
name: 'SNKR 002',
gender: 'Men',
price: 100,
sport: 'running',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
},
{
name: 'SNKR 003',
gender: 'Men',
price: 100,
sport: 'training & gym',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
},
{
name: 'SNKR 004',
gender: 'Men',
price: 100,
sport: 'lifestyle',
width: 'Wide',
colors: ['black', 'white', 'green', 'pink'],
sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
image: '../assets/images/shoe-1.png'
}
];
export default data;
You can merge all filter into 1 array:
const categories = this.shopFilters.map(item => item.categories)
const flatFilters = [].concat.apply([], categories)
then the filter will become flat:
flatFilters: [{
checked: false,
value: 'Under $50'
},
{
checked: false,
value: '$50 to $100'
},
{
checked: false,
value: '$100 to $150'
},
{
checked: false,
value: '$150 to $200'
},
{
checked: false,
value: 'Over $200'
},
{
checked: false,
value: 'lifestyle'
},
{
checked: false,
value: 'running'
},
{
checked: false,
value: 'basketball'
},
{
checked: false,
value: 'football'
},
{
checked: false,
value: 'soccer'
},
{
checked: false,
value: 'training & gym'
},
{
checked: false,
value: 'skateboarding'
},
{
checked: false,
value: 'baseball / softball'
},
{
checked: false,
value: 'golf'
}
]
then use can apply old logic
computed: {
selectedFilters: function() {
let filters = [];
const categories = this.shopFilters.map(item => item.categories)
const flatFilters = [].concat.apply([], categories)
let checkedFilters = flatFilters.filter(obj => obj.checked);
checkedFilters.forEach(element => {
filters.push(element.value);
});
return filters;
}
Related
I'm using jqxPiveGrid, but it doesn't work, and the problems showed on console: Uncaught TypeError: $.jqx.pivot is not a constructor.
enter image description here
I'm using Visual Studio 2015, (ASP.Net MVC) for the website.
There's my code below:
var dataList = new Array();
dataList= [
{ Style: 'Top', RangeStart: 0, RangeEnd: 10, Day: 1, Value: 0 },
{ Style: 'Top', RangeStart: 0, RangeEnd: 10, Day: 2, Value: 2 },
{ Style: 'Top', RangeStart: 0, RangeEnd: 10, Day: 3, Value: 3 },
{ Style: 'Top', RangeStart: 10.1, RangeEnd: 15, Day: 1, Value: 4 },
{ Style: 'Top', RangeStart: 10.1, RangeEnd: 15, Day: 2, Value: 8 },
{ Style: 'Top', RangeStart: 10.1, RangeEnd: 15, Day: 3, Value: 12 },
{ Style: 'Pants ', RangeStart: 0, RangeEnd: 10, Day: 1, Value: 0 },
{ Style: 'Pants ', RangeStart: 0, RangeEnd: 10, Day: 2, Value: 1 },
{ Style: 'Pants ', RangeStart: 0, RangeEnd: 10, Day: 3, Value: 2 },
{ Style: 'Pants ', RangeStart: 10.1, RangeEnd: 15, Day: 1, Value: 3 },
{ Style: 'Pants ', RangeStart: 10.1, RangeEnd: 15, Day: 2, Value: 5 },
{ Style: 'Pants ', RangeStart: 10.1, RangeEnd: 15, Day: 3, Value: 7 },
];
var source =
{
localdata: dataList,
datatype: "array",
datafields:
[
{ name: 'Style', type: 'string' },
{ name: 'RangeStart', type: 'number' },
{ name: 'RangeEnd', type: 'number' },
{ name: 'Day', type: 'number' },
{ name: 'Value', type: 'number' },
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create a pivot adapter from the dataAdapter
var pivotAdapter = new $.jqx.pivot(
dataAdapter,
{
pivotValuesOnRows: false,
rows: [ { dataField: 'Style' }, {dataField: 'RangeStart'}, {dataField: 'RangeEnd'}],
columns: [
{ dataField: 'Day'},
],
values: [
{ dataField: 'Value', 'function': '', text: '',formatSettings: { decimalPlaces: 2, align: 'right', }},
]
});
$('#divPivotGrid').jqxPivotGrid(
{
source: pivotAdapter,
treeStyleRows: true,
autoResize: false,
multipleSelectionEnabled: true
});
setTimeout(_ =>
{
var myPivotGridRows = $('#divPivotGrid').jqxPivotGrid('getPivotRows');
var myPivotGridColumns = $('#divPivotGrid').jqxPivotGrid('getPivotColumns');
var items = myPivotGridColumns.items;
var firstItem = items[0];
var firstItemValueItems = firstItem.valueItems[0];
var otherHierarchy = firstItem.hierarchy.getHierarchyDepth();
myPivotGridRows.sortBy(firstItemValueItems, 'desc');
}, 1500);
But it works perfectly on here:
https://jseditor.io/?key=pivotgrid-demonstration-of-sortby-method
Implementing some paging algorithms in java script for practice.
I get the proper output on the arrays I want to push into the multidimensional array(double) but it only pushes the final version. Im printing to the console and this is what im getting it should be populated with all the different versions of the frames. Is this a weird JS thing with arrays or what?
//variable declaration
var frameNumber=3;
var refStringSize=6;
var faultCount=0;
var refString = [];
var _frames=[];
var arrayOfDisplayArrays=[];
console.log("refString: "+refString);
//didnt include other functions
//"driver"
for(i=refStringSize;i>0;i--){
var x = refString.shift();
//if frames are not filled
if(_frames.length!=frameNumber){
if(!_includes(_frames,x)){
_frames.push({'x':x,'checked':false});
faultCount++;
console.log('----')
console.log(_frames);
arrayOfDisplayArrays.push(_frames);
}
//if frames are filled
}else{
if(!_includes(_frames,x)){
var index=getLRUIndex(_frames,refD);
_frames[index]={'x':x,'checked':false};
faultCount++;
console.log('----')
console.log(_frames);
arrayOfDisplayArrays.push(_frames);
}
}
refD.push(x);
}
console.log(arrayOfDisplayArrays);
and this is my output(ignore checked):
refString: 2,9,4,5,8,9
----
[ { x: 2, checked: false } ]
----
[ { x: 2, checked: false }, { x: 9, checked: false } ]
----
[ { x: 2, checked: false },
{ x: 9, checked: false },
{ x: 4, checked: false } ]
----
[ { x: 5, checked: false },
{ x: 9, checked: false },
{ x: 4, checked: false } ]
----
[ { x: 5, checked: false },
{ x: 8, checked: false },
{ x: 4, checked: false } ]
----
[ { x: 5, checked: false },
{ x: 8, checked: false },
{ x: 9, checked: false } ]
---------array of arrays----
[ [ { x: 5, checked: false },
{ x: 8, checked: false },
{ x: 9, checked: false } ],
[ { x: 5, checked: false },
{ x: 8, checked: false },
{ x: 9, checked: false } ],
[ { x: 5, checked: false },
{ x: 8, checked: false },
{ x: 9, checked: false } ],
[ { x: 5, checked: false },
{ x: 8, checked: false },
{ x: 9, checked: false } ],
[ { x: 5, checked: false },
{ x: 8, checked: false },
{ x: 9, checked: false } ],
[ { x: 5, checked: false },
{ x: 8, checked: false },
{ x: 9, checked: false } ] ]
I would like to create an external button named 'Export to PDF' outside the highcharts and hide the default buttons "Export" & "Print" in highchart export options.
I am using localhost for my project and have to export the highcharts to PDF offline. I have created an example at jsfiddle below.
jsfiddle
$(function () {
window.chart = new Highcharts.Chart('container', {
chart: {marginLeft: 400},
title: {
text: 'Report',
x: 50,
y: 130,
margin: 150
}, plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
var val = this.y;
if (val < 1) {
return '';
}
return val;
},
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
}, exporting:{
enabled: false,
}, xAxis: {
categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
},
labels: {
items: [{
//html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4, 3, 2, 1, 3, 4, 3, 2, 1, 3, 4, 3, 2, 1, 3, 4, 3, 2, 1, 3, 4, 3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6, 2, 3, 5, 7, 6, 2, 3, 5, 7, 6, 2, 3, 5, 7, 6, 2, 3, 5, 7, 6, 2, 3, 5, 7, 6],
center: [0, 100],
}, {
type: 'pie',
name: 'Total Visit',
data: [{
name: 'Jane',
y: 13,
color: Highcharts.getOptions().colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: Highcharts.getOptions().colors[1] // John's color
}],
center: [-250, 250],
size: 150,
showInLegend: false,
dataLabels: {
enabled: true
}
}]
}, function (chart) {
chart.renderer.text('Total Visit', 120, 320)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
$('#export_PDF').click(function () {
chart.exportChart({
type: 'application/pdf',
sourceWidth: 1700,
sourceHeight: 600,
});
});
});
Can I know how to export the highcharts to PDF offline by clicking the external button that I have created?
If you need to have the pdf export to work offline, you need to setup the highcharts render on the server side.
Render charts on the server
Just edit your code for button on click with this,
$('#export_PDF').click(function () {
chart.exportChartLocal({
type: 'application/pdf',
sourceWidth: 1700,
sourceHeight: 600,
});
});
I need visualize the deference in plan and actual progress like any simple comparison line chart.
I wrote (Dojo Demo):
var plan = [
{ depth: 00, day: 0 },
{ depth: 50, day: 4 },
{ depth: 45, day: 11},
{ depth: 55, day: 16},
];
var actual = [
{ depth: 00, day: 0 },
{ depth: 55, day: 7 },
{ depth: 50, day: 11},
{ depth: 50, day: 13},
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "Progress Comparision"
},
series: [{
name:"Plan",
type: "line",
data:plan,
field: "depth",
categoryField: "day"
},
{
name:"Actual",
type: "line",
data:actual,
field: "depth",
categoryField: "day"
}],
categoryAxis: {
justified: true,
categories: [0,5,10,15,20]
}
});
}
I got this:
But I expect something similar to this:
Any Idea?
The type of series should be scatterLine not line: (Final Demo)
var plan = [
{ depth: 00, day: 0 },
{ depth: 50, day: 4 },
{ depth: 45, day: 11},
{ depth: 55, day: 16},
];
var actual = [
{ depth: 00, day: 0 },
{ depth: 55, day: 7 },
{ depth: 50, day: 11},
{ depth: 50, day: 13},
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "Progress Comparision"
},
series: [{
name:"Plan",
type: "scatterLine",
data:plan,
yField: "depth",
xField: "day"
},
{
name:"Actual",
type: "scatterLine",
data:actual,
yField: "depth",
xField: "day"
}],
xAxis: {
justified: true,
max: 20,
}
});
}
Hi I am currently developing a column high chart with a 3 level drill down however I am having bother naming the legend, I would like to have the legend displaying the data name however it is only displaying the series name at the moment.
Also I was having bother with the legend changing to the appropriately as it goes down through the different levels.
http://jsfiddle.net/amccormack10/tdy2x4dp/1/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Number of Students Enrolled & Withdrawn'
},
subtitle: {
text: 'Click the Columns to see Totals for each Level'
},
xAxis: {
type: 'category',
title: {
text: 'Students'
}
},
yAxis: {
title: {
text: 'Total Number of Students'
}
},
legend: {
enabled: true
//backgroundColor: '#FFFFFF',
//layout: 'vertical',
//floating: true,
//align: 'left',
//verticalAlign: 'top',
//x: 90,
//y: 60,
//shadow: true
},
series: [{
name: 'Overall Total of Students',
colorByPoint: true,
data: [{
name: 'Enrolled',
y: 44,
drilldown: 'LevelEnrolled'
}, {
name: 'Withdrawn',
y: 55,
drilldown: 'LevelWithdrawn'
}]
}],
drilldown: {
series: [{
name: 'Enrolled by Level',
colorByPoint: true,
id: 'LevelEnrolled',
data: [{
name: 'Level 1',
y: 23,
drilldown: 'Level1Enrolled'
}, {
name: 'Level 2',
y: 24,
drilldown: 'Level2Enrolled'
}, {
name: 'Level 3',
y: 11,
drilldown: 'Level3Enrolled'
}]
}, {
name: 'Withdrawn by Level',
colorByPoint: true,
id: 'LevelWithdrawn',
data: [{
name: 'Level 1',
y: 12,
drilldown: 'Level1Withdrawn'
}, {
name: 'Level 2',
y: 33,
drilldown: 'Level2Withdrawn'
}, {
name: 'Level 3',
y: 33,
drilldown: 'Level3Withdrawn'
}]
}, {
id: 'Level1Enrolled',
colorByPoint: true,
data: [
['CIT', 22],
['CS', 11],
['GD', 33],
['SD', 12],
['BIT', 34]
]
}, {
id: 'Level2Enrolled',
colorByPoint: true,
data: [
['CIT', 43],
['CS', 22],
['GD', 33],
['SD', 22],
['BIT', 22]
]
}, {
id: 'Level3Enrolled',
colorByPoint: true,
data: [
['CIT', 22],
['CS', 22],
['GD', 12],
['SD', 11],
['BIT', 23]
]
}, {
id: 'Level1Withdrawn',
colorByPoint: true,
data: [
['CIT', 23],
['CS', 11],
['GD', 2],
['SD', 1]
]
}, {
id: 'Level2Withdrawn',
colorByPoint: true,
data: [
['CIT', 3],
['CS', 2],
['GD', 4],
['SD', 7]
]
}, {
id: 'Level3Withdrawn',
colorByPoint: true,
data: [
['CIT', 3],
['CS', 4],
['GD', 5],
['SD', 8]
]
}]
}
});
});
Any help would be greatly appreciated.
Thanks