Here's my issue:
I am using the phonegap framework to develop a hybrid app, and I need this application to have graphs for which I had decided to use the highcharts library.
The problem is that I can't seem to be able to scroll after touching on the chart (at least while touching inside the selected portion of the image).
What I want to do is prevent the chart from taking any events and show a plain graph with anything being highlighted and be able to scroll even if im doing it over the graph.
Code:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'containerBar',
animation: false,
type: 'bar',
events: {
click: function(event){
return false;
}
}
},
scrollbar: {
enabled: true
},
title: {
text: 'Fruit Consumption'
},
plotOptions: {
bar: {
events: {
click: function(event){
return false;
},
mouseOver: function(event){
return false;
},
legendItemClick: function () {
return false;
}
},
states: {
hover: function(){
alert("Allow");
}
}
}
},
events: {
click: function(e) {
alert("Click");
}
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Jane',
data: [1, 3, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
Try this link ....
Just make a separate javascript file ,copy paste the code and include the file
To follow up for folks reading this question and its answers, the issue with scrolling and Highcharts visualizations was resolved with Version 3.0.1 (2013-04-09). Highstock, a sibling of Highcharts, received a similar update with Version 1.3.1 (2013-04-09).
Added new option, tooltip.followTouchMove. When this is true, the
tooltip can be moved by dragging a single finger across the chart,
like in Highcharts 2. When it is false, dragging a single finger is
ignored by the chart, and causes the whole page to scroll. This
applies only when zooming is not enabled.
Further enhancements were made in Highcharts Version 4.1.0 (2015-02-16):
Made tooltip.followTouchMove true by default, and allowed page scroll
at the same time.
For the complete Highcharts change log, see http://www.highcharts.com/documentation/changelog.
The problem is caused by Highcharts capturing all touch events and making them do nothing. I solved this by basically just overlaying a div over the chart area on mobile devices and preventing those events from reaching highcharts elements (so they are free to trigger default behavior, i.e. page scrolling). I used this JS (assuming you are also using JQuery or equivalent):
$('.highcharts-container').each(function() {
var dragHandle;
dragHandle = $('<div class="chart-drag-handle">');
$(this).append(dragHandle);
dragHandle.on('touchstart', function(e) {
e.stopPropagation();
});
dragHandle.on('touchmove', function(e) {
e.stopPropagation();
});
dragHandle.on('touchend', function(e) {
e.stopPropagation();
});
dragHandle.on('touchcancel', function(e) {
e.stopPropagation();
});
});
The elements added would need to be styled to overlay the chart, I did that like so:
.highcharts-container .chart-drag-handle {
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: 100;
}
Related
I have a line chart drawn with chart.js that shows some data.
I've added a delete element within the tooltip, but I don't know if it's possible to add an interaction, so that when I click the delete element, within the tooltip, some custom code is run that deletes the data from the Data base.
const weight_graphOptions = {
title: {
text: 'Weight',
display: true
},
scales: {
x: {
type: 'time',
time: {
// Luxon format string
tooltipFormat: 'dd-MM-yyyy'
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
display: true,
text: 'kg'
}
}
},
plugins: {
tooltip: {
events: ['click'],
callbacks: {
afterFooter:
function (addDeleteButton) {
return 'Delete'
}
}
}
}
}
Does anyone know if I can do this without building my own custom-made tooltip?
No this is not possible with the default provided tooltip, first it won't stay so when you try to hover the tooltip it's not there anymore
Second reason it won't work is because chart.js does not have any event listeners that listen to clicks/hovers over specific parts of the tooltip or the tooltip in general.
So you will need to make a custom external html tooltip that stays even while you don't hover datapoint anymore where you can add a normal button
I've built a Highmaps map where states are colored according to their ranking. I set that up like this:
colorAxis: {
min: 0,
maxColor: 'blue',
dataClasses: [{
from:0,
to: 3.000,
color:'#6497b1'
}, {
from: 3.001,
to: 4.500,
color:'#005b96'
}, {
from: 4.510,
to: 7.000,
color:'#03396c'
}, {
from: 7.001,
to: 10.000,
color:'#011f4b'
}]
},
legend: {
title: {
text: 'Desarrollo democratico',
style: {
color: ( // theme
Highcharts.defaultOptions &&
Highcharts.defaultOptions.legend &&
Highcharts.defaultOptions.legend.title &&
Highcharts.defaultOptions.legend.title.style &&
Highcharts.defaultOptions.legend.title.style.color
) || 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
valueDecimals: 3,
symbolRadius: 5,
symbolHeight: 14
},
It works as expected. However, I would like to disable the default behavior in which when you click on a legend category it hides the corresponding states from the map. Generally, this can be accomplished by adding legendItemClick to plotOptions and setting it to return false, as follows:
plotOptions: { //For point links
series: {
events: {
legendItemClick: function (e) {
return false;
}
}
},
However, after several hours of researching its evident that there is a known HighCharts bug that prevents legendItemClick from working when there are dataClasses in the colorAxis object: https://github.com/highcharts/highcharts/issues/9246
There's a workaround in the forum at the previous link, but I haven't had any luck getting it to work. Does anyone out there have a solution for this?
Here's a JSFiddle illustrating the problem: https://jsfiddle.net/sstoker/3cdaqkyx/
As an alternative, if anyone knows how to make legendItemClick highlight the corresponding states rather than hiding them, that would work as well. Many thanks in advance!
To prevent hiding the states, you can overwrite the setItemEvents method:
(function(H) {
H.Legend.prototype.setItemEvents = null;
})(Highcharts)
Live demo: https://jsfiddle.net/BlackLabel/usaveL4w/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I am using highcharts for one of my projects and I want to know if it is possible to have a combination chart of bar chart and word cloud chart. Something like shown below
Is it possible to achieve this or is there any open source chart libraries which do this.
What I have tried:
I have looked for all the available chart libraries and did not find any suitable options. Since its the starting point, there is nothing much to be specified.
Please help. I am stuck.
You need to create and add separate containers with wordcloud charts:
chart: {
events: {
load: function() {
var points = this.series[0].points;
points.forEach(function(p) {
var wContainer = $('<div>');
wContainer.addClass('wordCloudContainer');
wContainer.css({
top: this.plotTop,
left: p.plotX
});
$('#mainContainer').append(wContainer);
Highcharts.chart(wContainer[0], {
chart: {
width: p.pointWidth + 40,
height: 200
},
title: {
text: ''
},
credits: {
enabled: false
},
series: [{
type: 'wordcloud',
data: [
['one', 1],
['two', 2],
['three', 3]
]
}]
});
}, this);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/2jahsfyp/
API Reference: https://api.highcharts.com/highcharts/chart.events.load
I am trying to show different charts one on each of the three tabs of the page.
The first tab renders perfectly, but the second and third don´t.
Example of first chart ok
Example of second and Third chart not OK
Every time the tab is selected a $(window).trigger('resize'); is executed so the charts resize. So far they do, but the visual glitch, persist.
When I create the charts for the first time I create them individualy:
var graficoOpcCuenta = { chart: { renderTo: 'graficoPorCuenta' }, rangeSelector: { selected: 1 }, title: { text: 'Rentabilidad Cuenta' }, series: [{ data: [], tooltip: { valueDecimals: 2 } }] };
var graficoOpcCliente = { chart: { renderTo: 'graficoPorCliente' }, rangeSelector: { selected: 1 }, title: { text: 'Rentabilidad Cliente' }, series: [{ data: [], tooltip: { valueDecimals: 2 } }] };
var graficoOpcGrupo = { chart: { renderTo: 'graficoPorGrupo' }, rangeSelector: { selected: 1 }, title: { text: 'Rentabilidad Grupo' }, series: [{ data: [], tooltip: { valueDecimals: 2 } }] };
var graficoPorCuenta = new Highcharts.StockChart(graficoOpcCuenta);
var graficoPorCliente = new Highcharts.StockChart(graficoOpcCliente);
var graficoPorGrupo = new Highcharts.StockChart(graficoOpcGrupo);
Any ideas?
I'm currently using Highstock JS v2.1.9
Update:
Setting the width in chart:{..., width: x} just doesn't make it.
I'm using:
jQuery v2.1.4
Bootstrap 3.3.5
There is no jQuery UI at all
Update 2
Here is my resize:
function resize() {
var height = "some value";
$("#graficoPorCuenta").setGridWidth($("#grillaPorCuenta").width());
$("#graficoPorCliente").setGridWidth($("#grillaPorCliente").width());
$("#graficoPorGrupo").setGridWidth($("#grillaPorGrupo").width());
if ($('#graficoPorCuenta').highcharts() != undefined) {
$('#graficoPorCuenta').highcharts().setSize($("#grillaPorCuenta").width(), height + 120, doAnimation = false);
graficoPorCuenta.reflow();
}
if ($('#graficoPorCliente').highcharts() != undefined) {
$('#graficoPorCliente').highcharts().setSize($("#grillaPorCliente").width(), height + 120, doAnimation = false);
graficoPorCliente.reflow();
}
if ($('#graficoPorGrupo').highcharts() != undefined) {
$('#graficoPorGrupo').highcharts().setSize($("#grillaPorGrupo").width(), height + 120, doAnimation = false);
graficoPorGrupo.reflow();
}
}
Also:
$(window).bind('resize', function () {
resize();
}).trigger('resize');
On Tab change:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
target = $(e.target).attr("href") // activated tab
if (target == "#tabCuenta") {
graficoPorCuenta.reflow()
}
if (target == "#tabCliente") {
graficoPorCliente.reflow()
}
if (target == "#tabGrupo") {
graficoPorGrupo.reflow()
}
$(window).trigger('resize');
});
It was my bad.
What I was doing wrong:
create the charts
Hiding the divs that contain the chart that not corresponded to the
selected chart tab
triggering window resize
Visual error created
The correct way in my case was
create the charts
triggering window resize
Hiding the divs that contain the chart that not corresponded to the
selected chart tab
Correct visual in all charts.
Changing the order made the trick.
I'm using Highcharts Javascript library to generate charts.
I would like to make a chart clickable, which is supported by Highcharts using the syntax below:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-container-revenue-per-purchaser',
defaultSeriesType: 'line',
events: {
click : function() { location.href = '/revenue/purchaser' }
}
},
However, when you mouse over the chart, there's no visual changes (eg border of the graph appearing, cursor changing shape) to indicate to the viewer that the chart is clickable.
Is this something Highcharts supports or I have to implement it using CSS?
Thank you.
try this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-container-revenue-per-purchaser',
defaultSeriesType: 'line',
events: {
click: function() {
location.href = '/revenue/purchaser'
}
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert('clicked');
}
}
},
marker: {
lineWidth: 1
}
}
}
});
taken from http://www.highcharts.com/demo/line-ajax
This uses the 'cursor' option from plotOptions->serise
cursor : String
You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. Defaults to ''.
http://www.highcharts.com/ref/#plotOptions-series--cursor
Add this to the object
plotOptions: {
line: {
allowPointSelect: true,
cursor: 'pointer'
}
},