Is it possible to hide null values on hAxis?
or better to set pointSize: 0 when the point is on the hAxis
if yes, which Option?
I tried a ComboChart
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
var options = {
width: 2500,
height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: { 3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
just a little confused, title says hide 0, but question says hide null...
but if you use null instead of 0, then the star will not appear...
['', 2, 4, null, null, null, null, null], // <-- star will NOT appear
['', 2, 4, 0, 0, 0, 0, 0], // <-- star will appear at the bottom
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = [
['', 2, 4, null, null, null, null, null],
['', 2, 4, 0, 0, 0, 0, 0],
];
var options = {
//width: 2500,
//height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: {
3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = google.visualization.arrayToDataTable(jsonData, true);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
you can use a data view with calculated columns to change zero to null,
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var jsonData = [
['', 2, 4, null, null, null, null, null],
['', 2, 4, 0, 0, 0, 0, 0],
];
var options = {
//width: 2500,
//height: 1080,
legend: { position: 'top', maxLines: 10 },
bar: { groupWidth: '75%' },
isStacked: true,
title: '15-tägiger Wettbewerb, 17.01.2018 - 06.02.2018',
titlePosition: 'out',
colors: ['green', '#e6693e', 'blue'],
backgroundColor: 'white',
tooltip: { trigger: 'selection' },
legend: { position: 'none' },
vAxis: { viewWindowMode:'explicit', viewWindow: { max: 130}},
seriesType: 'bars',
series: {
3: {type: 'scatter', pointSize: 30, color: 'black'},
4: {type: 'scatter', pointSize: 30, color: 'black'},
5: {type: 'scatter', pointSize: 30, color: 'black'},
6: {type: 'scatter', pointSize: 30, color: 'black'},
},
pointShape: 'star',
};
var data = google.visualization.arrayToDataTable(jsonData, true);
// build view
var view = new google.visualization.DataView(data);
var viewColumns = [];
$.each(new Array(data.getNumberOfColumns()), function (col) {
viewColumns.push({
calc: function (dt, row) {
var value = dt.getValue(row, col);
if (value === 0) {
value = null;
}
return value;
},
label: data.getColumnLabel(col),
type: data.getColumnType(col)
});
});
view.setColumns(viewColumns);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
// draw view
chart.draw(view, options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I have a combo chart containing area, bars and line graphs. I'd like the area and line charts to align maximally to the left and right side. For bars chart it's not required. Unfortunately I'm unable to align the graphs properly. I went through the documentation and couldn't find a solution to my problem.
Current chart:
Expected chart:
Here is the GoogleChartInterface object of the chart (I'm adding dataTable and ticks dynamically):
{
chartType: 'ComboChart',
dataTable: [],
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
height: '160',
chartArea: {
width: '90%',
height: '79%',
},
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'EEEE',
gridlines: {
count: 0,
color: 'transparent'
},
ticks: [],
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
};
in order to stretch the area and line series to the edges of the chart,
we must first use a data type that will render a continuous x-axis.
in this case, we will use date time.
next, we use option hAxis.viewWindow to control where the series start and end.
viewWindow has two properties, min & max.
the values of min & max should match the data type of the x-axis.
in this case, we set the values to the dates where the series should begin and end.
hAxis: {
viewWindow: {
min: new Date(2020, 10, 13),
max: new Date(2020, 10, 19)
}
}
this will stretch the series to the edges of the chart.
see following working snippet for an example...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function() {
var data = google.visualization.arrayToDataTable([
['Date', 'y0', 'y1', 'y2'],
[new Date(2020, 10, 13), 100, 50, 25],
[new Date(2020, 10, 14), 110, 45, 5],
[new Date(2020, 10, 15), 90, 40, 60],
[new Date(2020, 10, 16), 80, 30, 10],
[new Date(2020, 10, 17), 70, 20, 0],
[new Date(2020, 10, 18), 60, 10, 0],
[new Date(2020, 10, 19), 50, 5, 0]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'chart',
dataTable: data,
options: {
focusTarget: 'category',
animation: {
startup: true,
easing: 'out',
duration: 500,
},
chartArea: {
left: 60,
top: 12,
right: 60,
bottom: 72,
height: '100%',
width: '100%'
},
height: '100%',
width: '100%',
vAxes: {
0: {
titlePosition: 'none',
textStyle: {
color: '#febd02',
bold: true,
fontSize: 13,
},
format: '#',
gridlines: {
color: '#eaeaea',
count: '5',
},
interpolateNulls: true,
},
1: {
titlePosition: 'none',
format: '#',
gridlines: {
color: 'transparent'
},
interpolateNulls: true,
},
2: {
groupWidth: '100%',
titlePosition: 'none',
textStyle: {
color: '#0284ff',
bold: true,
fontSize: 13,
},
format: 'decimal',
gridlines: {
color: 'transparent'
},
},
},
hAxis: {
textStyle: {
color: '#393939',
bold: true,
fontSize: 13,
},
format: 'dd MMM. yyyy',
gridlines: {
color: 'transparent'
},
ticks: data.getDistinctValues(0),
viewWindow: data.getColumnRange(0)
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
type: 'line'
},
2: {
targetAxisIndex: 2,
type: 'bars',
dataOpacity: 0.5,
},
},
colors: [
'#febd02',
'#a5a5a5',
'#0284ff',
],
bar: {
groupWidth: '35'
},
legend: {
position: 'none'
},
},
});
chart.draw();
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
min-height: 160px;
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I already reversed the column bars from top to bottom but I want the one column bar to be not reversed for some reason. I lost ideas how to achieve this.
It should look from this.
Google chart 1
to this.
Google chart 2
see the Effective column
codepen:
https://codepen.io/jayrexacilo/pen/PBQwWQ
html:
<div id="call_analysis_container">
<div class="chart-title bg-blue">Call analysis</div>
<div id="call_analysis" style="width: 80%; height: 200px;"></div>
</div>
js:
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawCallAnalysis);
function drawCallAnalysis() {
var dataArr = [
["Analysis", "Calls", { role: "style" } ],
["Target Calls", 350, "#FFFF00"],
["On Route Calls", 185, "#00B050"],
["Off Route", 35, "#B1A0C7"],
["Calls not Made", 17, "#000000"],
["Effective", 120, "#E26B0A"]
];
var data = google.visualization.arrayToDataTable(dataArr);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "",
seriesType: 'bars',
legend: { position: "none" },
backgroundColor: '#4F81BD',
vAxis: {
textStyle: {color: '#4F81BD'},
viewWindowMode:'none',
viewWindow:{
max:350,
min:0
},
gridlines: {
color: 'transparent',
count: 8
},
direction: '-1'
},
enableInteractivity: false
};
var chart = new google.visualization.ComboChart(document.getElementById("call_analysis"));
chart.draw(view, options);
}
in google charts, the only way to reverse the direction of a single column is to have two series of data
then you can assign one of the series to a different axis, and reverse the direction of the new axis
the problem with this approach is the additional series will cause the columns to be off center,
because it is expecting two columns, but we only want one.
see following working snippet...
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawCallAnalysis);
function drawCallAnalysis() {
var dataArr = [
["Analysis", "Calls", { role: "style" } , "Calls", { role: "style" } ],
["Target Calls", 350, "#FFFF00", null, null],
["On Route Calls", 185, "#00B050", null, null],
["Off Route", 35, "#B1A0C7", null, null],
["Calls not Made", 17, "#000000", null, null],
["Effective", null, null, 120, "#E26B0A"]
];
var data = google.visualization.arrayToDataTable(dataArr);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 2, 3, {
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}, 4]);
var options = {
title: '',
seriesType: 'bars',
legend: {position: 'none'},
backgroundColor: '#4F81BD',
vAxis: {
textStyle: {color: '#4F81BD'},
viewWindowMode: 'none',
viewWindow: {
max: 350,
min: 0
},
gridlines: {
color: 'transparent',
count: 8
}
},
vAxes: [
{direction: -1},
{direction: 1}
],
series: {
1: {
targetAxisIndex: 1
}
},
enableInteractivity: false
};
var chart = new google.visualization.ComboChart(document.getElementById('call_analysis'));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="call_analysis"></div>
a better approach might be to draw two charts, side-by-side...
see following working snippet...
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawCallAnalysis);
function drawCallAnalysis() {
var dataArr = [
["Analysis", "Calls", { role: "style" } ],
["Target Calls", 350, "#FFFF00"],
["On Route Calls", 185, "#00B050"],
["Off Route", 35, "#B1A0C7"],
["Calls not Made", 17, "#000000"],
["Effective", 120, "#E26B0A"]
];
var data = google.visualization.arrayToDataTable(dataArr);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 2]);
var viewa = new google.visualization.DataView(view);
viewa.setRows([0, 1, 2, 3]);
var viewb = new google.visualization.DataView(view);
viewb.setRows([4]);
var options = {
annotations: {
textStyle: {fontSize: 12}
},
chartArea: {
width: '100%'
},
title: '',
seriesType: 'bars',
legend: {position: 'none'},
backgroundColor: '#4F81BD',
hAxis: {
textStyle: {fontSize: 12},
},
vAxis: {
textStyle: {color: '#4F81BD'},
viewWindowMode: 'none',
viewWindow: {
max: 350,
min: 0
},
gridlines: {
color: 'transparent',
count: 8
},
direction: '-1'
},
enableInteractivity: false
};
options.width = 100 * viewa.getNumberOfRows();
var charta = new google.visualization.ComboChart(document.getElementById('call_analysis_a'));
charta.draw(viewa, options);
options.vAxis.direction = 1;
options.width = 100 * viewb.getNumberOfRows();
var chartb = new google.visualization.ComboChart(document.getElementById('call_analysis_b'));
chartb.draw(viewb, options);
}
.container {
background-color: #4F81BD;
display: inline-block;
padding: 24px;
white-space: nowrap;
}
.chart {
display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="chart" id="call_analysis_a"></div>
<div class="chart" id="call_analysis_b"></div>
</div>
I have created a Bar graph using echarts. I want to bind multiple values to data object dynamically, currently I'm able to bind only single value. here is my java script. I'mm a newbie for this, hoping for a fully functional solution.
var myChart = echarts.init(document.getElementById('page_views_today'));
var option = {
// Setup grid
grid: {
zlevel: 0,
x: 20,
x2: 40,
y: 20,
y2: 20,
borderWidth: 0,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow', // line|shadow
lineStyle: { color: 'rgba(0,0,0,.5)', width: 1 },
shadowStyle: { color: 'rgba(0,0,0,.1)' }
}
},
// Add legend
legend: {
data: []
},
toolbox: {
orient: 'vertical',
show: true,
showTitle: true,
color: ['#bdbdbd', '#bdbdbd', '#bdbdbd', '#bdbdbd'],
feature: {
mark: { show: false },
dataZoom: {
show: true,
title: {
dataZoom: 'Data Zoom',
dataZoomReset: 'Reset Zoom'
}
},
dataView: { show: false, readOnly: true },
magicType: {
show: true,
itemSize: 12,
itemGap: 12,
title: {
line: 'Line',
bar: 'Bar',
},
type: ['line', 'bar'],
option: {
/*line: {
itemStyle: {
normal: {
color:'rgba(3,1,1,1.0)',
}
},
data: [1,2,3,4,5,6,7,8,9,10,11,12]
}*/
}
},
restore: { show: false },
saveAsImage: { show: true, title: 'Save as Image' }
}
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'0h-2h', '2h-4h', '4h-6h', '6h-8h', '8h-10h', '10h-12h', '12h-14h', '14h-16h', '16h-18h', '18h-20h', '20h-22h', '22h-24h'
],
axisLine: {
show: true,
onZero: true,
lineStyle: {
color: 'rgba(63,81,181,1.0)',
type: 'solid',
width: '2',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
}],
// Vertical axis
yAxis: [{
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: 'fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
onZero: true,
lineStyle: {
color: '#ff0000',
type: 'solid',
width: '0',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
}],
// Add series
series: [
{
name: 'Page Views',
type: 'bar',
smooth: true,
symbol: 'none',
symbolSize: 2,
showAllSymbol: true,
barWidth: 10,
itemStyle: {
normal: {
color: 'rgba(63,81,181,1.0)',
borderWidth: 2, borderColor: 'rgba(63,81,181,1)',
areaStyle: { color: 'rgba(63,81,181,1)', type: 'default' }
}
},
data: []
}
]
};
Here is my java-script function from where I want to bind the values dynamically.
// Load data into the ECharts instance
load_graph_with_positions(option);
function load_graph_with_positions(option) {
option.series[0].data[0] = 1234;
myChart.setOption(option);
}
One way to do this is by passing values in an array and then shifting the previous values, while pushing-in the data. Following is the example of shiting and pushing the data:
option.series[0].data.shift();
option.series[0].data.push(json.num);
Hence your function will become:
function load_graph_with_positions(option,values) {
var valuesLength = values.length;
for (var i = 0; i < valuesLength; i++) {
option.series[0].data.shift();
option.series[0].data.push(values[i]);
}
myChart.setOption(option);
}
You can also refer to following github example for dynamic addition:
https://github.com/hisune/Echarts-PHP/blob/master/demo/dynamic.php
I am using a scatter chart from the Google visualization plugin, and I am trying to:
Have each point be a different color
have each point be a different shape.
I see this generic recommendation here and tried this:
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[8, 12],
[4, 5.5],
[11, 14],
[4, 5],
[3, 3.5],
[6.5, 7]
]);
var options = {
series: {
0: { pointShape: 'circle' },
1: { pointShape: 'triangle' },
2: { pointShape: 'square' },
3: { pointShape: 'diamond' },
4: { pointShape: 'star' },
5: { pointShape: 'polygon' }
},
pointSize: 28,
chartArea:{left:10,top:0,width:"96%",height:"92%"},
'backgroundColor': 'transparent',
hAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
vAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
gridlines: {
color: 'transparent'
},
legend: 'none'
};
But it doesn't seem to work on a scatter chart.
Does scatter chart support the ability to have different colors and shapes on each point?
Each series is assigned to a column:
series.0 = column 1 in the data
series.1 = column 2 in the data
etc...
Since the data provided only has one Y-axis column, all of the points fall under series.0 --> pointShape: 'circle'.
Add columns and fill the rest with null to change the shape for
each point. See following working snippet...
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight', 'Weight'],
[8, 12, null, null, null, null, null],
[4, null, 5.5, null, null, null, null],
[11, null, null, 14, null, null, null],
[4, null, null, null, 5, null, null],
[3, null, null, null, null, 3.5, null],
[6.5, null, null, null, null, null, 7]
]);
var options = {
series: {
0: { pointShape: 'circle' },
1: { pointShape: 'triangle' },
2: { pointShape: 'square' },
3: { pointShape: 'diamond' },
4: { pointShape: 'star' },
5: { pointShape: 'polygon' }
},
pointSize: 28,
chartArea:{left:10,top:0,width:"96%",height:"92%"},
'backgroundColor': 'transparent',
hAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
vAxis: {
baselineColor: 'transparent',
gridlineColor: 'transparent',
textPosition: 'none', minValue: 0, maxValue: 15
},
gridlines: {
color: 'transparent'
},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am trying to customize highcharts
1) I need to change the height of the plotlines
2) Show the marker value inside the marker image itself at a specific place(Inside the white circles at the top)
This is what I have achieved so far
Highcharts.setOptions({
global: {
useUTC: false
}
});
/*function updateData(x,y)
{
var series = chart.series[0];
series.addPoint([x, y], true, true);
}*/
var chart;
$(function () {
var color = '#AA34FF';
$('#container').highcharts({
chart: {
events: {
load: function(event) {
_bindCustomEvents();
}
},
backgroundColor: 'transparent'
},
series: [
{
color:
{
linearGradient:
{
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops:
[
/*[0, '#a83e3e'],
[0.21, '#d34e47'],
[0.40, '#edbb5a'],
[0.57, '#e2e57a'],
[0.76, '#8dcc63'],
[1, '#7ab237']*/
[0, '#7ab237'],
[0.21, '#8dcc63'],
[0.40, '#e2e57a'],
[0.57, '#edbb5a'],
[0.76, '#d34e47'],
[1, '#a83e3e']
]
},
lineWidth: 4,
marker: {
enabled: false,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
},
type: 'spline',
data: [1, 2, 5, 3, 6, 7, 4],
backgroundColor: 'transparent',
plotShadow : false
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)'
},
data: [8,8,8,8,8,8,8],
type:'scatter'
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)'
},
data: [-1,-1,-1,-1,-1,-1,-1],
type:'scatter'
}
],
xAxis: {
categories: [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
],
title: {
enabled: true,
text: null,
},
labels: {
style: {
fontFamily: 'gestaregular',
fontSize: '16px',
color:'#fff'
}
},
plotLines: [
{ // mark the weekend
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 0,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 1,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 2,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 3,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 4,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 5,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 6,
dashStyle: 'dash',
zIndex:10
}],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
},
yAxis: {
labels: {
enabled: false
},
title: {
enabled: true,
text: null,
}
},
legend: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
});
});
function _bindCustomEvents()
{
var chart = $('#container').highcharts();
chart.setTitle({ text: ''});
$('.highcharts-axis').hide();
$('.highcharts-grid').hide();
$('.highcharts-axis').find('path').hide();
}
FIDDLE LINK
This is how I want it to look like : Instead of '2' in the top circles , it should be the corresponding value from the center spline [1, 2, 5, 3, 6, 7, 4]
1) The plotLines are infinite. The extend as far as the plot area is. So, to limit this, how about you change your yAxis max:
yAxis: {
max: 8,
labels: {
enabled: false
},
title: {
enabled: true,
text: null
}
},
Or, you could create a column series on the points you want and give them a certain value for the height you want. Making the columns thin to mimic your plotLines will help like so:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
data: [8, 8, 8, 8, 8, 8, 8]
},
...
2) Which values in the circles (I am guessing)? The "Series 1: XX"? Or the whole tooltip?
EDIT:
For question 2 you can do this with a formatter function on the dataLabel for the scatter series (your circles). Here is the function:
var customFormatPoint = function (pointX, seriesIndex) {
var theChart = $('#container').highcharts();
var yValue = null;
var points = theChart.series[seriesIndex].options.data[pointX];
return points;
};
You call this from:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return customFormatPoint(this.point.x, 1);
}
},
data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70]
}, {...
Key element here is that you have this.point.x which is that scatter point's xAxis location. You then need to send in which index the series is that contains the y value you want to show in the dataLabel.
I have also removed the plotLines and created a series that just contains the bars with width of 1 and no border. I had to mess around to get the end of the bar (its max value) to coincide with the scatter circle diameter.
Please see this jsFiddle.