Develop Reference

Using onclick event, how to match name with multiple status by drawing lines in Vuejs?

new Vue({
el: "#app",
data: {
getQuestionAnswers: [
{
name: 'foo',
checked: false,
status: 'ok'
},
{
name: 'bar',
checked: false,
status: 'notok'
},
{
name: 'baz',
checked: false,
status: 'medium'
},
{
name: 'oo',
checked: false,
status: 'medium'
}
]
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
width:100%
}
.red {
color: red;
}
.bcom {
width: 100%;
display: flex;
}
.container1 {
width: 50px;
}
.container2 {
width: calc(100% - 105px);
padding: 8px 0;
height: 30px;
box-sizing: border-box;
}
.h-line {
height: 1px;
margin-bottom: 18px;
width: 100%;
background-color: black;
}
.container3{
margin-left: 5px;
width: 50px;
}
.point:hover {
width: 200px;
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<div class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div>
<input type="checkbox" v-model="group.checked"/>
{{ group.name }}
</div>
<div class="container2">
<div class="h-line" v-if="group.checked"></div>
</div>
<div>
<input type="checkbox"/>
{{ group.status }}
</div>
</div>
</div>
Onclick of checkbox, how to add multiple lines from one point in Vuejs?
As seen in the image, On click of the checkbox, Based on the status, I need to match from one point to three multiple status. like "ok, notok, medium"
i have taken v-model in the checkbox,to check and perfome two way data binding But not sure....what to do further. Do I need to take computed property and write condition to check and draw three multiple lines???

there are som positioning issues here, but this sample should be enough for you to get it working:
template
<div id="demo" :ref="'plane'">
<canvas :ref="'canvas'"></canvas>
<div
class="bcom"
v-for="(group, index) in getQuestionAnswers"
:key="index + group.name"
:group="group"
>
<div>
<input
type="checkbox"
v-on:click="() => onToggleCheckbox(group)"
v-model="group.checked"
:ref="'checkbox_' + group.name"
/>
<span>{{ group.name }}</span>
</div>
<div>
<span>{{ group.status }}</span>
<input type="checkbox" :ref="'status_' + group.name" />
</div>
</div>
</div>
script:
export default {
name: 'App',
data: () => ({
ctx: undefined,
draw(begin, end, stroke = 'black', width = 1) {
if (!this.ctx) {
const canvas = this.$refs['canvas'];
if (!canvas?.getContext) return;
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
this.ctx = canvas.getContext('2d');
}
if (stroke) {
this.ctx.strokeStyle = stroke;
}
if (width) {
this.ctx.lineWidth = width;
}
this.ctx.beginPath();
this.ctx.moveTo(...begin);
this.ctx.lineTo(...end);
this.ctx.stroke();
},
onToggleCheckbox(group) {
const planeEl = this.$refs['plane'];
const planeRect = planeEl.getBoundingClientRect();
const fromEl = this.$refs['checkbox_' + group.name];
const fromRect = fromEl.getBoundingClientRect();
const from = {
x: fromRect.right - planeRect.left,
y: fromRect.top + fromRect.height / 2 - planeRect.top,
};
const toEl = this.$refs['status_' + group.name];
const toRect = toEl.getBoundingClientRect();
const to = {
x: toRect.left - planeRect.left,
y: toRect.top + toRect.height / 2 - planeRect.top,
};
console.log(planeRect, from, to);
this.draw(
Object.values(from),
Object.values(to),
group.checked ? 'white' : 'black',
group.checked ? 3 : 2
);
},
getQuestionAnswers: [
{
name: 'foo',
checked: false,
status: 'ok',
},
{
name: 'bar',
checked: false,
status: 'notok',
},
{
name: 'baz',
checked: false,
status: 'medium',
},
{
name: 'oo',
checked: false,
status: 'medium',
},
],
}),
};
style
body {
background: #20262e;
padding: 20px;
font-family: Helvetica;
}
#demo {
position: relative;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
canvas {
position: absolute;
background: red;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #fff;
z-index: -1;
}
.bcom {
width: 100%;
display: flex;
justify-content: space-between;
z-index: 2;
}
this only draws one line but you could easily add the others. I figured you might change your data schema to something like:
getQuestions() {
{
name: string,
checked: boolean,
statuses: [string...],
},
getStatuses() {
{
name: string
}
but not knowing about your requirements here, I decided to post the above before making further changes. (here is the sort of refactor I was referring to: https://stackblitz.com/edit/vue-yuvsxa )
addressing first comment:
in app.vue only there is one data called[((questions))], inside question we are looping and setting the status.
this is easy to address with a bit of preprocessing:
questionsAndStatusesMixed: // such as [{...question, ...statuses}],
questions: [],
statuses: [],
mounted() {
const statusesSet = new Set()
this.questionsAndStatusesMixed.forEach(item => {
const question = {
name: item.name,
checked: item.checked,
answer: item.status // is this the answer or .. these never made sense to me,
statuses: this.statuses // assuming each question should admit all statuses/that is, draw a line to each
}
const status = {
name: item.name
}
this.questions.push(question)
statusesSet.add(status)
})
Array.from(statusesSet).forEach(item => this.statuses.push(item))
}

AngularJS Filter: Checkbox active by default based on attribute value

I am working on a prototype that uses AngularJS to filter JSON data. A working sandbox is here:
https://codepen.io/ixdarchitects/pen/BaypxrW
I need your help to solve 2 Problems:
How to use the "Check All" and "Uncheck All" button to activate/deactivate all of the checkbox filters?
Filter by default: How to make the webpage only show gray bird when the page is initialized?
Thank you
Image
HTML:
<div ng-app="petSelector" ng-controller="PetCtrl" class="wrapper">
<h1>Pet Picker!</h1>
<hr>
<h3>Problems to solve:</h3>
<ol>
<li>How to use the "Check All" and "Uncheck All" button to activate/deactivate all of the checkbox filters?</li>
<li>Filter by default: How to make the webpage only show gray bird when the page is initialized?</li>
</ol>
<hr>
<div class="attr" ng-repeat="(prop, ignoredValue) in pets[0].FilterAttributes" ng-init="filter[prop]={}" ng-class="prop">
<b>{{prop}}:</b><br />
<span class="checkbox" ng-repeat="opt in getOptionsFor(prop)">
<label><input type="checkbox" ng-model="filter[prop][opt]" /> {{opt}}</label>
</span>
</div>
<button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
<button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
<div class="results">Number of results: {{filtered.length}}</div>
<div class="pet" ng-repeat="p in filtered=(pets | filter:filterByProp | orderBy:order)">
<img ng-src="{{p.img}}">
<p>{{p.name}}</p>
</div>
<div ng-if="filtered.length == 0">Sorry, nothing matches your selection</div>
</div>
JS:
var petSelector = angular.module("petSelector", []);
petSelector.controller("PetCtrl", [
"$scope",
function($scope) {
$scope.pets = [
{
name: "Finch",
FilterAttributes: { species: "bird", size: "x-small", color: "red" },
img:
"http://upload.wikimedia.org/wikipedia/commons/7/7c/Fringilla_coelebs_chaffinch_male_edit2.jpg"
},
{
name: "Cockatiel",
FilterAttributes: { species: "bird", size: "small", color: "yellow" },
img: "http://upload.wikimedia.org/wikipedia/commons/0/07/Captive.jpg"
},
{
name: "African Gray Parrot",
FilterAttributes: { species: "bird", size: "large", color: "gray" },
img:
"http://upload.wikimedia.org/wikipedia/commons/2/28/Psittacus_erithacus_-perching_on_tray-8d.jpg"
},
{
name: "Macaw",
FilterAttributes: { species: "bird", size: "x-large", color: "blue" },
img:
"http://upload.wikimedia.org/wikipedia/commons/0/00/Macaw.blueyellow.arp.750pix.jpg"
},
{
name: "Shih Tzu",
FilterAttributes: { species: "dog", size: "x-small", color: "multi" },
img: "http://upload.wikimedia.org/wikipedia/commons/3/30/Shih-Tzu.JPG"
},
{
name: "Border Collie",
FilterAttributes: { species: "dog", size: "small", color: "multi" },
img:
"http://upload.wikimedia.org/wikipedia/commons/b/b1/Border_Collie_liver_portrait.jpg"
},
{
name: "American Staffordshire Terrier",
FilterAttributes: { species: "dog", size: "large", color: "gray" },
img: "http://upload.wikimedia.org/wikipedia/commons/d/de/AmStaff2.jpg"
},
{
name: "Bullmastiff",
FilterAttributes: { species: "dog", size: "x-large", color: "brown" },
img:
"http://upload.wikimedia.org/wikipedia/commons/9/9e/Bullmastiff_Junghund_1_Jahr.jpg"
}
];
$scope.filter = {};
$scope.getOptionsFor = function(propName) {
return ($scope.pets || [])
.map(function(p) {
return p.FilterAttributes[propName];
})
.filter(function(p, idx, arr) {
return arr.indexOf(p) === idx;
});
};
$scope.filterByProp = function(pets) {
var matchesAND = true;
for (var prop in $scope.filter) {
if (noSubFilter($scope.filter[prop])) continue;
if (!$scope.filter[prop][pets.FilterAttributes[prop]]) {
matchesAND = false;
break;
}
}
return matchesAND;
};
function noSubFilter(subFilterObj) {
for (var key in subFilterObj) {
if (subFilterObj[key]) return false;
}
return true;
}
}
]);
CSS
* {
box-sizing: border-box;
}
body {
font-family: 'Helvetica', arial, sans-sarif;
color: #fff;
}
h1 {
color: #fff;
margin: 0;
}
p {
margin-top: 0;
}
b {
color: #fff;
text-transform: uppercase;
}
.wrapper {
width: 800px;
margin: 20px auto;
padding: 40px;
background: #00a5bb;
border-radius: 8px;
}
.attr {
width: 32%;
margin: 0 .5%;
padding: 20px;
display: inline-block;
vertical-align: top;
}
.checkbox {
width: 49%;
display: inline-block;
margin: 10px 0 0;
}
.results {
font-size: 12px;
margin: 10px 0 20px;
padding-bottom: 10px;
border-bottom: 1px solid white;
}
.pet {
margin-bottom: 10px;
display: inline-block;
width: 33%;
text-align: center;
}
.pet img {
max-width: 85%;
max-height: 200px;
}
.pet.ng-enter, .pet.ng-leave {
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.pet .ng-enter {
opacity: 0;
}
.pet.ng-enter-active {
opacity: 1;
height: auto;
}
.pet.ng-leave-active {
opacity: 0;
height: 0;
}

I achieve what you are asking for adding the following two $scope functions.
$scope.checkAll iterates all pets FilteredAttributes and their values and set them at true into $scopeFilter.
$scope.uncheckAll simply reset the $scopeFilter object.
For the default filter, I removed ng-init="filter[prop]={}" to initiliaze $scopeFilter in the .js file as follows :
$scope.filter = {species : {bird : true} , color : {gray: true}};
$scope.checkAll = function(){
const result = {};
$scope.pets.map(pet => pet.FilterAttributes)
.forEach( attribute => Object.keys(attribute)
.forEach( prop => {
if(result[prop]){
result[prop][attribute[prop]] = true
}
else
{
result[prop] = {};
result[prop][attribute[prop]] = true
}
})
);
$scope.filter = result;
};
$scope.uncheckAll = function(){
$scope.filter = {}
};
You can find the solution here https://codepen.io/dmnized/pen/povRQOE?editors=1010

Javascript tabs, Adding active class to element

I want to add active class to the one element and remove that class from all other 'article' elements, hide them. Just normal javascript tabs.
I'm new in JS and can't resolve this problem.
Here is my Fiddle: https://jsfiddle.net/a8bvp0fn/
SOLVED: https://jsfiddle.net/y8sa3e0c/
thx
<style>
.article-1, .article-2, .article-3 {
width: 100px;
height: 200px;
display: none;
}
.article-1 {
background: red;
}
.article-2 {
background: green;
}
.article-3 {
background: blue;
}
.active {
display: inline-block;
}
</style>
<h2 class="output" data-tab="1">BUTTON 1</h2>
<h2 class="output" data-tab="2">BUTTON 2</h2>
<h2 class="output" data-tab="3">BUTTON 3</h2>
<div class="article-1"></div>
<div class="article-2"></div>
<div class="article-3"></div>
<script>
var output = document.querySelectorAll('.output');
output.forEach(function(item) {
item.onclick = function(){
var datas = this.dataset.tab;
var elem = document.querySelector('.article-' + datas);
elem.classList.toggle('active');
}
});
</script>

var output = document.querySelectorAll('.output');
output.forEach(function(item) {
item.onclick = function() {
var datas = this.dataset.tab;
var elem = document.querySelector('.article-' + datas);
let AllElems = document.querySelector('.active');
if (AllElems) {
AllElems.classList.remove('active');
}
elem.classList.add("active");
}
});
.article-1,
.article-2,
.article-3 {
width: 100px;
height: 200px;
display: none;
}
.article-1 {
background: red;
}
.article-2 {
background: green;
}
.article-3 {
background: blue;
}
.active {
display: inline-block;
}
<h2 class="output" data-tab="1">BUTTON 1</h2>
<h2 class="output" data-tab="2">BUTTON 2</h2>
<h2 class="output" data-tab="3">BUTTON 3</h2>
<div class="article-1"></div>
<div class="article-2"></div>
<div class="article-3"></div>

One solution would be to get all the article elements with:
var articles = document.getElementsByClassName('article');
And then in the onclick method, remove the active class from all articles other than the one you clicked:
for (let i = 0; i< articles.length; i++) {
if (articles[i] !== elem) {
articles[i].classList.remove('active');
} else {
articles[i].classList.toggle('active');
}
}

var output = document.querySelectorAll('.output');
function hideAll(){
//Function to hide all active divs
var allActive = document.querySelectorAll('.active');
allActive.forEach(function(item) {
item.classList.remove('active')
})
}
output.forEach(function(item) {
//Adding click listener on articles
item.onclick = function(){
var datas = this.dataset.tab;
var elem = document.querySelector('.article-' + datas);
if(elem.classList.contains('active')){
//If already active remove
elem.classList.remove('active')
}
else{
//If not already active, before add active remove all
hideAll()
elem.classList.add('active')
}
}
});
.article-1, .article-2, .article-3 {
width: 100px;
height: 200px;
display: none;
}
.article-1 {
background: red;
}
.article-2 {
background: green;
}
.article-3 {
background: blue;
}
.active {
display: inline-block;
}
<h2 class="output" data-tab="1">BUTTON 1</h2>
<h2 class="output" data-tab="2">BUTTON 2</h2>
<h2 class="output" data-tab="3">BUTTON 3</h2>
<div class=" article-1"></div>
<div class=" article-2"></div>
<div class=" article-3"></div>

Easiest solution: Just remove the class for all elements, then add like you did.
var output = document.querySelectorAll('.output');
output.forEach(function(item)
{
item.onclick = function()
{
var datas = this.dataset.tab;
// ---------------- so just add this bit..
var alltabs=document.getElementsByTagName("div");
for(var i=0;i<alltabs.length;i++)
{
alltabs[i].classList.remove('active');
}
// ---------------- and then go on like you did.. (only don't toggle, just add)
var elem = document.querySelector('.article-' + datas);
elem.classList.add('active');
}
});

Move highcharts legend outside of chart container

I am trying to move highcharts legend to outside of charts container, When I have surfed for the options I got this link https://forum.highcharts.com/highstock-usage/legend-placement-outside-of-chart-area-t28582/, Is is possible to make a legend on callback, Or any other options to move the legend outside?

You can also do it with just few CSS these parameters legend.x and legend.y - API Doc
CSS
body{
background-color:#ddd;
padding:100px;
}
.highcharts-container, .highcharts-container > svg{
overflow:visible !important;
}
Javascript
...
legend:{
verticalAlign:'top',
x:-300,
y:-100
},
...
Fiddle

You can use chart.events.load event function to create the legend after chart loading. It shouldn't be problematic, but here is a little prototype, which shows how it could be achieved:
Highcharts.chart('container', {
chart: {
events: {
load() {
var seriesOneBtn = document.getElementById('s1')
var seriesTwoBtn = document.getElementById('s2')
var chart = this
var seriesOne = chart.series[0]
var seriesTwo = chart.series[1]
seriesOneBtn.onclick = function() {
seriesOne[seriesOne.visible ? 'hide' : 'show']()
}
seriesTwoBtn.onclick = function() {
seriesTwo[seriesTwo.visible ? 'hide' : 'show']()
}
}
}
},
legend: {
enabled: false
},
series: [{
data: [1,2,3]
}, {
data: [3,2,1]
}]
})
#container {
width: 100%;
height: 400px;
border: 1px solid tomato;
}
#legend {
width: 150px;
margin: 0 auto;
border: 1px solid tomato
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<div id="legend">
<button id="s1">Series 1</button>
<button id="s2">Series 2</button>
</div>
API Reference: https://api.highcharts.com/highcharts/chart.events.load
Kind regards!

updating a div tag that pulls data from another site, I want that div to auto-refresh without having to reload the page

I want to update getPrice($url) function every 1sec without manual
page refresh
<?php
ini_set('display_errors', '1');
This function getPrice($url) currently refreshes only when i refresh page manually.
function getPrice($url)
{
$decode = file_get_contents($url);
return json_decode($decode, true);
}
$btcUSD = getPrice('https://btc-e.com/api/2/btc_usd/ticker');
$btcPrice = $btcUSD ["ticker"]["last"];
$btcDisplay = round($btcPrice, 2);
?>
HTML code begins here.
<html>
<title>Coin-Co. | Welcome!</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<style>
h1
{
font-family: "Calibri", Arial, sans-serif;
font-size: 80px;
}
This is the div for function getPrice($url)
#container
{
font-family: "Calibri", Arial, sans-serif;
font-size: 60px;
border: 3.8px solid #666666;
border-radius: 5px;
height: 75px;
width: 425px;
}
#containerConvert
{
font-family: "Calibri", Arial, sans-serif;
font-size: 38px;
border: 2.9px solid #666666;
border-radius: 5px;
height: 63px;
width: 497px;
}
#bi , #ci
{
font-family: "Calibri", Arial, sans-serif;
font-size: 21px;
border: 2.9px solid #999999;
border-radius: 1.75px;
height: 48.7px;
width: 148px;
}
</style>
</head>
<body>
<script>
var chart;
function requestData() {
$.ajax({
url: 'live_btce.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'containerChart',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live feed BTCe 5second-Chart'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'USD',
margin: 80
}
},
series: [{
name: 'BTC->USD',
data: []
}]
});
});
</script>
<center>
<h1><em>BTC|USD</em></h1>
<div id="container"><?php echo $btcDisplay; ?></div></br>
<script>
function btcConvert(input)
{if (isNaN(input.value))
{
input.value = 0;
}
var price = "<?php echo $btcDisplay; ?>";
var output = input.value * price;
var co = document.getElementById('ci');
ci.value = output.toFixed(2);
}
function usdConvert(input)
{if (isNaN(input.value))
{
input.value = 0;
}
var price2 = "<?php echo $btcDisplay; ?>";
var output2 = input.value / price2;
var co2 = document.getElementById('bi');
bi.value = output2.toFixed(8);
}
</script>
<div id="containerConvert">
<input type="text" name="bi" id="bi" onchange="btcConvert(this);" onkeyup="btcConvert(this);" /> BTC =
<input type="text" name="ci" id="ci" onchange="usdConvert(this);" onkeyup="usdConvert(this);" /> USD
</div>
<div id="containerChart" style="width:100%; height:400px;"></div>
</body>
</html>

At the end of your php code you are missing
echo $btcDisplay;
and before adding point in javascript parse it as float
// add the point
point = parseFloat(point);
chart.series[0].addPoint(point, true, shift);