How to save annotation customer input text data

How to save annotation customer input text data - javascript

I use annotation.js in order to add customer input text data. My source code is given below... But I cannot create save text data when the customer presses the Done button. How do I change this source code to solve my problem?
$(function () {
var options = {
chart: {
width: 980,
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
renderTo: 'container',
backgroundColor: '#f7f7f7',
marginTop: 50
},
xAxis: {
min: 0,
max: 10
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title"> Drag and drop on a chart to add annotation <span class="chart-href"> Black Label </span> <span class="chart-subtitle">plugin by </span></span>'
},
annotations: [{
title: {
text: '<span style="">drag me anywhere <br> dblclick to remove</span>',
style: {
color: 'red'
}
},
anchorX: "left",
anchorY: "top",
allowDragX: true,
allowDragY: true,
x: 515,
y: 155
}, {
title: 'drag me <br> horizontaly',
anchorX: "left",
anchorY: "top",
allowDragY: false,
allowDragX: true,
xValue: 4,
yValue: 10,
shape: {
type: 'path',
params: {
d: ['M', 0, 0, 'L', 110, 0],
stroke: '#c55'
}
}
}, {
title: 'on point <br> drag&drop <br> disabled',
linkedTo: 'high',
allowDragY: false,
allowDragX: false,
anchorX: "center",
anchorY: "center",
shape: {
type: 'circle',
params: {
r: 40,
stroke: '#c55'
}
}
}, {
x: 100,
y: 200,
title: 'drag me <br> verticaly',
anchorX: "left",
anchorY: "top",
allowDragY: true,
allowDragX: false,
shape: {
type: 'rect',
params: {
x: 0,
y: 0,
width: 55,
height: 40
}
}
}],
series: [{
data: [13, 4, 5, {
y: 1,
id: 'high'
},
2, 1, 3, 2, 11, 6, 5, 13, 6, 9, 11, 2, 3, 7, 9, 11]
}]
};
var chart = new Highcharts.StockChart(options);
});

Related

Highcharts plotbands different per category

I am attempting to create the following chart:
However I can't seem to get the plotbands to work in this way; right now, they fill the entire axis:
I am not sure if I should use annotations instead, but so far I haven't gotten it to work. What can I try next?
Highcharts.chart('container',{
credits: {
enabled: false
},
title: {
text: "hello world",
style: {
visibility: 'hidden'
}
},
chart: {
type: 'line',
width: 400,
},
legend: {
enabled: false
},
exporting: {
enabled: true,
allowHTML:true,
chartOptions: {
chart: {
marginLeft: 175,
marginRight: 175
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true
}
}
}
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
gridLineWidth: 2,
tickWidth: 2,
tickLength: 20,
plotBands: [{
color: 'rgba(231, 23, 60, 0.5)', // Color value
from: 5, // Start of the plot band
to: 6.2 // End of the plot band
},
{
color: 'rgba(53, 101, 237, 0.5)', // Color value
from: 1, // Start of the plot band
to: 3 // End of the plot band
}
],
title: {
align: 'high',
offset: -40,
text: 'mmol/L',
style: {
fontWeight: "bold",
fontSize: 15
},
rotation: 0,
y: -20
},
min: 0,
max: 7,
labels: {
x: -10,
y: -3,
formatter: function () {
if (this.value != 0) {
if (this.value < 8) {
return this.value;
}
}
},
style: {
fontWeight: "400",
lineHight: "20",
padding: "0",
fontSize: "13"
}
}
},
annotations: [{
shapes: [{
point: '0',
type: 'circle',
r: 10
}, {
point: '3',
type: 'rect',
width: 20,
height: 20,
x: -10,
y: -25
}, {
fill: 'none',
stroke: 'red',
strokeWidth: 3,
type: 'path',
points: ['0', '1', {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}],
markerEnd: 'arrow'
}],
labels: [{
point: {
x: 6,
y: 195,
xAxis: 0,
yAxis: 0
}
}]
}],
xAxis: {
gridLineColor: 'transparent',
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
},
categories: [2018, 2019]
},
plotOptions: {
line: {
dataLabels: {
style: {
fontSize: 14
},
verticalAlign: "top",
useHTML: true,
format: '<div style="max-width: 10ch; text-align: center;">{y}<br/>mmol/L</div>'
}
}
},
series: [{
name: '',
color: "black",
data: [5.4, 3],
showInLegend: false,
dataLabels: {
enabled: true,
useHTML: true,
}
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>

This kind of plotBand shape is not possible from the API level, but you can simulate it in several ways. Example configurations:
SVG Renderer:
chart: {
events: {
render() {
const chart = this;
if (chart.rects) {
chart.rects = chart.rects.destroy();
}
chart.rects = chart.renderer.g('rects').attr({
zIndex: 1
}).add();
let x = chart.xAxis[0].toPixels(1),
y = chart.yAxis[0].toPixels(4),
width = chart.xAxis[0].toPixels(2) - chart.xAxis[0].toPixels(1),
height = chart.yAxis[0].toPixels(2) - chart.yAxis[0].toPixels(4);
chart.rect = chart.renderer.rect(x, y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
chart.rect = chart.renderer.rect(chart.xAxis[0].toPixels(3), y, width, height)
.attr({
fill: 'grey'
}).add(chart.rects)
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/wst607ub/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Annotations:
annotations: [{
draggable: false,
shapes: [{
points: [{
x: 1,
y: 2,
xAxis: 0, // xAxis reference used, use xAxis value
yAxis: 0 // yAxis reference used, use xAxis value
}, {
x: 2,
y: 2,
xAxis: 0,
yAxis: 0
}, {
x: 2,
y: 4,
xAxis: 0,
yAxis: 0
}, {
x: 1,
y: 4,
xAxis: 0,
yAxis: 0
}],
type: 'path'
}]
}]
Demo:
https://jsfiddle.net/BlackLabel/uvxzp6o7/
API Reference:
https://api.highcharts.com/highcharts/annotations
Polygon series:
series: [{
name: 'Polygons',
type: 'polygon',
color: 'grey',
showInLegend: false,
enableMouseTracking: false,
states: {
inactive: {
opacity: 1,
},
},
data: [
[1, 2],
[2, 2],
[2, 4],
[1, 4],
null, // allows multiple polygons
[3, 2],
[4, 2],
[4, 4],
[3, 4],
]
}]
Demo:
https://jsfiddle.net/BlackLabel/4n7ep3k2/
API Reference:
https://api.highcharts.com/highcharts/series.polygon
Take note that annotations and polygon series require the module to be included.

highcharts: Add marker to a x-range chart

I want to create a dumbbell chart using highcharts.
I used x-range chart for this
here is the link: https://jsfiddle.net/thushara07/nLkxa0wr/15/
series: [{
// name: 'Project 3',
// pointPadding: 0,
// groupPadding: 0,
//borderColor: 'gray',
pointWidth: 5,
data: [{
x: 32,
x2: 33,
y: 0,
// partialFill: 0.25
}, {
x: 44,
x2:45,
y: 1
}, {
x:30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'left',
enabled: true
}
}]
expected output: I want to show markers for each line created as shown
(https://images.app.goo.gl/LAKQBdsaKBH2hjS59
)

It can be done by adding additional scatter series that is linked to x-range:
Code:
Highcharts.chart('container', {
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
type: 'xrange',
pointWidth: 5,
id: 'main',
data: [{
x: 32,
x2: 33,
y: 0
}, {
x: 44,
x2: 45,
y: 1
}, {
x: 30,
x2: 32,
y: 2
}],
dataLabels: {
align: 'center',
enabled: true
}
}, {
type: 'scatter',
linkedTo: 'main',
marker: {
radius: 5
},
data: [{
x: 32,
y: 0,
color: 'red'
}, {
x: 33,
y: 0,
color: 'grey'
}, {
x: 44,
y: 1,
color: 'red'
}, {
x: 45,
y: 1,
color: 'grey'
}, {
x: 30,
y: 2,
color: 'red'
}, {
x: 32,
y: 2,
color: 'grey'
}]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/4qj89cog/
API reference:
https://api.highcharts.com/highcharts/series.scatter
https://api.highcharts.com/highcharts/series.scatter.linkedTo

How can i show image on group columns highcharts?

I have a group chart
I want to show images on top of each
So there are only two images, so the value in xaxis subcategories if the value is negative i want to show image2 and if value is positive show image1
I have seen this answer but cant figure out this in group chart
highchart: add images to top of chart on every column
My group chart Fiddle
http://jsfiddle.net/KWPsv/90/
My Code:
Highcharts.setOptions({
colors: [
'#5a9bd4',
'#faa75b',
'#7ac36a',
'#9e67ab',
'#f15a60',
'#ce7058',
'#d77fb4'
]
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
legend: {},
tooltip: {
shared: true,
formatter: function() {
var s = [],
xAxis = this.points[0].series.xAxis,
categoryIndex = xAxis.categories.indexOf(this.x),
title = this.x,
subTitle = xAxis.options.subtitles[categoryIndex];
s.push(title + '<br>');
s.push(subTitle + '<br>');
$.each(this.points, function(i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : ' +
point.y + '<span>');
});
return s.join(' and ');
},
},
plotOptions: {
series: {
shadow: false,
borderWidth: 0,
pointPadding: 0
}
},
xAxis: {
subtitles: ['2', '-1', '4', '-3', '7'],
categories: ['MainTask 1', 'MainTask2', 'MainTask3', 'MainTask4', 'MainTask5'],
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickLength: 3,
title: {
text: 'X Axis Title',
style: {
color: '#333'
}
}
},
yAxis: {
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 3,
gridLineColor: '#ddd',
title: {
text: 'Y Axis Title',
rotation: 0,
margin: 50,
style: {
color: '#333'
}
}
},
series: [{
y: 0,
mydata: 10,
name: 'Designation 1',
data: [7, 12, 16, 32, 64]
}, {
y: 0,
mydata: 20,
name: 'Designation 2',
data: [16, 32, 64, 7, 12]
}, {
y: 0,
mydata: 30,
name: 'Designation 3',
data: [32, 64, 7, 12, 16],
}, {
mydata: 13,
name: 'Designation 4',
data: [7, 12, 16, 32, 64]
}, {
y: 0,
mydata: 23,
name: 'Designation 5',
data: [16, 32, 64, 7, 12]
}, {
y: 0,
mydata: 22,
name: 'Designation 6',
data: [32, 64, 7, 12, 16]
}]
});

Simply use Renderer.image to add an image on a chart. You can do that for example on load event.
API Reference:
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/Renderer.image
Example:
http://jsfiddle.net/kudxL3kh/

x-axis symbols on Data scroll in Echarts not scrolling correctly.

I am making a simple bar graph using echarts js with symbols on x Axis. I am also trying to do datascroll for the xAxis, but when I am scrolling the symbol positions are not changing with the scroll. I go through the API doc of echarts but found nothing.
I am trying this JsFiddle
var advertLineChart = document.getElementById('advertLineChart');
var myAdvertLineChart = echarts.init(advertLineChart);
createAdvertLineChart();
function createAdvertLineChart() {
var option = {
title: {
x: 'center',
text: 'ECharts例子个数统计',
subtext: 'Rainbow bar example',
link: 'http://echarts.baidu.com/doc/example.html'
},
tooltip: {
trigger: 'item'
},
toolbox: {
show: true,
orient: 'vertical',
y: 'center',
itemSize: 12,
feature: {
mark: {
show: true,
title: {
mark: 'Create line mark',
markUndo: 'Undo line mark',
markClear: 'Clear all line Marks'
},
lineStyle: {
width: 2,
color: '#1e90ff',
type: 'dashed'
}
},
dataZoom: {
show: true,
title: {
dataZoom: 'Data Zoom',
dataZoomReset: 'Data zoom reset'
}
},
dataView: {
show: true,
title: 'Show Data',
readOnly: false,
lang: ['Data View', 'Close', 'Refresh']
},
magicType: {
show: true,
type: ['line', 'bar'],
title: {
line: 'Line View',
bar: 'Bar View'
}
},
restore: {
show: true,
title: 'Restore'
},
saveAsImage: {
show: true,
title: 'Save as Image',
lang: ['Click Save']
}
}
},
dataZoom: {
show: true,
realtime: true,
showDetail: true,
//orient: 'vertical', // 'horizontal'
//x: 0,
y: 36,
//width: 400,
height: 20,
//backgroundColor: 'rgba(221,160,221,0.5)',
//dataBackgroundColor: 'rgba(138,43,226,0.5)',
//fillerColor: 'rgba(38,143,26,0.6)',
//handleColor: 'rgba(128,43,16,0.8)',
//xAxisIndex:[],
//yAxisIndex:[],
start: 40,
end: 70,
zoomLock: true
},
calculable: true,
grid: {
borderWidth: 0,
y: 80,
y2: 60
},
xAxis: [{
type: 'category',
show: false,
data: ['Line', 'Bar', 'Scatter', 'K', 'Pie', 'Radar', 'Chord', 'Force', 'Map', 'Gauge', 'Funnel', 'Line1', 'Bar1', 'Scatter1', 'K1', 'Pie1', 'Radar1', 'Chord1', 'Force1', 'Map1', 'Gauge1', 'Funnel1', 'Funnel2', 'Line2', ]
}],
yAxis: [{
type: 'value',
show: false
}],
series: [{
name: 'ECharts例子个数统计',
type: 'bar',
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data: [12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7, 12, 21, 10, 4, 12, 5, 6, 5, 25, 23, 7, 20, 100],
markPoint: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0)',
formatter: function(params) {
return '<img src="' + params.data.symbol.replace('image://', '') + '"/>';
}
},
data: [{
xAxis: 0,
y: 320,
name: 'Line',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/21af6834-2b44-4217-9516-3b2add06114c.png'
}, {
xAxis: 1,
y: 320,
name: 'Bar',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/5268c2b2-0b1f-4373-b235-7f71b6bb4290.png'
}, {
xAxis: 2,
y: 320,
name: 'Scatter',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/69a7df86-0bf6-4cea-a6b6-881a4052ec20.png'
}, {
xAxis: 3,
y: 320,
name: 'K',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/de874b8f-f8df-4905-9650-8efa8f19c015.png'
}, {
xAxis: 4,
y: 320,
name: 'Pie',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/b83f4915-8587-4df5-bde6-308ec0f472b3.png'
}, {
xAxis: 5,
y: 320,
name: 'Radar',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/db739705-c9e3-47bd-a3de-7e757ce0c434.png'
}, {
xAxis: 6,
y: 320,
name: 'Chord',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/131201d2-9154-4391-89e7-73d83c12d33c.png'
}, {
xAxis: 7,
y: 320,
name: 'Force',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/158dd833-a788-4e83-a7fd-ba42addaae31.png'
}, {
xAxis: 8,
y: 320,
name: 'Map',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/b6933882-f367-419e-8f6e-df65ae74a859.png '
}, {
xAxis: 9,
y: 320,
name: 'Gauge',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/bae5221a-02e7-407a-8fa3-36bb8456dafa.png'
}, {
xAxis: 10,
y: 320,
name: 'Funnel',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 11,
y: 320,
name: 'Line1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 12,
y: 320,
name: 'Bar1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 13,
y: 320,
name: 'Scatter1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 14,
y: 320,
name: 'K1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 15,
y: 320,
name: 'Pie1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 16,
y: 320,
name: 'Radar1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 17,
y: 320,
name: 'Chord1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 18,
y: 320,
name: 'Force1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 19,
y: 320,
name: 'Map1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 20,
y: 320,
name: 'Gauge1',
symbolSize: 16,
symbol: 'http://neoma-server.appspot.com/api/advert/image/03dc461c-20fc-49b7-8ef4-59649995fcb8.png'
}, {
xAxis: 21,
y: 320,
name: 'Funnel1',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/69a7df86-0bf6-4cea-a6b6-881a4052ec20.png'
}, {
xAxis: 22,
y: 320,
name: 'Funnel2',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/5268c2b2-0b1f-4373-b235-7f71b6bb4290.png'
}, {
xAxis: 23,
y: 320,
name: 'Line2',
symbolSize: 16,
symbol: 'http://localhost:8080/api/advert/image/21af6834-2b44-4217-9516-3b2add06114c.png'
}, ]
}
}]
};
myAdvertLineChart.setOption(option);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
<div id="advertLineChart" style="width: 100%; height: 350px;"></div>
How to scroll the images correctly when scrolling the slider? Thanks in advance.

Button to show all legend items in highcharts

Thanks to this helpful post, I was able to re-format the legend so that clicking a legend item shows only that item, rather than hiding it and showing all other items.
Once the user clicks on a legend item, I'd like for the user to be able to click a button and once again see all of the legend items.
Here's the fiddle: http://jsfiddle.net/scheltense/qb13g51u/1/
And the code:
$(function () {
$('#container').highcharts({
credits: {
position: {
align: 'right',
x: -10,
y: -1
},
text: 'Source: Federal Emergency Management Agency',
href: 'http://www.FEMA.gov'
},
chart: {
type: 'area'
},
title: {
text: 'Federal Disaster Declarations: 2001-2013',
align: 'left',
x: 25,
y: 5
},
subtitle: {
text: 'The Federal Emergency Management Agency (FEMA) uses these categories to classify federal disasters delcarations.',
align: 'left',
x: 25,
y: 30
},
legend: {
backgroundColor: '#F5F3F2',
layout: 'vertical',
symbolHeight: 8,
symbolWidth: 10,
align: 'left',
verticalAlign: 'top',
floating: true,
x: 62,
y: 72,
padding: 3,
itemMarginTop: 3,
itemMarginBottom: 3,
itemStyle: {
lineHeight: '8px',
color: '#000000',
fontWeight: 'normal'
},
reversed: true
},
xAxis: {
categories: ['2001', '\'02', '\'03', '\'04', '\'05', '\'06', '\'07', '\'08', '\'09', '\'10', '\'11', '\'12', '\'13', '\'14*'],
tickmarkPlacement: 'on',
title: {
enabled: true
}
},
yAxis: {
title: {
text: 'Declarations'
},
max: 100,
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
shared: false,
valueSuffix: ''
},
plotOptions: {
area: {
events:
{
legendItemClick: function(event)
{
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].hide();
}
else
{
series[i].show();
}
}
return false;
}
},
stacking: 'normal',
lineColor: '#E5E2E0',
lineWidth: 0,
marker: {
enabled: false
}
}
},
series: [{
name: 'Other',
color: '#9fcad3',
data: [6, 5, 2, 3, 0, 4, 1, 1, 1, 1, 8, 4, 6, 0],
marker: {
symbol: 'circle'
}
}, {
name: 'Hurricane',
color: '#bb6b85',
data: [0, 4, 8, 14, 11, 0, 0, 8, 1, 1, 14, 15, 2, 0],
marker: {
symbol: 'circle'
}
}, {
name: 'Severe Winter Weather',
color: '#bba16b',
data: [4, 5, 6, 1, 2, 1, 5, 5, 5, 12, 5, 0, 3, 11],
marker: {
symbol: 'circle'
}
}, {
name: 'Flood',
color: '#6b85bb',
data: [5, 4, 0, 1, 2, 2, 1, 3, 3, 7, 19, 3, 15, 2],
marker: {
symbol: 'circle'
}
}, {
name: 'Severe Storm and Tornado',
color: '#6bbba1',
data: [27, 25, 35, 42, 30, 45, 56, 56, 48, 55, 50, 25, 36, 15],
marker: {
symbol: 'circle'
}
}]
}, function (chart) {
var point = chart.series[0].data[8],
text = chart.renderer.text(
'*through Aug. 5, 2014',
point.plotX + chart.plotLeft - 280,
point.plotY + chart.plotTop + 316
).attr({
zIndex: 5
})
.css({
color: '#909090',
fontSize: '10px'
})
.add(),
box = text.getBBox();
});
});
This is the portion of the code that shows only the legend item that has been clicked:
plotOptions: {
area: {
events:
{
legendItemClick: function(event)
{
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].hide();
}
else
{
series[i].show();
}
}
return false;
}
},
This is my first JavaScript project, so I apologize if the question is unclear, and I appreciate any help that can be provided.
Thanks very much.

The series object has a show() function (http://api.highcharts.com/highcharts#Series.show).
Assuming your button has an id of showall:
$('#showall').on('click', function() {
var series = $('#container').highcharts().series;
for(i=0;i<series.length;i++) {
if (!series[i].visible) series[i].show();
}
});
http://jsfiddle.net/qb13g51u/2/

Develop Reference

JavaScript is the programming language of the Web.

How to save annotation customer input text data - javascript

Related

Highcharts plotbands different per category

highcharts: Add marker to a x-range chart

How can i show image on group columns highcharts?

x-axis symbols on Data scroll in Echarts not scrolling correctly.

Button to show all legend items in highcharts

Categories

Resources