I have a code which refresh chart when window change size:
$(window).resize(function () {
plot.replot({ clear: true, resetAxes: false });
});
But I would like to move legend down on small screens. Is this possible with jqPlot?
$(window).resize(function () {
if (window.innerWidth < 700) { plotgraph.replot({ resetAxes: true, legend: { placement: 'insideGrid', location: "s", rowSpacing: '2px' } }); }
else { plotgraph.replot({ resetAxes: true, legend: { placement: 'outsideGrid', location: "ne" } }); }
});
Related
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent);
point = chart.series[0].searchPoint(event, true);
if (point) {
point.highlight(e);
}
}
});
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
Highcharts.Point.prototype.highlight = function (event) {
event = this.series.chart.pointer.normalize(event);
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(
e.min,
e.max,
undefined,
false,
{ trigger: 'syncExtremes' }
);
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/v6.0.4/samples/data/activity.json',
function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} km'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
positioner: function () {
return {
// right aligned
x: this.chart.chartWidth - this.label.width,
y: 10 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
}
);
Any help will be appreciated
You can hide unwanted x axes using visible property:
xAxis: {
visible: i === 2,
(...)
},
Live demo: http://jsfiddle.net/BlackLabel/abf07jgc/
API reference: https://api.highcharts.com/highcharts/xAxis.visible
I'm trying the below synchronous chart to have different Y-axis name for each chart.I searched a lot but didn't find any answers.
If any help with this will be appreciated.
/*
The purpose of this demo is to demonstrate how multiple charts on the same page
can be linked through DOM and Highcharts events and API methods. It takes a
standard Highcharts config with a small variation for each data set, and a
mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart" style="width:200px;float:left;">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} km'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
positioner: function () {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: -1 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
});
.chart {
min-width: 320px;
max-width: 800px;
height: 200px;
margin: 0 auto;
}
#container {
min-width: 310px;
max-width: 400px;
margin: 0 auto
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
One possible way of doing this would be to do this, create an array of the yAxis titles:
var yAxisName = ['km/h', 'meters', 'bpm'];
Uncomment the indenting (or the axis title will not be shown:
chart: {
// marginLeft: 40,
...
}
And finally setting the actual title:
yAxis: {
title: {
text: yAxisName[i]
}
}
Working example: http://jsfiddle.net/ewolden/th26ay3m/
I have a tooltop in my area map that I've done which I'm using http://qtip2.com/
my code when I call the tooltip is the same one in this question Tooltip on map area tag
jQuery(document).ready(function (e) {
jQuery('area').qtip({
style: {
classes: 'qtip-dark'
},
events: {
show: function(event, api) {
api.set({
'content.text': api.elements.target.attr('title')
});
}
}
});
});
But my tooltip is always on the bottom right corner of my area, is there any way I can let it on my top right corner instead?
Find the below answer it will helpful to you.
jQuery(document).ready(function (e)
{
jQuery('area').qtip({
style:
{
classes: 'qtip-default qtip qtip-light qtip-rounded',
width: '250px',
height: '70px',
tip: true
},
position:
{
my : 'bottom left',
at: 'top right',
adjust: {
method: 'none none', // Requires Viewport plugin
resize: true
},
},
events:
{
show: function(event, api)
{
api.set
({
'content.text': api.elements.target.attr('title')
});
}
}
});
});
Thanks to Chiral Patel's comment I've found a way, thank you!
jQuery(document).ready(function (e)
{
jQuery('area').qtip({
style:
{
classes: 'qtip-default qtip qtip-light qtip-rounded',
width: '250px',
height: '70px',
},
position:
{
my : 'bottom left',
at: 'top right',
method:'none'
},
events:
{
show: function(event, api)
{
api.set
({
'content.text': api.elements.target.attr('title')
});
}
}
});
});
I'm like to use the lightSlider on my website to slide through some divs, but I want to use this only on mobile device. So I want to destroy the slider on resize after reaching a specific breakpoint.
My script look like this:
function theSlider() {
var slider = $('#content-slider').lightSlider({
gallery: false,
item: 1,
loop: false,
slideMargin: 0,
enableDrag: true,
keyPress: true,
pager: true,
adaptiveHeight: false,
responsive: [{
breakpoint: 768,
settings: {
item: 2,
slideMove: 1,
slideMargin: 6,
}
}, {
breakpoint: 600,
settings: {
item: 1,
slideMove: 1
}
}]
});
}
function initAufhaenungSlider() {
var resizeTimer;
if ($(window).width() > 768) {
initTeaserHeight();
$('#content-slider').parent().parent().find('.lSAction, .lSPager').remove();
$('content-slider').children().removeAttr('style');
} else {
theSlider();
$('.content-slider .col-item').css('width', '100%');
}
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if ($(window).width() < 768) {
console.log('< 767');
$('.lSPager').remove();
var slider = $('#content-slider').lightSlider();
slider.destroy();
$('.content-slider .col-item').css('width', '100%');
theSlider();
} else {
var slider = $('#content-slider').lightSlider();
slider.destroy();
console.log('> 767');
$('.content-slider .col-item').css('width', '33.33333333%');
initTeaserHeight();
$('.lSPager').remove();
$('.lSAction').remove();
$('#content-slider').parent().removeClass('lSSlideWrapper').removeAttr('style');
}
}, 250);
initTeaserHeight();
});
}
I am trying to use javascript so that when the chart is sized below a certain threshold, the datalabels are hidden. I have the dataLabels initiated in an array of series'. Here's a snippet from the array.
{
name: 'Muni floaters',
color: '#009fdf',
data: [355.000],
id: 'columnText',
dataLabels: {
enabled: true,
inside: true,
//align: 'right',
x: 135,
format: '<b>{series.name}</b>',
color: '#009fdf',
style: {
fontSize: '12px'
}
}
}, {
name: 'Bank loans',
color: '#004b87',
data: [622.955],
id: 'columnText',
dataLabels: {
enabled: true,
inside: true,
//align: 'left',
x: -130,
format: '<b>{series.name}</b>',
color: '#004b87',
style: {
fontSize: '12px',
}
}
}
I tried the following javascript to disable the series dataLabels but only received errors.
function responsiveText(){
if ($('#container').width() < 578){
var chart = $('#container').highcharts();
var options = chart.options;
options.series.dataLabels.enabled = false;
chart = new Highcharts.Chart(options);
}
else{
var chart = $('#container').highcharts();
var options = chart.options;
options.series.dataLabels.enabled = true;
chart = new Highcharts.Chart(options);
}
}
$( window ).resize(function() {
responsiveText();
});
Any Ideas?
Do not attempt to re-init the chart with:
chart = new Highcharts.Chart(options);
Instead use the series update method.
function responsiveText(){
Highcharts.charts[0].series[0].update({
dataLabels: {
enabled: !($('#container').width() < 578)
}
}, true);
}
Fiddle demo here.