I am trying to display a highchart graph and when rendering in FF or IE, I get the above error, but in Chrome and Safari I works without fail. I think it is to do with the animation, but switching the animation off, then subsequently works for line charts, but pie charts does not show a chart at all.
$(canvas).highcharts({
chart : {
type: 'pie'
},
colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
credits: {
enabled: true
},
title : {
text: title
},
plotOptions : {
series : {
animation : isWebkit()
}
},
series: data
});
......
Thank you for your help, I am still having the issues, but I have coded around it for now. I am sure there is lots I did not tell you in my original question that would influence the answer (such as I am using bootstrap as my UI platform, and the chart is in a tab which is not visible when it is built, also on the page is a spreadJS control, and looking at the stack trace, this might have an influence and finally the data object would need expanding as I am setting more options than just the values in your jsfiddle example), so I think it is better if I ask the question again once I can expose the other challenges on the page.
So, again thank you, and I will need to ask the question more clearly.
Related
The SVG created by Highcharts has no title, no meaningful desc and no ARIA attributes, or at least I can't find anything in the API to set these. Following the tips at http://www.sitepoint.com/tips-accessible-svg/ I would like to be able to set the title of the SVG when I set http://api.highcharts.com/highcharts#title (or some alternative option). For desc I think I'd need an alternative option for sure - subtitle wouldn't fit the bill. If I set the title the attribute aria-labelledby="title" should be set on the svg tag. If I set title and desc it should be aria-labelledby="title desc" (apparently not all screen readers are compatible with aria-describedby). And the svg tag should also have a role="img" attribute.
Currently we are failing an accessibility review due to these issues.
Here is some info for someone landing to this page.
From high charts version 5 onward there is support for accessibility.
Here is the link with samples
https://www.highcharts.com/docs/chart-concepts/accessibility
It has support for keyboard navigation. It also include a hidden HTML screen reader information section above the chart with details about the chart structure and content. This can be read by screen readers after getting focus on the chart by up or down arrow keys.
One can also provide additional information to the screen reader via chart.description, series.description and point.description through which one can summarize the chart.
See example here which summarizes the chart using the description property.
$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function (data) {
Highcharts.stockChart('container', {
chart: {
description: 'Chart shows Apple stock prices from mid 2008 to mid 2015. It shows steady growth with one significant peak lasting through most of 2012 before normalizing.'
},
title: {
text: 'Apple Stock Price 2008 to 2015'
},
subtitle: {
text: 'Accessible stock chart demo'
},
rangeSelector: {
selected: 1
},
navigator: {
series: {
description: 'Overview series for navigation' // The navigator series could be confusing to screen reader users.
}
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
});
http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/stock/accessibility/accessible-stock/
Example for support for dash style for better visibility
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle/
I have a unsort data (on x-axis) and using Highcharts to display the graph. I knew the x-axis must sort to show the tooltip as the Highcharts document wrote. But my data could not be sorted by some reasons, so could anyone meet this problem before, please give any idea/solution to show the tooltip without sort x-axis data. If I sort, my data will be wrong.
My js:
var data = [
[5.875, -20],
[8.1875, -30],
[8.875, -40],
[9.5, -50],
[10.125, -60],
[10.5, -70],
[10.875, -80],
[11.375, -90],
[11.6875, -100],
[11.875, -110],
[12.0625, -120],
[12.625, -130],
[12.4375, -140],
[12.625, -150],
[12.5, -160],
[12.4375, -170],
[12.4375, -180],
[12.375, -190],
[12.25, -200],
[12.1875, -210],
[11.9375, -220],
[11.625, -230],
[11.5, -240],
[11.125, -250],
[10.75, -260],
[10.625, -270]
];
$('#container').highcharts({
series: [{
data: data
}]
});
Or please check here http://jsfiddle.net/vuong/jedLowyv/4/
Thank you so much and have a nice day.
You have two options:
sort your data: http://jsfiddle.net/jedLowyv/5/
use scatter series with lineWidth: http://jsfiddle.net/jedLowyv/6/ (not: tooltip will show up only when hover one of markers directly)
I am drawing various charts on a page, and would like to avoid to have to declare in each chart, the properties that are common to every chart.
I tried an example found online, where the common part was in a {settings}, but when I try to load it, I had no luck.
I am using Highcharts. Any suggestion is more than welcome....with 16 charts on one page, I am just going crazy.
You can use merge function. See the example:
http://jsfiddle.net/nyQ2L/
var defaultOptions = {
chart:{
type:'line'
},
title: {
text:'common title'
}
};
var opt1 = Highcharts.merge(defaultOptions,{
series:[{
data:[1,2,3]
}]
});
I'm seeing this error when I create a line chart with a single y-axis.
Uncaught TypeError: Cannot read property 'series' of undefined highcharts.3.0.1.js:147
It seems that the series is a bit displaced to the left. The leftmost tool tip is hanging off the chart where the y-axis names are showing. All the tooltips are off a bit and if I mouse all the way to the right of the chart I see this error over and over in the console.
Interestingly, if I zoom in and then hit the 'reset-zoom' the chart renders properly and the problem goes away.
unfortunately, creating a fiddle will be hard as I build my config options on the fly. I am using addSeries to add my series to an empty chart once it has been displayed.
Thanks in advance for any help or tips.
-Dale
In general, without code it is really hard to find issue, just copy your 'options on the fly' which reproduce issue, please.
However, most probably you are trying to add series for axis, which doesn't exists. For example:
yAxis: { },
series: [{ yAxis: 1 }] <-- obviously there is only one yAxis
export class xyzComponent implements OnInit {
highcharts = Highcharts;
chart;
chartCallback;
title = 'myHighchart';
chartConstructor = "chart";
chartOptions: {};
ngOnInit() {
this.chartOptions = {
chart: {
type: "spline"
},
title: {
text: 'Average Vegetation and Soil Moisture Index'
},
}
}
}
it's for Angualar
I just have a short question about switching the color of sifr objects on the fly with changeCSS:
The point is, that I'd like to change the color of the two headers whenever the user clicks on the "Switch style to..." on the upper right corner. Check the example page: www.capsule.hu/index2.html - and after clicking on the link nothing happens with sifr objects. Version is: sIFR, version 3, revision 436.
I'm using Kelvin Lucks styleswitcher script with some modifications (the script is hardly the same as here: http://www.digital-campaign.com/dc-example/) - on my current page I'm calling the sIFR.replace method whenever user changes the style (www.capsule.hu), but it seems a little bit slow for me, that's why I'd like to change.
Thanks for every help in forth,
Csongor
You can place the following in the body of the switchSifrColor function on your site:
$('h2').removeClass("sIFR-replaced");
sIFR.replace(helvetica, {
selector: 'h2',
wmode: 'transparent',
css: [ '.sIFR-root { color: #' + color + '; }' ]
});
The main change is that the css property is an array of strings, unlike the object that you were passing.
And a side-note: great work! The site looks very nice.
[Edit]
I guess this will prove more useful than calling replace again.
var css = '.sIFR-root {color:#ff1ff1;}';
$.each(sIFR.replacements['h2'], function() {
this.changeCSS(css);
});
I just tried it through Firebug and it looks great :)
[/Edit]