I would like to append to the highcharts div and render more elements when the view reaches to the bottom of the window scroll.
i have tried this:http://jsfiddle.net/kh5jY/8556/
$('.chartheight').scroll('scroll', function(){
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
data.push(5, 7, 3,4);
chart.series[0].setData(data);
}
});
usecase: i have a bar chart with 3 elements when i scroll to bottom i want more 3 more elements to be added to the chart.without the height of high charts being reduced.
Unfortunately there is no vertical scroller in Highcharts. You could trigger series update and axis set extremes when page is scrolled - http://jsfiddle.net/re4d4q02/
$(function() {
var lastScrollTop = 0;
$(window).scroll(function(event) {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
var data = [5, 7, 3, 5, 5, 5]
chart.series[0].setData(data, false);
chart.xAxis[0].setExtremes(3, 5);
}
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges'],
minRange: 1
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'John',
data: [5, 7, 3]
}],
});
});
.chartheight {
height: 800px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" class="chartheight"></div>
Related
I am trying to update a pie chart but the problem is its overlapping with legends which is causing an issue.
I am remove default series and add new series then old legend is not hide and new legend overlap.
following is my code :
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<button id="update">Update chart</button>
$(function () {
$('#container').highcharts({
chart: {
animation: {
duration: 1000
},
type:'pie'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: true
}
},
series: [{
name: 'Brands',colorByPoint: true,
data: [
{ name: 'Data1', y: 60.40,},
{name: 'Data2', y: 39.60,},
]
}]
});
var i = 1;
$('#update').click(function () {
var chart = $('#container').highcharts();
var newData =[{ name: 'ABC', y: 80 },{ name: 'XYZ',
y: 20,}];
while (chart.series.length > 0)
chart.series[0].remove(true);
let series={
name:'new Load',
data:newData
}
chart.addSeries(
series, false
);
chart.redraw()
});
});
That is a regression bug in Highcharts, which is reproted here: https://github.com/highcharts/highcharts/issues/12627 It is already fixed on the master branch.
To workaround use code from master branch or add this plugin:
(function(H) {
H.wrap(H.Point.prototype, 'destroy', function(proceed) {
if (this.legendItem) { // pies have legend items
this.series.chart.legend.destroyItem(this);
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Let´s say you have an x-axis that goes [0, 3, 6, ...] and a y-axis that is like [0, 5, 10, ...].
Highcharts handles those values so that automatically, somehow a difference of 5 in y direction does not look bigger than a difference of 3 in x direction.
How can you change the distances between the values / make a 5 on the y axis appear as big as 5/3 of the change on the x axis? (so that p.e. a line from (0,0) to point (5,5) has a 45° angle)
Code example:
$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
taken from demo
In the load event, you can calculate and adjust the height or width of the chart:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0];
// Adjust xAxis
this.setSize(
yAxis.height / (yAxis.max - yAxis.min) *
(xAxis.max - xAxis.min) + this.plotLeft + this.chartWidth -
(this.plotLeft + this.plotWidth),
null,
false
);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/64Lxutce/
or if you do not want to change the size, you can adjust one of the axis extremes:
chart: {
events: {
load: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0],
xAxisMax = xAxis.width /
(yAxis.height / (yAxis.max - yAxis.min)),
yAxisMax = yAxis.height /
(xAxis.width / (xAxis.max - xAxis.min));
if (xAxisMax < xAxis.max) {
this.update({
yAxis: {
max: yAxisMax - yAxis.min
}
}, true, true, false);
} else {
this.update({
xAxis: {
max: xAxisMax - xAxis.min
}
}, true, true, false);
}
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/w3byrL28/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Chart#update
https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I have a mobile app developed using jquery mobile. One one page i have a chart. When the user clicks on <a href="chart.html" data-ajax=“true”>Chart</a> the page loads but the chart doesnt load. When i refresh the page the chart works.
When data-ajax=“false” the page works but its not smooth and doest have the transition effects
Below is my chart code
<script type="text/javascript">
$(function () {
var limit = 10000; //increase number of dataPoints by increasing the limit
var y = 0;
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
y += (Math.random() * 10 - 5);
dataPoints.push({
x: i,
y: y
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
//Better to construct options first and then pass it as a parameter
var options = {
zoomEnabled: true,
animationEnabled: true,
title: {
text: "Try Zooming - Panning"
},
axisX: {
labelAngle: 30
},
axisY: {
includeZero: false
},
data: data // random data
};
$("#chartContainer").CanvasJSChart(options);
});
</script>
HTML
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
Is there away to execute the chart function without setting data-ajax=“false” ?
To work with complicated charts, i usually use Highcharts, it is very responsive and very customizable, and it also have very smooth transition effect when it shows.
Here is a Example on JSFiddle.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
I hope it help.
I'm trying to use radio buttons to toggle the display between two Highchart charts (different data series) using divs. I essentially need the accepted solution here: Mootools Highcharts radio button toggle between charts, working jQuery version
...but I can't work out how to specify the variables for each chart from my existing code. The above solution uses this format:
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'divID-1',
height: 400,
...
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'divID-2',
height: 400,
...
whereas each of my charts are specified in the following format, e.g. Chart 1:
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$.get('data_stackedarea_value.csv', function(csv) {
$('#divID-1').highcharts({
chart: {type: 'area'},
data: {csv: csv},
...
How can I translate these into variables that can be called by the initial toggle function?
window.addEvent('domready', function() {
document.getElements("[name=toggler]").addEvent('click', function(){
$$('.toHide').setStyle('top', '-9999em');
$$('.toHide').setStyle('opacity', '0');
$("divID-"+this.get('value')).setStyle('top', '0').fade(0,1);
});
Many thanks
Here's an example where I adopted the solution from 23817700 to use the way you are passing variables to the charts.
I couldn't resist also adapting the toggle code to use jQuery, since it was required already. You can try this is action in this fiddle provided by #RachelGallen: https://jsfiddle.net/ezc7oghm/1/
<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div id="graphwrap" style="height: 410px;">
<div id="divID-1" class="toHide" style="position:relative;margin-bottom:-400px;"></div>
<div id="divID-2" class="toHide" style="position:relative;top:-9999em;opacity:0;"></div>
</div>
<div id="viewSelectWrap">
<h4>View Select</h4>
<label><input id="rdb1" type="radio" name="toggler" value="divID-1" style="cursor:pointer;" checked/>1</label>
<label><input id="rdb2" type="radio" name="toggler" value="divID-2" style="cursor:pointer;" />2</label>
</div>
<script>
$(function() {
$('[name=toggler]').click(function () {
$('.toHide').css({
top: '-9999em',
opacity: 0
});
var chartToShow = $(this).val();
$('#' + chartToShow).css({
top: 0,
opacity: 1
});
});
$('#divID-1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
$('#divID-2').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Time spent on hobbies'
},
xAxis: {
categories: ['Skiing', 'Bicycling', 'Swimming']
},
yAxis: {
title: {
text: 'Time spent on hobbies'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>
I am attempting to get the full label displayed in the x axis, but highcharts keeps on cutting it off. I tried using the crop, overflow, and margin options discussed in other posts to no avail. The only option that worked was to make the div height of the chart an absurd size.
$('#da-expulsions').highcharts({
chart: {
type: 'column',
renderTo: 'da-expulsions',
},
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
startRow: 0,
googleSpreadsheetWorksheet: 19,
},
title: {
text: 'Expulsion rates at campuses with highest expulsion rates over time'
},
yAxis: {
min: 0,
max: 30,
breaks: [{
from: 12,
to: 24,
breakSize: 1
}],
tickInterval: 3,
title: {
text: 'Expulsions Rate (%)'
},
labels: {
formatter: function() {
return this.value + '%';
}
}
},
tooltip: {
valueSuffix: '%'
},
xAxis: {
type: 'category',
title: {
text: 'School'
},
},
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js">
</script>
</head>
<body>
<div id="da-expulsions"></div>
</body>
The "make the div height of the chart an absurd size" is why the truncated view was added. If you hover over the xAxis labels the full text is shown.
If you want to increase the available size for the xAxis labels you can. Another recommendation would be to use a 'bar' format where the xAxis is vertical and then adjust font sizing of the xAxis label although this is not 100% accurate. What is wrong with the ellipsis?
labels: {
useHTML: true,
style: {
fontSize: '8px',
width: '300px'
}
}