Uploading images to Highcharts
Using http://api.highcharts.com/highcharts#loading
Is it possible to have an image as part of a rendered overlay? in particular, "loading" a gif image?
I've tried using the labelStyle section but no luck so far!
+3
source to share
2 answers
After exploring the API. It seems possible.
labelStyle
accepts any valid CSS. Properties that are normally decrypted remove the hyphen and use the next letter. This means that we can use something like background-image
to feed a background image (like loading .gif
).
var chart = new Highcharts.Chart({
// ...
loading: {
labelStyle: {
backgroundImage: 'url("http://jsfiddle.net/img/logo.png")',
display: 'block',
width: '136px',
height: '26px',
backgroundColor: '#000'
}
},
// ...
});
+4
source to share
Check this example for custom upload
$(function () {
// the button handler
var isLoading = false,
$button = $('#button');
$button.click(function() {
if (!isLoading) {
chart.showLoading();
$button.html('Hide loading');
} else {
chart.hideLoading();
$button.html('Show loading');
}
isLoading = !isLoading;
});
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
.highcharts-loading {
opacity: 1!important;
}
.highcharts-loading-inner {
display: block;
}
.highcharts-loading-inner,
.highcharts-loading-inner:before,
.highcharts-loading-inner:after {
background: #dfdfdf;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.highcharts-loading-inner {
color: #dfdfdf;
text-indent: -9999em;
margin: 0 auto;
top: 50%!important;
position: relative;
font-size: 11px;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.highcharts-loading-inner:before,
.highcharts-loading-inner:after {
position: absolute;
top: 0;
content: '';
}
.highcharts-loading-inner:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.highcharts-loading-inner:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button">Show loading...</button>
<!-- Spinners -->
<!-- https://projects.lukehaas.me/css-loaders/ -->
+1
source to share