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!
Related
I want to create a popout menu that is flush with the edge of the screen. It seems like popper doesn't like this because it always forces a margin of 5px. I've tried setting offset and padding values to 0, but it doesn't seem to work. Is there a way to do this without forcing it like
margin-left: -5px !important
Here are the tippy options ive included and a JSFiddle:
https://jsfiddle.net/tbgwknpf/1/
<div class="button">
click me!
<div id="menu-content">
this is a tippy!
</div>
</div>
</div>
body {
margin: 0;
}
.bar {
height: 100px;
width: 100%;
background: coral;
}
.button {
background: aquamarine;
height: 100%;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
}
const menu = document.getElementById("menu-content");
menu.style.display = 'block';
tippy('.button',
{
content: menu,
allowHTML: true,
interactive: true,
trigger: 'click',
hideOnClick: 'toggle',
placement: 'bottom-start',
offset: [0, 0],
popperOptions: {
modifiers: [
{
name: 'offset',
options: {
offset: [0, 0]
}
},
{
name: 'flip',
options: {
padding: 0,
flipVariations: false
}
}
]
},
});
If I add a margin to the button element, the tippy will align flush against the edge like I want it to. It is only when I ask it to be flush against the screen that it adds the translationX of 5px
You can do it using a theme.
JS:
tippy(targets, {
theme: "your-theme",
});
CSS:
.tippy-box[data-theme~="your-theme"] .tippy-content {
padding: 0;
}
Note the extra .tippy-content as the padding is in the child of .tippy-box.
You don't have to change any CSS styles. You just need to pass the right options to the underlying Popper.js:
popperOptions: {
modifiers: [
{
name: 'preventOverflow',
options: {
padding: 0,
},
},
],
},
I'm trying to apply a background-color to a column from a grid in ExtJS here es my code, and I applied sencha app watch so I everything loads, but i keep getting no stiles applied what so ever, what i noticed in th
Ext.define('Ris.academic.student.situation.SituationColumn', {
extend: 'Ext.grid.column.Column',
xtype: 'studentsituationcolumn',
text: 'Situaciones',
dataIndex: 'situations',
renderer(situations) {
let tags = [];
(situations || []).forEach(situation => {
tags.push(
`<div class="student-situation-tag" style="background-color: ${situation.color}">
${situation.text}
</div>`
);
});
return tags.join('');
}
});
and this is the SCSS:
.x-grid-cell-inner {
.student-situation-tag {
display: flex;
font-size: smaller;
font-weight: bold;
color: #fff;
padding: 0 3pt;
border-radius: 3px;
text-align: center;
&:not(:first-child) {
margin-left: 2px;
}
}
}
.male-row .x-grid-cell {
background-color: lightblue; !important;
}
.female-row .x-grid-cell {
background-color: lightpink; !important;
}
You attach style without settings of viewConfig.
I suppose you have something like getRowClass:
viewConfig: {
getRowClass: function (record) {
return record.get('gender') == 'm' ? 'male-row' : 'female-row';
}
},
in your grid configuration.
Look at example on fiddle : https://fiddle.sencha.com/#fiddle/35vs
I don't see any problems there (i used css instead of scss because of fiddle).
I have a piece of code where I have two buttons and when I press one button I want a div to flip on the y-axis and when I press the other button I want the same div to flip on the x-axis. this works just fine when I use the button for the y-axis even if the previous flip was on the x-axis. But when I want to switch from the y-axis to the x-axis I need to press the x button twice because the first time nothing happens.
So desired behavior is:
click y button flip the div on the y-axis.
click x button flip the div on the x-axis.
current behavior is:
click y button div flips on the y-axis.
click x button nothing happens
click x button again div flips on the x-axis.
I have no idea what the problem is, this is the best i got so far.
All help is appreciated.
var ax = 'x';
$(document).ready(function() {
$('#card').flip({
trigger: 'manual',
axis: 'x'
});
$('#left').click(function() {
if (ax != 'y') {
$("#card").flip({
axis: 'y'
});
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
ax = 'y';
} else {
$("#card").flip('toggle');
}
});
$('#right').click(function() {
if (ax != 'x') {
$("#card").flip({
axis: 'x'
});
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
ax = 'x';
} else {
$("#card").flip('toggle');
}
});
});
#card {
position: fixed;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
}
.front {
width: 100%;
height: 100%;
background-color: red;
}
.back {
width: 100%;
height: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>
You over-complicated the problem. Here is a solution inspired by the documentation. All you have to do is to call flip to change the axis on click on he buttons, and to listen on flip:change event which is fired every time you call flip to change the orientation in order to actually flip it.
// Configure it to be manually flipped
$("#card").flip({
trigger: 'manual'
});
// Change the axis
$('#left').click(function() {
$("#card").flip({
axis: 'y'
});
});
$('#right').click(function() {
$("#card").flip({
axis: 'x'
});
});
// Toggle it on change
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
#card {
position: fixed;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
}
.front {
width: 100%;
height: 100%;
background-color: red;
}
.back {
width: 100%;
height: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>
Here you go with a solution
var ax = 'x';
$(document).ready(function() {
$('#card').flip({
trigger: 'manual',
axis: 'x'
});
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
$('#left').click(function() {
if (ax != 'y') {
$("#card").flip({
axis: 'y'
});
ax = 'y';
} else {
$("#card").flip('toggle');
}
});
$('#right').click(function() {
if (ax != 'x') {
$("#card").flip({
axis: 'x'
});
ax = 'x';
} else {
$("#card").flip('toggle');
}
});
});
#card {
position: fixed;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
}
.front {
width: 100%;
height: 100%;
background-color: red;
}
.back {
width: 100%;
height: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>
You should keep the flip:change outside the click event.
Hope this will help you.
You ended up binding the flip:change event multiple times with each click. That caused x to flip twice when clicked after Y was clicked twice. Hence it looks like nothing is happening.
You can see that happening when adding a debugger; at the start of $('#right').click(function() { and using the console to debug your code.
Anyway, adding the event binding ones only fixes it as that is all you need.
Removing all instance of $("#card").on('flip:change', function() { in your code and only adding it one time, fixes the problem.
In this example I added it at the bottom of your code.
var ax = 'y';
$(document).ready(function() {
$('#card').flip({
trigger: 'manual',
axis: 'y'
});
$('#left').click(function() {
//debugger;
if (ax != 'y') {
$("#card").flip({
axis: 'y'
});
ax = 'y';
} else {
$("#card").flip('toggle');
}
});
$('#right').click(function() {
//debugger;
if (ax != 'x') {
$("#card").flip({
axis: 'x'
});
ax = 'x';
} else {
$("#card").flip('toggle');
}
});
// Only bind ones.
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
});
#card {
position: fixed;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
}
.front {
width: 100%;
height: 100%;
background-color: red;
}
.back {
width: 100%;
height: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>
I have the following lines of code on my webpage - example/demo.
HTML:
<div class="btn-area">
<button onclick="myfunction1()">Button 1</button>
<p id="btn1-output">0</p>
<button onclick="myfunction2()">Button 2</button>
<p id="btn2-output">0</p>
<button onclick="myfunction3()">Button 3</button>
<p id="btn3-output">0</p>
</div>
<div class="q11">
<div class="question">
<div id="canvas-holder" style="width: 250px; height: 250px; margin: 0 auto;">
<canvas id="chart-area" width="250" height="250" />
</div>
</div>
</div>
CSS:
body {
background: #1F253D;
color: #FFF;
padding: 20px;
}
button {
background: #000;
border: none;
}
.btn-area {
float: left;
width: 20%;
}
.btn-area button,
.btn-area p {
display: inline;
}
.q11 {
float: left;
text-align: center;
width: 50%;
}
JavaScript:
var doughnutData = [{
value: 1,
color: "#E64C65",
highlight: "#E64C65",
label: "Button 1"
}, {
value: 1,
color: "#11A8AB",
highlight: "#11A8AB",
label: "Button 2"
}, {
value: 1,
color: "#FCB150",
highlight: "#FCB150",
label: "Button 3"
}];
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true
});
};
var btn1Calls = 0;
var btn2Calls = 0;
var btn3Calls = 0;
function myfunction1() {
btn1Calls++;
document.getElementById('btn1-output').innerHTML = btn1Calls;
}
function myfunction2() {
btn2Calls++;
document.getElementById('btn2-output').innerHTML = btn2Calls;
}
function myfunction3() {
btn3Calls++;
document.getElementById('btn3-output').innerHTML = btn3Calls;
}
I am currently using this library to display the information in a doughnut-shaped chart.
How can I make it so that the counter on the buttons will automatically update the charts percentage and if possible, could you please provide an example using a forked version of the demo?
Could you check this link if it's what you want?
I updated the functions like this:
function myfunction1() {
btn1Calls++;
document.getElementById('btn1-output').innerHTML = btn1Calls;
doughnutData[0].value++;
myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true
});
}
function myfunction2() {
btn2Calls++;
document.getElementById('btn2-output').innerHTML = btn2Calls;
doughnutData[1].value++;
myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true
});
}
function myfunction3() {
btn3Calls++;
document.getElementById('btn3-output').innerHTML = btn3Calls;
doughnutData[2].value++;
myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
responsive: true
});
}
http://codepen.io/anon/pen/BNPNeP
i am having a hard time trying to animate this box, so the changes go smooth, but i just cannot figure out how to keep everything together. Help would be really appreciated. (already tried with 'switchClass') Here is the whole code:
<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<style>
#box {
position: relative;
margin: auto;
padding: auto;
display: block;
width: 167px;
height: 167px;
}
#box .item {
position: relative;
margin: 0;
display: block;
width: 100%;
height: 33%;
cursor: pointer;
}
#box .over {
height: 84%;
}
#box .other {
height: 8%;
}
#top {
background: red;
}
#mid {
background: green;
}
#bot {
background: blue;
}
</style>
<script>
function anim(item) {
$('.item').attr('class', 'item other');
$('#' + item.id).attr('class', 'item over');
}
function clean() {
$('.item').attr('class', 'item');
}
</script>
<div id='box' onmouseout="clean()">
<div id='top' class='item' onmouseover='anim(this)'></div>
<div id='mid' class='item' onmouseover='anim(this)'></div>
<div id='bot' class='item' onmouseover='anim(this)'></div>
</div>
edit: this code is running just fine, but its just an example of final output (just some animations needed)
Maybe this is not super cool, but seems to do job:
var $items = $('.item').on({
mouseover: function () {
$items.removeClass('over other');
$items.stop().filter(this).animate({height: '84%'}, function () {
$(this).addClass('over');
})
.end().not(this).animate({height: '8%'}, function () {
$(this).addClass('other');
});
},
reset: function() {
$items.removeClass('over other').stop().animate({height: '33%'});
}
});
$('#box').mouseout(function() {
$items.trigger('reset');
});
http://jsfiddle.net/dfsq/4vnkh/1/
If you want to animate the change, please take a look at jQuery animate
Something like this:
$('.item').mouseenter(function() {
$('.item').animate({
height: 80%
}, 500, function() {
// Animation complete.
});
});
$('.item').mouseleave(function() {
$('.item').animate({
height: 33%
}, 500, function() {
// Animation complete.
});
});
in this case you don't need onmouseout or onmouseover
If your animation is based solely on CSS class attributes why not use CSS3 hover pseudo-selector?
Example:
.box {
width: 200px;
}
.box:hover {
width: 400px;
}
<div class="box">Hover over me!</div>
Additional: Response to comments
If you are looking for custom animation duration you can use a callback function with a duration for the initial function call. Here's an example:
$('#div').animate({
width: '200px',
color: 'blue'
}, 5000, function() {
// Animation finished after 5 seconds.
alert("Animation complete!");
});
Addition #2
Your problem child is this little guy:
$('.item').attr('class', 'item other');
This sets each box to 8% height and THEN expands the primary animating box. Remove this and your #box will remain the same height throughout all animations!