I'm using Chartist.js in order to create a few doughnut charts. So far it's been pretty straightforward and easy to use, but I've been trying to create a border around the shapes for the last three hours (needless to say I'm unable to use the SVG stroke property since the plugin itself uses the stroke to create the donut effect).
Is there an in-plugin option to give the chart a border?
The way I'm creating the doughnut is really simple:
new Chartist.Pie('.donut-chart', {
series: [37.47, 62.53],
}, {
donut: true,
donutWidth: 8,
startAngle: 0,
total: 100,
showLabel: false
});
Of course any kind of help will be much appreciated!
EDIT: I've also tried using cdcarson's fork of the plugin (Pull request pending at https://github.com/gionkunz/chartist-js/pull/330) to generate the chart using filled shapes instead of strokes, but something seems to be broken
I "solved" it using a pie chart instead of a doughnut one, and adding strokes to the shapes. After that I created a function to append a cover for the fill:
function hideFillOfPie() {
$('.donut-chart').append('<div class="cover-fill"></div>');
var size = $('.donut-chart-holder').width();
$('.cover-fill').css({
'height' : size - 30 + 'px',
'width' : size - 30 + 'px'
});
}
$(document).ready(function() {
hideFillOfPie();
});
The parent of the chart must have set
position: relative;
And the CSS for the cover of the fill looks like this:
.cover-fill {
position: absolute;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
background-color: white;
border-radius: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
z-index: 1;
}
Related
I'm experimenting with the web animations API for the first time, and trying to chain some values together. I'm a little confused as for this simple animation, where it will translate 200px along the X axis, then 200px down along the Y axis once the first animation is complete.
However, at the end of the animation, it resets the X value of the initial animation. I've tried playing around with 'both' | 'forwards' for the fill mode property, as well as setting translateX to 0/200 in the second transform declaration. Feel like I'm missing something quite simple here.
const box = document.getElementById('box');
const animateRight = box.animate(
[{ transform: 'translateX(0)' }, { transform: 'translateX(200px)' }],
{
fill: 'forwards',
easing: 'ease-in-out',
duration: 2000,
}
);
animateRight.finished.then(() => {
box.animate([{ transform: 'translateY(0)' }, { transform: 'translateY(100px)' }], {
composite: 'add',
fill: 'both',
duration: 1500,
});
});
#box {
width: 100px;
height: 100px;
border: 1px solid black;
}
<div id="box"></div>
I am using OL-layerswitcher (https://github.com/walkermatt/ol-layerswitcher) to produce a sidebar with my layers and add them to the map when clicking. Unfortunately, this might take some time depending on the internet connection, etc. and thus I would like to add an icon showing that something is happening while it is loading.
I managed to create a div in the middle of my screen showing the icon I want to show but I am not able to check if something is still loading or not.
Since I am using the layerswitcher, my layers are not clearly defined as variables (like in https://openlayers.org/en/latest/examples/tile-load-events.html), thus I can not use the example.
If anyone can help me, thank you.
EDIT: I am trying to get this running with a single layer.Tile now. I thought if i do it like this and add the source-Layer to my map I should get a console-output "Loading" and then "Done", but I do not get an output.
var source = new ol.layer.Tile({
title: "Baden-Württemberg",
zIndex: 2,
visible: false,
source: new ol.source.TileWMS({
url: "https://forestwatch.lup-umwelt.de/app/ows/index.php/geoserver/forestwatch/wms?",
params: {
'LAYERS': "forestwatch:baden_wuertemberg_maske"
}
})
})
var IMG = document.getElementById("loading");
source.on('tileloadstart', function () {
console.log("Loading");
});
source.on('tileloadend', function () {
console.log("Done");
});
PS: I do not really care if I have to use jquery, if there is a solution using it just tell me.
Edit: #Mike made this work using source.getSource().on( ), but right now my map is jumping.
#loading {
position: relative;
display: none;
font-size: 40px;
left: 50%;
top: 50%;
z-index: 10000;
/* width: 30px;
height: 30px;*/
background-color: transparent;
color: black;
}
This is the css for the div. EDIT: position: fixed made it work since it is always in the same position now.
I'm trying to increase the padding of the hoverlabel property for pie charts using below method but seems not working. Has anyone tried this use case or is there any other way to do it..
hoverlabel: {
bgcolor: 'white',
bordercolor: '#e7e7e7',
font: {
color: 'black',
},
padding: {
t: '20',
b: '50',
l: '0',
r: '0'
},
borderwidth: 2
}
You can use CSS to expand the legend box, and then move the hover elements.
.legend .bg {
rx: 10px;
transform: scale(1.2, 1.2);
}
.legend .scrollbox {
transform: translate(10px, 7px);
}
Not a perfect solution but it works.
Plotly Pie Chart does not support padding property in hoverlabel
Reference - https://plotly.com/javascript/reference/#pie-hoverlabel
However you can customize your hover label by using hovertemplate property
https://plotly.com/javascript/hover-text-and-formatting/
I am trying to hide a vertical bar I have created in a jQuery Flot graph when the mouse is not within the bounds of the grid. I set me horizontal bounds for the grid as such: horizontalBounds = [leftOffset, plot.width() + leftOffset];. I then used an if statement to say "if the mouse is within the vertical bounds, do this to the verticalBar.css."
if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
if (typeof verticalBar !== "undefined" && verticalBar !== null) {
verticalBar.css({
transform: "translate(" + position.pageX + "px, 0px)"
});
}
Below is my css code (which is actually in my javascript file; don't ask...). What do I need to do to hide the verticalBar when the mouse is not within those horizontal bounds? I was thinking I could just add the attribute `visibility: hidden' to the verticalBar.css, but I can't figure out how to do that. Any hints?
verticalBar.css({
backgroundColor: "#F7E4E6",
width: "1px",
height: "100%",
position: "absolute",
padding: 0,
margin: 0,
left: 0,
transform: "translateX(" + plot.getPlotOffset().left + "px)"
});
}
try using "display:none;" in your CSS.
Depending on how you're wanting to hide the bar, you can have something as simple as display: none.
If you're wanting to add in some animations, you could use some jQuery functions to control that particular node.
You could also utilize a set of CSS class name swaps to trigger some CSS animations.
so none of those methods seemed to work for me. I ended up discovering that Flot has a crosshair plugin (flot.crosshair). The crosshair can be configured to act only on the x axis/ x coordinate as it tracks the movement of the mouse. Here is an example of the crosshair tracking in action: Flot Tracking Example.
Once the plugin was added, I was able to get the desired results; as the "vertical bar" only shows up when the cursor is on the grid. Below is really all you need to do to configure it (other than adding the plugin to the appropriate files). Hope this helps someone in the future.
plot = $.plot(
placeholder
data
grid:
clickable: true
hoverable: true
color: "white"
mouseActiveRadius: 1000
tooltip:
show: true
content: '%y'
crosshair:
mode: "x"
color: "#FFFFFF"
lineWidth: 1
I am trying to resize the SVGs in dc.js.
In the NASDAQ example in the main page itself. When I change the width/height, it cuts of the svg instead of resizing it. For example, changing width and height to half .. it cuts the svg into half and only shows half of it. I know I am doing something really silly here.
Please suggest.
Here is what I did. In my HTML page I had the following line:
<div id="resize"></div>
In my js page, I setup a bar chart graph called "barChart." I had the following sequence:
var width = document.getElementById("resize").offsetWidth;
barChart = dc.barChart("#barChart");
barChart.width(width)
.height(350)
.margins({top: 10, right: 40, bottom: 30, left: 40})
.dimension(rooms)
.group(kWOccupiedData)
.elasticY(true)
.gap(1)
.x(d3.scale.ordinal().domain([0, 5]))
.xUnits(dc.units.ordinal)
.yAxisLabel("kWh")
.xAxisLabel("Room")
.renderHorizontalGridLines(true)
.transitionDuration(700);
window.onresize = function(event) {
var newWidth = document.getElementById("resize").offsetWidth;
barChart.width(newWidth / 2)
.transitionDuration(0);
dc.renderAll();
barChart.transitionDuration(750);
};
Lastly, in my CSS stylesheet I put:
.resize {
width: 100%;
height: 350px;
}
#barChart {
clear: both;
width: 100%;
}
Now when you resize your window, the chart should resize as well.
You have to use viewBox attribute.
The viewBox attribute allows to specify that a given set of graphics
stretch to fit a particular container element.
- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
Here is example - http://jsfiddle.net/LPWhE/
If you change container's width and height in css you resize svg.
svg.attr({
"width": "100%",
"height": "100%",
"viewBox": "0 0 250 250"
})