I'm looking for a way to check the name of the Hair layer within the constant below to see if the chosen layer's name is "First" and if so use a if statement before the Glasses layer is chosen to alter the alternative layers within Glasses that can be chosen from.
const NFT = {
stud: {
name: "Base",
layers: [
{
name: "Hair",
elements: [
{
id: 0,
name: "First",
path: `${dir}/1-hair/first.png`,
weight: 100,
},
{
id: 1,
name: "Second",
path: `${dir}/1-hair/second.png`,
weight: 80,
},
],
position: { x: 0, y: 0 },
size: { width: width, height: height },
},
{
name: "Glasses",
elements: [
{
id: 0,
name: "First",
path: `${dir}/2-glasses/first.png`,
weight: 100,
},
{
id: 1,
name: "Second",
path: `${dir}/2-glasses/second.png`,
weight: 20,
},
],
position: { x: 0, y: 0 },
size: { width: width, height: height },
},
],
},
};
Related
I need to reduce amount of x-axis labels because now you can see what is going on:
Is it possible to adjust the step on the x-axis? I didn't find it in the documentation. In my case, it automatically counts by 200, I would like to control this.
This is my data:
data = [
{
name: 'Email Invite',
value: 6200,
tooltip: 'Total raised by Email Invite: $6200'
},
{
name: 'Text Invite',
value: 1000,
},
{
name: 'Extra Features',
value: 1800,
},
{
name: 'Snap Store',
value: 2400,
},
{
name: 'Social Media',
value: 4100,
},
]
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
description: 'bar-chart',
"config": {
"style": {
"cell": {
stroke: "#E2E8F0"
}
}
},
data: {
"values": this.data
},
"mark": {"type": "bar", "cornerRadiusTopLeft": 8, "cornerRadiusTopRight": 8},
encoding: {
x: {
field: 'b',
type: 'quantitative',
axis: {
labels: true,
labelAngle: 0,
labelFontSize: 10,
labelColor: '#94A3B8',
ticks: false,
domain: false,
gridColor: "#E2E8F0",
labelPadding: 10,
},
scale: {
paddingInner: 0.2,
paddingOuter: 0.1
},
sort: { field: 'c' }
},
y: {
field: 'a',
type: 'nominal',
axis: {
labelFontSize: 10,
labelColor: '#94A3B8',
ticks: false,
domain: false,
gridColor: "#E2E8F0",
labelPadding: 16,
labelOffset: 3,
}
},
color: {field: 'c', scale: {range: [`#000`]}, legend: null},
tooltip: {field: 'd', type: 'ordinal'}
},
width: "container",
height: 250
};
Thanks in advance!
This is controlled by tick attributes.
You can set a "tickCount", "tickMinStep" or even the values themselves via "values".
https://vega.github.io/vega-lite/docs/axis.html#ticks
I have three collections (docs example struct see below :)
my mongodb version is 4.4
section
{
_id: ObjectId('62b131211331e0e9ba284187'),
name: 'name1',
},
{
_id: ObjectId('62b131211331e0e9ba284187'),
name: 'name2',
}
...
2.problems
{
_id: ObjectId('62b13d5f1331e0e9ba2841e6'),
title: 'title1',
score: 10,
section_id: ObjectId('62b131211331e0e9ba284188')
},
{
_id: ObjectId('62b13d5f1331e0e9ba2841e6'),
title: 'title2',
score: 20,
section_id: ObjectId('62b131211331e0e9ba284188')
},
{
_id: ObjectId('62b13d5f1331e0e9ba2841e6'),
title: 'title3',
score: 30,
section_id: ObjectId('62b131211331e0e9ba284188')
}
...
3.choices
{
_id: ObjectId('62b164ae1331e0e9ba284236'),
text: 'text1',
value: 0,
checked: false,
problem_id: ObjectId('62b13d5f1331e0e9ba2841ed')
},
{
_id: ObjectId('62b164ae1331e0e9ba284236'),
text: 'text2',
value: 0,
checked: false,
problem_id: ObjectId('62b13d5f1331e0e9ba2841ed')
},
{
_id: ObjectId('62b164ae1331e0e9ba284236'),
text: 'text3',
value: 0,
checked: false,
problem_id: ObjectId('62b13d5f1331e0e9ba2841ed')
},
...
the relationship of those collections
sections has many problems
problems has many choices
My question is :
Now I have an array of sections's id like below:
[
ObjectId('62b131211331e0e9ba284188'),
ObjectId('62b131211331e0e9ba28418a'),
ObjectId('62b131211331e0e9ba28418c')
]
I want to perform one query get the result like below:
[
{
_id: ObjectId('62b131211331e0e9ba284187'),
name: 'name1',
problems: [
{
_id: ObjectId('62b13d5f1331e0e9ba2841e6'),
title: 'title1',
score: 10,
section_id: ObjectId('62b131211331e0e9ba284188')，
choices: [
{}, // choice doc
]
},
{
_id: ObjectId('62b13d5f1331e0e9ba2841e6'),
title: 'title2',
score: 10,
section_id: ObjectId('62b131211331e0e9ba284188')，
choices: [
{}, // choice doc
]
},
...
]
},
{
_id: ObjectId('62b131211331e0e9ba284187'),
name: 'name1',
problems: [
{},
]
},
{
_id: ObjectId('62b131211331e0e9ba284187'),
name: 'name1',
problems: [
{}，
]
}
]
I have try run this query in my mongoexpress but it didn't work:
// match stage (ps: start with sections collection)
{
"_id": {
$in: [
ObjectId('62b131211331e0e9ba284188'),
ObjectId('62b131211331e0e9ba28418a'),
ObjectId('62b131211331e0e9ba28418c')
]
}
// lookup stage
{
from: 'problems',
let: {"sid": "$_id"},
pipeline: [
{
"$match": {
"$expr": {
"$eq": ["$section_id", "$$sid"]
},
},
},
{
"$lookup": {
from: "choices",
let: {"chid": "$_id"},
pipeline: [
{
"$match": {
"$expr": {},
},
},
],
as: "choices"
},
},
],
as: "problems"
}
I have some problem using apex charts in angular 9, essentially I'm able to see the chart (line chart) when I mock the data as in the first screenshot, but I can't get data from REST API, I mean the chart disappears.
mocked datas
This is the method containing the chart:
drawGraph(){
this.projectService.getLineChartData(this.getID()).then((data) =>{
for(let i = 0; i<data.resourceListSize; i++){
this.chartOptions = {
series: [
{
name: "data",
data: [28, 29, 33, 36, 32, 32, 33]
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
],
chart: {
height: 350,
type: "line",
dropShadow: {
enabled: true,
color: "#000",
top: 18,
left: 7,
blur: 10,
opacity: 0.2
},
toolbar: {
show: false
}
},
colors: ["#77B6EA", "#545454"],
dataLabels: {
enabled: true
},
stroke: {
curve: "smooth"
},
title: {
text: "Average High & Low Temperature",
align: "left"
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5
}
},
markers: {
size: 1
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
title: {
text: "Month"
}
},
yaxis: {
title: {
text: "Temperature"
},
min: 5,
max: 40
},
legend: {
position: "top",
horizontalAlign: "right",
floating: true,
offsetY: -25,
offsetX: -5
}
};
}
})
}
Any help would be appreciated! Thank you
Step 1,
set the configuration with out data like below(minimum configuration)
this.chartOptions = {
series: [],
chart: {
height: 350,
type: "line"
},
xaxis: {}
}
Step 2:
Data from api response and set to "chartoptions" variable,
this.chartOptions.series=[{
name: "data",
data: [28, 29, 33, 36, 32, 32, 33]
}, {
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13]
}
];
this.chartOptions.xaxis=
{
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
}
Hi I am using canvasjs for making a chart. It is very simple to make a particular chart but here is the problem I want to have two different charts such that a pie chart would be inside of a doughnut chart.
I am not able to make one other inside. I have used the
display : inline-block
for the two div id but no effect. Could someone please suggest me how we can make that happen.
This is my code-
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link type='text/css' rel="stylesheet" href='style.css' />
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "doughnut",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainerpie", {
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "pie",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div>
<div id="chartContainerpie" style="height: 300px; width: 100%;></div>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</div>
</body>
</html>
The CSS only contains the line for display block.
This is probably not the perfect answer but it will point you in right direction:
The idea is to change the background color of canvas to transparent and overlap the two canvas using position css
CSS
#chartContainerpie{
position: absolute;
top: 130px;
left: 0px;
}
#chartContainer{
position: absolute;
top: 0px;
left: 0px;
}
JS
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "My First Chart in CanvasJS"
},
backgroundColor: "transparent",
data: [{
// Change type to "doughnut", "line", "splineArea", etc.
type: "doughnut",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
var chart = new CanvasJS.Chart("chartContainerpie", {
backgroundColor: "transparent",
data: [{
// Change type to "doughnut", "line", "splineArea", etc.
indexLabelPlacement: "inside",
indexLabelFontColor: "white",
indexLabelFontSize: "14px",
type: "pie",
dataPoints: [{
label: "apple",
y: 10
}, {
label: "orange",
y: 15
}, {
label: "banana",
y: 25
}, {
label: "mango",
y: 30
}, {
label: "grape",
y: 28
}]
}]
});
chart.render();
Here is fiddle
I'm currently creating a system that produces different kind of graphs. I want to create a chart and table, that when a chart is DRILLDOWNED, the table will sync as well. Is there a way to output the current data presented by HighCharts to JSON? Then this JSON will be inputted into a datatable? Thanks!
check this JsFiddle Demo
You can obtain the id by e.seriesOptions.id which is the key to your data. Then you can use this id as the key to get appropriate data and update your data table from within the drillUp and drillDown events.
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS
$(function() {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drillup: function(e) {
//alert('drill Up');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
},
drilldown: function(e) {
//alert('drill Down');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
}
}
},
title: {
text: 'DrillUp button styling'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Dieren',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruit',
y: 2,
drilldown: 'fruits'
}, {
name: "Auto's",
y: 4
}]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
},
series: [{
id: 'animals',
data: [
['Katten', 4],
['Honden', 2],
['Koeien', 1],
['Schapen', 2],
['Varkens', 1]
]
}, {
id: 'fruits',
data: [
['Appels', 4],
['Sinaasappels', 2]
]
}]
}
})
});