I need to upload a csv made like this
rsid Complex score
rs531730856 ARNTL.SwissRegulon -0.1658514285714286
rs531730856 BHLHE40.SwissRegulon 0.033113124999999966
rs531730856 BMAL1_HUMAN.H10MO.C -0.16585214285714286
rs531730856 CUX1_HUMAN.H10MO.C 0.10511399999999993
rs531730856 DR-1 0.33170428571428573
Problem is that highcharts returns me error 14 which, if I understood correctly, it's because the Complex field it's not a number. Is there a way where i can import directly a csv made like this?
Unfortunately not, you'll have to do an intermediate step to process that CSV if you wish to import it directly via the csv data/url functionality built into highcharts.
See: https://www.highcharts.com/docs/working-with-data/data-module
CSV can be loaded in two ways. Either data.csv, that holds a CSV
string to be read into the chart, or, since v6.1, data.csvURL that
points to a file location. By default, the first row of the CSV data
is interpreted as series names, the first column signifies category
names or X values/dates, and subsequent columns hold data values.
Sample CSV contents:
Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
Sample chart initialization:
Highcharts.chart('container', {
chart: {
type: 'column'
},
data: {
// enablePolling: true,
csvURL: window.location.origin + '/studies/data.csv'
},
title: {
text: 'Fruit Consumption'
},
yAxis: {
title: {
text: 'Units'
}
}
});
Related
I have a chart that works very well when using the data module with Google spreadsheets. However I need to stop using Google sheets and use CSV on my own server instead. Some of my charts are working, but some aren't. Here's one that is not working. It uses the second column to set the point color, but it's not recognizing it. Any idea what might be wrong here? I edited some of the csv entries to try to make it work, but it's not working much:
http://jsfiddle.net/jmunger/cf6L4bmk/20/
var chart = Highcharts.chart('gfx', {
chart: {
type: 'bar',
},
data: {
csv: document.getElementById('csv').innerHTML,
itemDelimiter: ',',
seriesMapping: [{
color: 2,
label: 3
}]
}
});
console.log(chart);
That problem seems to be a bug in a data module, so I reported it here: https://github.com/highcharts/highcharts/issues/13283
As a workround you can use other color formats:
0;1;blue
1;2;rgb(155,155,55)
2;3;red
Live demo: http://jsfiddle.net/BlackLabel/0gjbn4m6/1/
I'm able to create a highcharts table of numerical data. However, I would like to create a table where it displays text 'as well as', being able to export the table as a .png, .jpg, etc
Here is my jsfiddle of the table:
`https://jsfiddle.net/eblanks/vm813fyo/36/`
You can use keys option:
plotOptions: {
series: {
keys: ['text'],
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/vx67yLfw/
API Reference: https://api.highcharts.com/highcharts/series.line.keys
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 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