Highcharts mobile (and window) resizing. Axis overlapping - javascript

The following fiddle shows what is happening to my users in mobile when rotating between portrait and landscape.
On load, the chart shows up as desired.
Hit 'Step 1', the chart shrinks and is shown as desired.
Hit 'Step 2', the chart returns to original size, but the vertical axis labels overlap.
http://jsfiddle.net/burchw78/rwb7ms93/
I have tried chart.redraw(), but with no success. Any ideas?
$(function() {
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
renderTo: 'industrybasicbar'
},
title: {
text: 'All Private Industries Expected to Add Jobs by 2024'
},
xAxis: {
categories: ['Health care and social assistance', 'Professional and business services', 'Trade, transportation, and utilities', 'Leisure and hospitality', 'Manufacturing', 'Construction', 'Local government', 'Financial activities', 'Other services', 'Natural resources and mining', 'Private educational services', 'State government', 'Information', 'Federal government'
],
title: {
text: null
}
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Projected Growth',
data: [46300, 45700, 36200, 35800, 21100, 17600, 9600, 9100, 8800, 6100, 4700, 2800, 2000, -1000
],
negativeColor: 'black'
}]
});
$('#resize').click(function () {
chart.setSize(300, 300);
});
$('#resize2').click(function () {
chart.setSize(500, 300);
});
});

It seems to be a bug. I reported it here: https://github.com/highcharts/highcharts/issues/8510
Workaround:
Update textOverflow manually:
$('#resize').click(function() {
chart.setSize(300, 300);
chart.xAxis[0].update({
labels: {
style: {
textOverflow: 'ellipsis'
}
}
});
});
Live demo: http://jsfiddle.net/BlackLabel/axhcwrmd/

Related

Highcharts Toggle Stacking for Multi-Axis Chart

I am trying to toggle stacking for a multi-axis chart, but it seems I can only toggle one series at a time.
Does anyone know how to solve this? Here is a link to the jsfiddle:
http://fiddle.jshell.net/kz7wbykx/
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
defaultSeriesType:'column',
borderWidth:1,
borderColor:'#ccc',
marginLeft:110,
marginRight:50,
backgroundColor:'#eee',
plotBackgroundColor:'#fff',
},
title:{
text:'Chart Title'
},
legend:{
},
tooltip:{
},
plotOptions: {
series: {
stacking:'normal',
fillColor:'rgba(255,255,255,0)',
},
},
xAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'X Axis Title'
}
},
yAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
gridLineColor:'#ddd',
title:{
text:'Y Axis Title',
rotation:0,
margin:50,
}
},
series: [{
stack: 1,
name:'Series 1 Name',
data: [5,8,7,4,6]
},{
stack: 1,
name:'Series 2 Name',
data: [2,3,6,5,7]
},{
stack: 1,
name:'Series 3 Name',
data: [1,4,6,8,9]
}]
},function(chart){
$('button').click(function(){
chart.series[0].options.stack = +!chart.series[0].options.stack;
chart.series[1].options.stack = +!chart.series[1].options.stack;
//chart.series[2].options.stack = +!chart.series[2].options.stack;
chart.series[0].hide();
chart.series[1].hide();
chart.series[2].hide();
chart.series[0].show();
chart.series[1].show();
chart.series[2].show();
})
});
<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>toggle stacking</button>
I think that you can use Series.update() method in case of changing stack of your series. Here you can find information about this method:
http://api.highcharts.com/highcharts#Series.update
$('button').click(function() {
chart.series[0].update({
stack: chart.series[0].options.stack == '1' ? '0' : '1'
}, false);
chart.series[1].update({
stack: chart.series[1].options.stack == '1' ? '2' : '1'
}, false);
chart.redraw();
})
Here you can see an example how your chart may work using Series.update():
http://fiddle.jshell.net/kz7wbykx/1/
Regards,

Highcharts Stacked Percentage Column Hyperlink

I have a Stacked % Column Highchart which without Hyperlinks on data sets works perfectly, however I need to link away to another page from the chart, If it was a standard column chart, I would have no issue (I have one already). But i cannot seem to work out why I'm getting an undefined error on the link.
Ive searched around for a working example but havent been able to find one matching the stacked percentage column.
I've setup a fiddle to indicate where im up to, any help appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Space Overview'
},
xAxis: {
categories: ['a', 'b', 'c', 'd']
},
yAxis: {
min: 0,
title: {
text: 'Total Space (%)'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
location.href = this.options.url;
}
}
}
}
},
subtitle: {
text: '+ Items relate to items in the dispay cabinets.',
align: 'left',
x: 10
},
series: [{
name: 'Free',
data: [1498, 1123, 556, 1176],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}, {
name: 'Used',
data: [1234,233,23,759],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}]
});
http://jsfiddle.net/Mooglekins/qv8z5a2o/
This is a great question! I did some digging and think I've found a good solution for you.
First, I needed to update how you defined the custom value in your series. To capture certain values in events, I moved the url attribute within each data point. So now, each point has their y value and the new url value.
(Note: I used dummy URLs here since I wouldn't be able to connect to the ones you provided outside your website.)
series: [{
name: 'Free',
data: [
{ y: 1498, url: 'http://www.google.com' },
{ y: 1123, url: 'http://www.yahoo.com' },
{ y: 556, url: 'http://www.bing.com' },
{ y: 1176, url: 'http://www.msn.com' }
]
}, {
// second series here
}
]
Next, I updated your events call. Now that we've moved the url attribute to each point, we can refer to that value as point.url (as you could the y value using point.y).
What I also did here is use window.open vs. window.location. This will be a better experience for your users so they don't lose sight of the chart. Keep this if you wish.
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function (event) {
window.open(event.point.url);
}
}
}
}
}
Here's your updated fiddle with these changes: http://jsfiddle.net/brightmatrix/qv8z5a2o/5/
I hope this helps!

Highcharts JSON, chart not displaying

I have some data I wish to display on a chart but it just shows the title and no points get drawn. The JSON data I receive is correct as per my knowledge, I think it's somewhere in the chart function but I can't really point it out.
This is what I have so far:
data.php (the output):
{"name":"Temperature","data":[34,28,29,28,34,28,32,27,24,30,25,32,34,28,34,33,24,33,30,27,24,27,26,29]}
The important bits of the html:
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperature vs. Time',
x: -20 //center
},
xAxis: {
categories: ['12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM','12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM']
},
yAxis: {
title: {
text: 'Temperature'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: json
});
});
});
});
</script>
It's supposed to show temperature per hour but unfortunately nothing comes up. Any idea what could be wrong?
series should be an array. So you need to just change:
series: json
To:
series: [json]
Working example: http://codepen.io/anon/pen/Kfgsd
Documentation: http://www.highcharts.com/docs/chart-concepts/series
your problem i think that you haven't specified where your chart should be inserted to, afaik you either should specify the renderTo option for the class constructor options or use the $('#container').haighcharts({...}) jquery helper

Highcharts - Bar - Setting the X axis width and the chart area width to be constant

Can anyone recommend a method of setting the X axis to be a constant width across multiple instances of a bar chart?
See this jsFiddle: http://jsfiddle.net/LCYwW/1/
The first chart is an example of placing the data for 2 locations in a single chart. In this case, Highcharts automatically adjusts the X axis width to accommodate both location labels.
However, I need to separate these 2 locations into separate charts, but maintain the same proportions of X Axis to bar area width for both charts. See charts 2 and 3 in the example. In this case, Highcharts picks an X axis width that suits just the single location and the 2 charts do not line up when stacked.
Is there a method to get the individual charts to maintain the same proportions as each other? I tried setting the xAxis.labels.style.width attribute, and it does something, but doesn't seem to be a concrete width. See http://jsfiddle.net/LCYwW/3/
This example is easiest to see in the jsFiddle, but SO is requiring me to post the code:
$('#containerAll').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Short Name', 'Much Longer Location Name']
}
});
$('#container1').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}]
}
],
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: 200
}
}
}
});
$('#container2').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Much Longer Location Name'],
labels: {
style: {
width: 200
}
}
}
});
You have a lot more control over the labels if you turn on useHTML.
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: '100px',
'min-width': '100px'
},
useHTML : true
}
}
http://jsfiddle.net/LCYwW/5/
You'll also probably have to set a min and max for the yAxis to keep the data in proportion.
Fiddle with the yAxis max set: http://jsfiddle.net/LCYwW/6/
Also consider, using the chart: marginLeft property to set a fixed width for the labels:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 160
},
// ...
})
});
This preserves the other behavior of the chart, e.g., alignment of the labels. Also see this question.
Adding the marginLeft property inside of chart worked like a charm for me.
chart: {
type: 'bar',
marginLeft: 200
}, ...

Adjusting the appearance of a javascript- Shield UI Chart

I have a problem with Shield UI Chart. I need to hide all text on my X axis, that is dateTime. But i can't visualize the chart when I add the code that hides the axis.
Below is the code that I am using. Will appreciate any assistance fixing it.
<script type="text/javascript"> $(function () { $("#chart").shieldChart({
axisX: {
axisTickText: {
enabled: false
}
axisType: 'datetime'
},
axisY: {
title: {
text: "Total Sales statistics"
}
},
primaryHeader: {
text: "Aaron's cars sales"
}, dataSeries: [{ seriesType: 'bar',
collectionAlias: 'New Cars Sales Volumes',
data: [325000, 425000, 316000, 378000, 390000]
}, {
seriesType: 'bar',
collectionAlias: 'Used Cars Sales Volumes',
data: [125000, 175000, 158000, 130000,101000,98000]
}]
});
});
</script>
You have forgotton to put a comma between the different properties. You have axisTickText:{} and there must be a comma, because there is one more property following- axisType.
axisX: {
axisTickText: {
enabled: false
},
axisType: 'datetime'
},

Categories