I'm trying to create a stacked column chart in highchart, with the x-axis labels being SVG-images as shown on this image:
I've gotten it to work with single data points per label (ie non-stacked data), but as soon I change the input data to an array, the data stops rendering.
This "works":
https://jsfiddle.net/jakobhl/krx4e5pm/2/
var dataName = function(imgSrc) {
return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};
var data2016 = [
[11, dataName("https://image.flaticon.com/icons/svg/197/197571.svg")],
[11, dataName("https://image.flaticon.com/icons/svg/197/197408.svg")],
[11, dataName("https://image.flaticon.com/icons/svg/197/197375.svg")],
[14, dataName("https://image.flaticon.com/icons/svg/197/197374.svg")],
[12, dataName("https://image.flaticon.com/icons/svg/197/197484.svg")],
];
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
xAxis: {
tickmarkPlacement: 'on',
lineWidth: 0,
type: 'category',
labels: {
useHTML: true,
align: 'center'
}
},
series: [{
keys: ['y', 'name'],
data: data2016,
}]
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
This does not:
https://jsfiddle.net/jakobhl/2rfa645x/3/
var dataName = function(imgSrc) {
return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};
var data2016 = [
[[11, 15], dataName("https://image.flaticon.com/icons/svg/197/197571.svg")],
[[12, 15], dataName("https://image.flaticon.com/icons/svg/197/197408.svg")],
[[13, 15], dataName("https://image.flaticon.com/icons/svg/197/197375.svg")],
[[41, 15], dataName("https://image.flaticon.com/icons/svg/197/197374.svg")],
[[11, 15], dataName("https://image.flaticon.com/icons/svg/197/197484.svg")],
];
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
xAxis: {
tickmarkPlacement: 'on',
lineWidth: 0,
type: 'category',
labels: {
useHTML: true,
align: 'center'
}
},
series: [{
keys: ['y', 'name'],
data: data2016,
}]
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
How can I get the data to stack per country while still using SVGs as labels?
Thanks to the jsfiddle user BlackLabel for inspiration.
You can add another value, but you need to adapt the data format required by Highcharts. If the new value is x, just do it as below:
var data2016 = [
[
11, 15, dataName("https://image.flaticon.com/icons/svg/197/197571.svg")
],
...
];
Highcharts.chart('container', {
...,
series: [{
keys: ['y', 'x', 'name'],
data: data2016
}]
});
Live demo: https://jsfiddle.net/BlackLabel/vubjn8od/
API Reference: https://api.highcharts.com/highcharts/series.column.keys
I never found out why the original solution didn't work, but a working solution was to use categories instead of series:
https://jsfiddle.net/jakobhl/L3hzeqpv/1/
var dataName = function(imgSrc) {
return '<span><img src=' + imgSrc + ' ' + 'style="width: 40px; height: 40px;"/><br></span>';
};
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
labels: {
useHTML: true,
align: 'center'
},
categories: [dataName("https://image.flaticon.com/icons/svg/197/197571.svg"), dataName("https://image.flaticon.com/icons/svg/197/197408.svg"), dataName("https://image.flaticon.com/icons/svg/197/197375.svg"), dataName("https://image.flaticon.com/icons/svg/197/197374.svg"), dataName("https://image.flaticon.com/icons/svg/197/197484.svg")]
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
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]
}]
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
I'm trying to pass a secondary variable that's located in each point of my series' data-set. I've managed to that so far but when I try to hover on another data point on the chart, the same data gets printed for all points instead of showing the correct data for that specific point.
I've tried a variety of solutions and I would like to stick to this one, however I have this small hurdle which I can't seem to get over.
Here's a jsFiddle to show the problem I'm encountering: https://jsfiddle.net/Flik1/dfn51akc/47/
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].series.userOptions.data[0].tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I believe its a problem with this specific line of code as its displaying the first 'tt' variable from each series.
this.points[index].series.userOptions.data[0].tt
The expected outcome would be 1 and 5 for column 1, 2 and 6 for column 2, 3 and 7 for column 3 and 4 and 8 for column 4.
Try this.points[index].point.options.tt
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
Highcharts.chart('container', {
title: {
//text: 'Solar Employment Growth by Sector, 2010-2016'
text: false
},
subtitle: {
//text: 'Source: thesolarfoundation.com'
text: false
},
yAxis: {
title: {
text: '$'
}
//,categories: [10,20,30,40,50,60,70,80,90,100]
},
xAxis: {
title: {
text: 'Units'
},
categories: [10, 20, 30]
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
/*plotOptions: {
series: {
pointStart: 0
}
},*/
series: [{
lineWidth: 0,
showInLegend: false,
cursor: 'pointer',
point: {
events: {
click: function(e) {
hs.close();
hs.htmlExpand(null, {
pageOrigin: {
x: (e.pageX || e.clientX) - 100,
y: (e.pageY || e.clientY) + 60
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
states: {
hover: {
lineWidthPlus: 0
}
},
name: 'Installation',
data: [12, 40, 42]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Fiddle
As per requirement, I have implemented highslide popup. But in some cases, the toggle click event is applying to the outside of the marker points also. the highslide popup should toggle when I click on marker points only. can anyone help me out with this issue?
Add chart type scatter by default it is type line. In line chart hover is due to connecting line, which cause pop up to appear.In scatter chart this does not happen
Highcharts.chart('container', {
chart: {
type: "scatter"
},
title: {
//text: 'Solar Employment Growth by Sector, 2010-2016'
text: false
},
subtitle: {
//text: 'Source: thesolarfoundation.com'
text: false
},
yAxis: {
title: {
text: '$'
}
//,categories: [10,20,30,40,50,60,70,80,90,100]
},
xAxis: {
title: {
text: 'Units'
},
categories: [10, 20, 30]
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
/*plotOptions: {
series: {
pointStart: 0
}
},*/
series: [{
lineWidth: 0,
showInLegend: false,
cursor: 'pointer',
point: {
events: {
click: function(e) {
hs.close();
hs.htmlExpand(null, {
pageOrigin: {
x: (e.pageX || e.clientX) - 100,
y: (e.pageY || e.clientY) + 60
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
states: {
hover: {
lineWidthPlus: 0
}
},
name: 'Installation',
data: [12, 40, 42]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I have 9 charts that generate in one container each on a page. What I want to do is use one chart to choose samples and have them highlighted, list them in a table and simultaneously have them show up in the other 8 charts. I have the part where I can get the table to generate, but I can't get the series to show up in the the charts. Here's what I have so far:
<!DOCTYPE html>
<head>
<title>HighCharts Data Output</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script>
$(function () {
var $report = $('#report'),
selectedPoints = [];
$('#container1').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy',
plotBorderColor: 'black',
plotBorderWidth: 1,
},
tooltip: {
formatter: function() {
return this.series.name + '<br><b>X: </b>'+ Highcharts.numberFormat(this.x, '1',',') +'<b> Y:</b>'+ Highcharts.numberFormat(this.y, '1',',') +'<br><span style="color: ' + this.series.color + '; font-weight:bold;">' + this.point.samp +'</span>';
},
},
subtitle: {
text: 'Data Analysis'
},
title: {
text: 'DataX vs DataY'
},
xAxis: {
minorGridLineColor: '#F0F0F0',
minorTickInterval: 'auto',
min: 0.05,
max: 900,
title: {
enabled: true,
text: 'XData'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
min: 0.05,
max: 900,
title: {
text: 'YData)'
}
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
select: function (event) {
var chart = this.series.chart;
var selectedPointsStr = "";
if (event.accumulate) {
selectedPoints.push(this);
} else {
selectedPoints = [this];
}
// when is the chart object updated? after this function finshes?
$.each(selectedPoints, function (i, value) {
selectedPointsStr += "<tr><td>" + value.x + "</td><td> " + value.y + "</td></tr><br>";
//var Plot = eval(selectedPointsStr);
});
$report.html(selectedPointsStr);
}
}
}
}
},
series: [{
type: 'line',
name: '1:1 Line',
data: [[0, 0], [1000, 1000]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
},
{name: 'group1',
data: [{x:115.9,y:179,samp:'CR13-451D_384.5-386'},{x:37.5,y:188,samp:'CR13-389D_292-293.5'}]
},
{name: 'group2',
data: [{x:27.8,y:64,samp:'CR12-361D_226.5-228'},{x:51.9,y:228,samp:'CR12-369D_428-429.5'}]
},
{name: 'group3',
data: [{x:27.2,y:863,samp:'CR12-346D_973.5-975'},{x:478.8,y:575,samp:'CR12-348D_1100-1101.5'},{x:39.1,y:598,samp:'CR12-360D_1167.5-1169'}]
},
{name: 'group4',
data: [{x:22.8,y:244,samp:'CR11-149D_333-334.5'},{x:25.3,y:224,samp:'CR11-149D_346.5-348'},{x:34.4,y:128,samp:'CR11-196D_130.5-132'},{x:198.4,y:31,samp:'CR11-197D_271.5-273'},{x:0.9,y:14,samp:'CR11-204D_127.5-129'},{x:9.1,y:223,samp:'CR11-224D_207-208.5'},{x:0.05,y:288,samp:'CR11-224D_64.5-66'},{x:0.05,y:120,samp:'CR11-228D_14-15.5'},{x:5.6,y:181,samp:'CR11-231D_93-94.5'},{x:95.6,y:0.05,samp:'CR11-246D_90-91.5'},{x:0.05,y:176,samp:'CR11-256D_130.5-132'},{x:13.1,y:133,samp:'CR11-258D_321-322.5'},{x:0.05,y:246,samp:'CR11-260D_90-91.5'},{x:340.9,y:185,samp:'CR11-266D_304.5-306'},{x:0.05,y:143,samp:'CR11-267D_12.5-14'},{x:33.1,y:239,samp:'CR11-267D_135.5-137'},{x:0.05,y:213,samp:'CR11-267D_314-315.5'},{x:180.9,y:23,samp:'CR11-270D_396.5-398'},{x:114.4,y:169,samp:'CR11-272D_301.5-303'},{x:235.9,y:12,samp:'CR11-272D_318-319.5'},{x:118.1,y:103,samp:'CR11-272D_361.5-363'},{x:22.8,y:144,samp:'CR11-274D_285-286.5'},{x:48.8,y:109,samp:'CR11-275D_209-210.5'},{x:28.4,y:185,samp:'CR11-275D_231.5-233'},{x:129.1,y:5,samp:'CR11-275D_365-366.5'},{x:18.8,y:234,samp:'CR11-277D_33-34.5'},{x:0.05,y:165,samp:'CR11-280D_145.5-147'},{x:0.05,y:261,samp:'CR11-280D_15-16.5'},{x:24.1,y:174,samp:'CR11-280D_337.5-339'},{x:15.6,y:66,samp:'CR11-280D_420-421.5'},{x:0.05,y:174,samp:'CR11-284D_217.5-219'},{x:12.2,y:441,samp:'CR11-289D_39.5-41'},{x:107.8,y:240,samp:'CR11-291D_279.5-281'},{x:0.05,y:143,samp:'CR11-297D_118.5-120'},{x:23.8,y:160,samp:'CR11-301D_127.5-129'},{x:0.05,y:321,samp:'CR11-302D_313.5-315'},{x:26.6,y:225,samp:'CR11-309D_135-136.5'},{x:0.05,y:190,samp:'CR11-313D_42-43.5'},{x:48.8,y:180,samp:'CR11-313D_456-457.5'},{x:9.7,y:208,samp:'CR11-318D_73-74.5'},{x:0.6,y:13,samp:'CR11-323D_57-58.5'},{x:12.5,y:174,samp:'CR11-324D_181-182.5'},{x:0.05,y:153,samp:'CR11-324D_244-245.5'},{x:70.3,y:128,samp:'CR11-326D_369.5-371'},{x:4.4,y:181,samp:'CR11-328D_163.5-165'},{x:0.05,y:121,samp:'CR12-340D_476-477.5'},{x:26.6,y:149,samp:'CR12-341D_133.5-135'},{x:5.3,y:194,samp:'CR12-341D_147-148.5'},{x:195,y:73,samp:'CR12-342D_609-610.5'},{x:0.05,y:226,samp:'CR12-342D_66-67.5'},{x:37.8,y:208,samp:'CR12-345D_489-490.5'},{x:50,y:150,samp:'CR12-345D_594-595.5'},{x:37.5,y:239,samp:'CR12-346D_100.5-102'},{x:0.05,y:219,samp:'CR12-346D_21-22.5'},{x:40.6,y:259,samp:'CR12-346D_312-313.5'},{x:22.2,y:208,samp:'CR12-347D_157.5-159'},{x:0.05,y:478,samp:'CR12-348D_11-12.5'},{x:30.9,y:294,samp:'CR12-348D_156.5-158'},{x:42.5,y:238,samp:'CR12-349D_438-439.5'},{x:5.6,y:210,samp:'CR12-355D_529.5-531'},{x:28.1,y:221,samp:'CR12-355D_618-619.5'},{x:72.5,y:108,samp:'CR12-357D_427.5-429'},{x:35,y:258,samp:'CR12-366D_213-214.5'},{x:0.05,y:208,samp:'CR12-369D_36.5-38'},{x:10.3,y:163,samp:'CR12-372D_320-321.5'},{x:2.5,y:195,samp:'CR12-372D_47-48.5'},{x:22.8,y:175,samp:'CR12-374D_109.5-111'},{x:29.1,y:219,samp:'CR12-374D_174-175.5'},{x:42.5,y:203,samp:'CR12-374DB_372-373.5'},{x:30,y:175,samp:'CR12-375D_253.5-255'},{x:63.8,y:150,samp:'CR12-375D_304.5-306'},{x:18.8,y:165,samp:'CR13-377D_374-375.5'},{x:4.7,y:189,samp:'CR13-381D_55.5-57'},{x:72.2,y:163,samp:'CR13-386D_235.5-237'},{x:29.1,y:203,samp:'CR13-390D_159.5-161'},{x:12.2,y:204,samp:'CR13-393D_462-463.5'},{x:22.2,y:173,samp:'CR13-393D_481.5-483'},{x:23.8,y:179,samp:'CR13-394D_617-618.5'},{x:50.6,y:266,samp:'CR13-399D_189.5-191'},{x:7.8,y:245,samp:'CR13-409D_160.5-162'},{x:26.3,y:193,samp:'CR13-416D_506-507.5'},{x:42.5,y:176,samp:'CR13-422D_511.5-513'},{x:23.8,y:221,samp:'CR13-428D_510-511.5'},{x:88.8,y:259,samp:'CR13-432D_195.5-197'},{x:28.8,y:245,samp:'CR13-432D_236-237.5'},{x:7.2,y:158,samp:'CR13-433D_155-156.5'},{x:18.4,y:169,samp:'CR13-433D_228.5-230'},{x:43.8,y:229,samp:'CR13-433DB_303.5-305'},{x:1.9,y:159,samp:'CR13-433DB_488-489.5'},{x:27.2,y:233,samp:'CR13-435D_349.5-351'},{x:37.2,y:203,samp:'CR13-435D_429-430.5'},{x:26.6,y:223,samp:'CR13-438D_331.5-333'},{x:65.3,y:161,samp:'CR13-438D_573-574.5'},{x:365.9,y:79,samp:'CR13-440D_370.5-372'},{x:315.6,y:56,samp:'CR13-440D_382.5-384'},{x:11.9,y:183,samp:'CR13-444D_160.5-162'},{x:29.1,y:213,samp:'CR13-444D_202.5-204'},{x:2.5,y:214,samp:'CR13-447D_127.5-129'},{x:7.8,y:200,samp:'CR13-449D_272-273.5'},{x:17.2,y:266,samp:'CR13-449D_537.5-539'}]
},
{name: 'group5',
data: [{x:238.4,y:80,samp:'CR11-197D_418.5-420'},{x:0.9,y:12,samp:'CR11-226D_148.5-150'},{x:30.3,y:220,samp:'CR11-260D_121.5-123'},{x:45,y:309,samp:'CR11-260D_132-133.5'},{x:42.8,y:238,samp:'CR11-260D_183-184.5'},{x:6.3,y:499,samp:'CR11-282D_5-8'},{x:28.1,y:136,samp:'CR12-340D_279.5-281'},{x:0.05,y:134,samp:'CR12-343D_309-310.5'},{x:221.6,y:175,samp:'CR12-343D_316.5-318'},{x:24.4,y:203,samp:'CR12-347D_351-352.5'},{x:43.8,y:55,samp:'CR12-357D_543-544.5'},{x:29.7,y:259,samp:'CR13-389D_446.5-448'},{x:0.05,y:150,samp:'CR13-391D_116.5-118'},{x:0.05,y:208,samp:'CR13-391DB_115-116.5'},{x:40.6,y:249,samp:'CR13-394D_114.5-116'},{x:34.7,y:229,samp:'CR13-396D_247.5-249'},{x:23.1,y:186,samp:'CR13-414D_196.5-198'},{x:47.2,y:239,samp:'CR13-416D_392-393.5'},{x:81.6,y:54,samp:'CR13-428D_372-373.5'},{x:1.9,y:139,samp:'CR13-429D_583.5-585'},{x:18.4,y:235,samp:'CR13-432D_489.5-491'},{x:47.8,y:166,samp:'CR13-448D_230-231.5'},{x:14.4,y:201,samp:'CR13-451D_332-333.5'}]
},
{name: 'group6',
data: [{x:0.05,y:179,samp:'CR11-260D_112.5-114'},{x:0.05,y:585,samp:'CR11-267D_840.5-842'},{x:0.05,y:608,samp:'CR11-267D_852.5-854'},{x:68.4,y:560,samp:'CR11-300D_759.5-761'},{x:0.05,y:793,samp:'CR11-324D_917.5-919'},{x:39.1,y:525,samp:'CR12-346D_792-793.5'},{x:303.4,y:475,samp:'CR12-349D_865.5-867'},{x:135.9,y:550,samp:'CR12-352D_972-973.5'},{x:80.9,y:265,samp:'CR12-354D_1034-1035.5'}]
},
{name: 'group7',
data: [{x:3.4,y:299,samp:'CR11-294D_0-2'}]
},
{type: 'line',
name: '3:1 Line',
data: [[0, 0], [1000, 3000]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}],
exporting: {
sourceWidth: 800,
sourceHeight: 400,
chartOptions: {
subtitle: null
}
}
});
$('#container2').highcharts({
chart: {
data: {
table: eval(document.getElementById('report'))
},
type: 'scatter',
zoomType: 'xy',
plotBorderColor: 'black',
plotBorderWidth: 1
},
tooltip: {
formatter: function() {
return this.series.name + '<br><b>X: </b>'+ Highcharts.numberFormat(this.y, '1',',') +'<b> Y: </b>'+ Highcharts.numberFormat(this.y, '1',',') +'<br><span style="color: ' + this.series.color + '; font-weight:bold;">' + this.point.samp +'</span>';
},
series: [{
name: 'new Series', //this is the new series I want to populate the other charts
data: (function() {table:
data.push(document.getElementById('report'))
return data;
})
}]
}
});
});
</script>
<body>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="container1" style="height: 400px; min-width: 530px"></div></td>
<td> <table id="report"></table></td>
</tr>
<tr>
<td><div id="container2" style="height: 400px; min-width: 530px"></div></td>
<td><div id="container3" style="height: 400px; min-width: 530px"></div></td>
</tr>
</table>
</body>
</html>
I'm not sure I'm taking the right approach. The end result will be the other 8 charts will be "dynamic" with respect to this other series (static data) that will be different X,Y pairs for each sample. So as I click on chart1, the other points appear in the other charts based on the sample ID.
my data is as follows:
SampID Data1 Data2 Data3 Data4 Data5 Data6 Data7, etc
Each of the 9 charts is a combination of these data but they all refer to the sampID. So chart 1 is Data1 vs Data2, chart 2 might be Data2 vs Data6 but they all refer back to the sampID as these data are in rows.
The real challenge is trying to link the sampID of the selected samples in chart 1 with the sampIDs of the same name in Charts 2-9.
Any advice on this?
Your structure of table is incorrect, it should have <thead> element. Fixed example http://jsfiddle.net/q2XKF/5/