Hello,
I would like to have a name per point in a scatter plot chart. How can it be done? and is it possible with simple tools?
Thank you so much!
Code: Select all
// Sample of extending options:
Highcharts.extend(options, Highcharts.merge(options, {
plotOptions: {
scatter: {
tooltip: {
pointFormatter: function(){
var x = this.x,
ret = '';
Highcharts.each(this.series.chart.series, function(s, i){
Highcharts.each(s.points, function(p, j){
if(p.x === x) ret += s.name + ': ' + p.x + ' / ' + p.y + '<br/>';
});
});
return ret;
}
}
}
}
}));
Code: Select all
var data = options.data.csv;
var newSeries;
var oldSeriesOptions = options.series
console.log(options)
// Split the lines
var lines = data.split('\n');
lines.forEach(function(line, lineNo) {
var items = line.split(';');
// For first line create appropriate series
if (lineNo === 0) {
newSeries = [{
name: items[1],
data: [],
dataLabels: {
format: "{point.label}",
enabled: true
}
}, {
name: items[2],
data: [],
type: 'line',
color: 'red',
marker: {
enabled: true,
}
}]
// Prepare data
} else {
newSeries[0].data.push({
x: parseInt(items[0]),
y: parseInt(items[1]),
label: items[3].slice(1, items[3].length -1)
})
newSeries[1].data.push({
x: parseFloat(items[0]),
y: parseFloat(items[2])
})
}
});
options.data.csv = null
options.series = newSeries
Great. Now open that chart in HC Cloud and (try to) edit it …daniel_s wrote:Hi Piter,
The case is not as simple as using standard Highcharts, because there is no possibility to use String type values as a data field.
However, you can add another column in the data for labels, and then process existing data building your own parser for CSV. I prepared an example of how to achieve it using Highcharts Cloud. Please take a look on example below. The parser is implemented in "Custom code" tab.
Parser code:Live example : https://cloud.highcharts.com/show/SJYe2nwZ7Code: Select all
var data = options.data.csv; var newSeries; var oldSeriesOptions = options.series console.log(options) // Split the lines var lines = data.split('\n'); lines.forEach(function(line, lineNo) { var items = line.split(';'); // For first line create appropriate series if (lineNo === 0) { newSeries = [{ name: items[1], data: [], dataLabels: { format: "{point.label}", enabled: true } }, { name: items[2], data: [], type: 'line', color: 'red', marker: { enabled: true, } }] // Prepare data } else { newSeries[0].data.push({ x: parseInt(items[0]), y: parseInt(items[1]), label: items[3].slice(1, items[3].length -1) }) newSeries[1].data.push({ x: parseFloat(items[0]), y: parseFloat(items[2]) }) } }); options.data.csv = null options.series = newSeries
Best regards!