I've been tasked with generating charts that would display a BarRange and list additional points in the range. I've been looking at the examples for Highcharts, and like the inverted ColumnRange they show here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2009'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]
});
and here:
http://jsfiddle.net/Q2JMF/2/
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true
},
legend: {
enabled: false
},
series: [{
name: 'Data',
data: [{
x: 1,
low: 7,
high: 8,
color: "red"
},{
x: 2,
low: 6,
high: 7,
color: "blue"
}]
}]
});
but what I need is not just a range high/low with an x point value, I need a high/low with several other points marked (preferably as a line) within the bar.
Think about it like quartiles and average. I want to display the range of values in my series and mark the 25th%, median, 75th% and average as line markers within the high/low bar range.
I have not been able to find any examples of marking points within a bar range. Is this something that can be done with Highcharts? Can you show me an example of how to achieve this?
Edit:
I've found that I can simulate what I'm after by adding additional series to the chart data. I mocked that up by modifying the second fiddle above:
http://jsfiddle.net/tLucL6mq/1/
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true
},
legend: {
enabled: false
},
series: [{
name: 'Data',
enableMouseTracking: false,
data: [{
x: 1,
low: 7,
high: 8,
color: "red"
},{
x: 2,
low: 6,
high: 7,
color: "blue"
}]
},{
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: '#000000',
radius: 6,
symbol: "square"
},
name: "Inclusive data points",
type: "scatter",
data: [[2,6.25],[2,6.6],[2,6.9],[1,7.2],[1,7.6],[1,7.9]]
},{
marker: {
fillColor: '#FFFF00',
lineWidth: 2,
lineColor: '#000000',
radius: 5
},
name: "Data points with Outliers",
type: "scatter",
data: [[2,5.9],[2,6.4],[2,6.7],[2,7.15],[1,6.8],[1,7.5],[1,7.8],[1,8.2]]
}
]
});
That looks pretty good, but I'd like to have one series that defines the range and lists points to be marked within the range.
If I have to use separate ranges like this, that's ok, but I would love the ability to mark the Inclusive data points using a line within the range rather than circle or square markers.
Related
I have line chart use Apexcharts plugins, i want to swap position xAxis to yAxis and yAxis to xAxis. Anyone know?, this is from example code Apexchart Line
var options = {
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
},
annotations: {
xaxis:[{
x : 45,
strokeDashArray: 0,
borderColor: '#775DD0',
label: {
borderColor: '#775DD0',
style: {
color: '#fff',
background: '#775DD0',
},
text: 'Anno Test',
}
}]
}
};
var chart = new ApexCharts(document.querySelector("#chartsimple"), options);
chart.render();
result :
i want to swap xAxis (Months) to yAxis , and yAxis(number) to xAxis like this picture bellow:
Here's an example of how you would achieve what you want. You'll have to change the data to suit your needs. There's many different ways to provide the data with ApexCharts. From the code that you copied from the documentation, all I did was experiment with the x and y values and change the type to type: scatter
let data = [];
let i = 0;
for (i = -10; i <= 10; i++)
data.push({
x: i,
y: (Math.sin(i/10) * 10) -10
});
var options = {
series: [{
data: data
}],
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
title: {
text: 'Modified Math.Sin',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
annotations: {
xaxis: [{
x: 45,
strokeDashArray: 0,
borderColor: '#775DD0',
label: {
borderColor: '#775DD0',
style: {
color: '#fff',
background: '#775DD0',
},
text: 'Annotation',
}
}]
}
};
var chart = new ApexCharts(document.querySelector("#chartsimple"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chartsimple"></div>
I am trying to join the nodes of the x axis and the y axis of the area spline chart. Here is my fiddle and also I need to move title and subtitle at the left corner and need to integrate dropdown. Basically I need graph something like this .
Highcharts.chart('container', {
chart: {
type: 'areaspline'
},
title: {
text: 'Total Visitors',
x: 0,
},
subtitle: {
text: 'This is all users that visited your site',
x: 0,
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
},
series: {
marker: {
enabled: false
},
lineWidth: 2,
states: {
hover: {
enabled: false
}
}
}
},
series: [{
lineColor: '#8b8bff',
color: '#c5c6ff',
showInLegend: false,
lineWidth: '4px',
name: 'John',
data: [37, 25, 50, 20, 37, 28, 50, 42, 70, 46, 55, 26]
}]
})
Kindly help
Thank you!!!
To start axes ticks in the same place set tickmarkPlacement to on and also set min and max.
To move title and subtitle to the left corner use align property:
title: {
...,
align: 'left'
},
subtitle: {
...,
align: 'left'
},
xAxis: {
tickmarkPlacement: 'on',
min: 0.5,
max: 10.5,
...
}
Live demo: https://jsfiddle.net/BlackLabel/w7p6rL8o/
API Reference: https://api.highcharts.com/highcharts/title.align
I have a chart with 4 series plotted, I decided to put two y axis on each side of the graph, which worked. The only trouble I am having is showing all the labels of each y axis, specifically the last one in the series that I have named "Stuff Data", it is apparently using the Voltage data's y axis
Please see:
https://jsfiddle.net/Lprm4ofw/51/
I have tried switching the order of the series and yAxis but always the last one's label would not show up. I also tried playing with the margins in case it's hidden but it is definitely not. What can I try to do to fix it? here is the code:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
type: 'spline'
},
title: {
text: 'Whatever'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Voltage',
style: {
color: Highcharts.getOptions().colors[2]
}
},
labels: {
format: '{value} V',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
title: {
text: 'Current',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} C',
style: {
color: Highcharts.getOptions().colors[0]
}
},
},
{ // Third yAxis
gridLineWidth: 0,
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[3]
}
},
opposite: true
},
{ // Fourth yAxis
title: {
text: 'stuff',
style: {
color: Highcharts.getOptions().colors[4]
}
},
labels: {
format: 'WHEREAMI',
style: {
color: Highcharts.getOptions().colors[4]
}
},
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [
{
name: 'Voltage Data',
data: [10.0, 20.79, 13.5, 18.8],
yaxis: 0,
},
{
name: 'Current Data',
yAxis: 1,
data: [1, 2, 3 , 4],
}, {
name: 'Temperature Data',
yAxis: 2,
data: [4, 5, 6 , 9]
}, {
name: 'Stuff Data',
data: [7.0, 6.9, 9.5],
yaxis: 3,
}]
});
You have to use correct property name, xaxis is not the same as xAxis:
series: [
{
name: 'Voltage Data',
data: [10.0, 20.79, 13.5, 18.8],
yAxis: 0,
},
{
name: 'Current Data',
yAxis: 1,
data: [1, 2, 3, 4],
}, {
name: 'Temperature Data',
yAxis: 2,
data: [4, 5, 6, 9]
}, {
name: 'Stuff Data',
data: [7.0, 6.9, 9.5],
yAxis: 3,
}
]
Live demo: https://jsfiddle.net/BlackLabel/6wrahgko/
I can't figure this one* out.
JS Fiddle here: https://jsfiddle.net/elange/wcvsco0o/9/
Scenario: Showing the trend of Latte purchases over time against all other purchases.
This is always true: Latte + Other = All
Requirements:
The Latte count shows along the top of the total, as shown.
The user can see the trend of "Lattes" on its own, separate from "All purchases"
Current Solution: ghost the "other" purchases data to raise "Lattes" up to match the total of "All" while still showing the right amount of lattes in the tooltip. (Ideally, the tooltip and all elements for "Other" would be hidden.)
*Problem: How do I take care of req. 2, and hide the "Other" series when the user hides "Total" using the legend?
Would be fine (as plan B) to use the button function, but can't make sense of the implementation of that button in this case. Extra points for making it work without using the button!
I appreciate the help!
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Latte Purchases'
},
subtitle: {
text: 'At The Coffee House'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1;
}
}
},
tooltip: {
split: true,
valueSuffix: ' visits'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'All',
stack: null,
color: '#616161',
fillColor: '#616161',
data: [44, 50, 63, 78, 82, 86, 100]
}, {
name: 'Latte',
color: '#26c4ee',
stack: true,
data: [19, 22, 24, 24, 28, 32, 34],
marker: {
fillColor: '#26c4ee'
}
}, {
name: 'Other',
fillColor: '#616161',
showInLegend: false,
showPoint: false,
linkedTo: 'Total',
stack: true,
data: [25, 28, 39, 54, 54, 54, 66],
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
}
}]
});
I am using highstock to create charts in my asp.net MVC application
I have added a navigation along with it i have added a scroll bar
I am viewing 4 charts in a single view, for all charts the horizontal scroll bar is visible only for one as show in the image
In the image the above chart's scrollbar is visible but not for the chart bellow it
But when i move my navigation bar a bit it displays the scrollbar like this
Bellow is my Razor for chart
var chart3 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -10,
y: 350,
//height: 25
},
relativeTo: 'chart'
}
},
scrollbar: {
enabled: true,
showFull: false
},
rangeSelector: {
enabled: true,
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
// disabled: { ... }
}
},
inputBoxWidth: 160,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'black',
fontWeight: 'bold'
},
buttons: [{
type: 'minute',
count: 60 * 6,
text: '6h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 7,
text: '7d'
},
{
type: 'day',
count: 14,
text: '2w'
},
{
type: 'day',
count: 21,
text: '3w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'all',
text: 'All'
}]
},
navigator: {
enabled: true,
height: 30,
},
//scrollbar: {
// enabled: true,
// barBackgroundColor: 'silver',
// barBorderRadius: 7,
// barBorderWidth: 0,
// buttonBackgroundColor: 'silver',
// buttonBorderWidth: 0,
// buttonArrowColor: 'yellow',
// buttonBorderRadius: 7,
// rilfeColor: 'yellow',
// trackBackgroundColor: 'none',
// trackBorderWidth: 1,
// trackBorderRadius: 8,
// trackBorderColor: '#CCC'
//},
title: {
text: 'Voltage vs Date & Time',
style: {
//color: '#FF00FF',
fontWeight: 'bold'
}
},
xAxis: {
// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
type: 'datetime'
},
yAxis: {
scrollbar: {
enabled: true,
showFull: false
},
alternateGridColor: '#FDFFD5',
title: {
text: 'Voltage (V)'
}
},
plotOptions: {
line: {
turboThreshold: 50000
},
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 3
}
}
},
series: [{
name: 'Voltages Phase 1',
color: 'red',
data: arry_voltage_1,
}, {
name: 'Voltages Phase 2',
color: 'yellow',
data: arry_voltage_2,
}, {
name: 'Voltages Phase 3',
color: 'blue',
data: arry_voltage_3,
},
],
});
Any help would be highly appreciated
Remove or comment showFull: false in your scrollbar: {enabled: true, showFull: false}, or set the value to true and it will work surely