I have a scenario where in i have to create markers/Circles in Spline chart.
I created spline chart using highcharts, the code is below for the chart.
and my output should be like below. and i have marked the expected circles the image:
$(function () {
var image;
var line,
label,
image,
clickX,
clickY;
var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});
clickX = e.pageX - line.translateX;
//clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}
var step = function (e) {
line.translate(e.pageX - clickX, e.pageY - clickY)
if (image) {
image.translate(e.pageX - clickX, e.pageY - clickY)
}
if (label) {
label.translate(e.pageX - clickX, e.pageY - clickY)
}
}
var stop = function () {
$(document).unbind('.line');
}
$('#ao-salesoptimization-graph').highcharts({
chart: {
type: 'spline',
spacingBottom:40,
spacingTop: 5,
spacingLeft: 0,
spacingRight: 10,
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
gridLineColor: '#eeeeee',
gridLineWidth: 1,
type: 'datetime',
min: Date.UTC(2010, 0, 1),
max: Date.UTC(2020, 0, 1),
labels: {
enabled :false
},
plotLines: [{
color: '#004a80',
dashStyle: 'Dot',
value: Date.UTC(2014, 7, 10), // Value of where the line will appear
width: 5,// Width of the line
zIndex: "10",
label: {
text: '<span class="drag"></span>',
}
}],
tickWidth: 0
},
plotOptions: {
series: {
lineWidth: 4,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: "#4b0081",
states: {
hover: {
enabled: true,
fillColor: "#0047ab",
lineColor: "#fff",
lineWidth: 3,
}
},
}
}
},
yAxis: {
min: 10000,
max: 100000,
gridLineColor: '#eeeeee',
gridLineWidth: 1,
title: {
text: 'Sales',
style: {
fontWeight: "bold",
fontSize: "14"
}
},
label: {
formatter: function () {
return (this.y / 1000) + "k"
}
},
tickWidth: 0,
},
series: salesoptimizationgraphhData()
}, function (chart) {
label = chart.xAxis[0].plotLinesAndBands[0].label;
image = chart.xAxis[0].plotLinesAndBands[0].image;
line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
stroke: '#004a80'
})
.css({
'cursor': 'pointer'
})
.translate(0, 0)
.on('mousedown', start);
image = chart.renderer.image('../../../Content/Img/ao-chart-scroller.png', 285, 300, 64, 24).attr({
zIndex: 100
}).translate(0, 0).addClass('image').on('mousedown', start).add();
});
});
How can i achieve this?
You could use spline and scatter series with Draggable Points plugin.
Example: http://jsfiddle.net/0moy3q71/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
plotOptions: {
series: {
stickyTracking: false
},
scatter: {
cursor: 'move'
}
},
series: [{
data: [[3,200],[5,123]],
draggableY: true,
draggableX: true,
dragMinY: 0,
type: 'scatter'
}, {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0],
type: 'spline'
}]
});
Hopefully I understand your question correctly. I have created a spline chart. Focus on the August data where I explicitly define a standalone marker. Check this out .
Edited: I don't think it's achievable to move a pointer to a random place as each pointer must have values to both x and y axis. Don't think we can plot something that is floating around in Highcharts context. Not encouraging other HTML/javascript hacking around.
The best I can come out is this. Two series are created. Some points are hidden in the first series and only one big pointer available in second series.
Related
I need to display my x-axis label as a whole number with percentage without the decimal and a zero before it. I am already using allowDecimals: false but that's not helping it looks like. How can I fix this?
0.10% should render as 10% and etc.
https://jsfiddle.net/samwhite/p01xvw2z/
Highcharts.chart('container', {
chart: {
height: 550
},
title: {
text: 'GME: Absolute Daily Return vs. % of Outstanding Shares Hedged, January 2021',
align: 'left',
style: {
fontSize: '20px',
fontWeight: 'bold',
}
},
subtitle: {
text: 'Data source: OPERA and Bloomberg',
align: 'left'
},
credits: { enabled: false },
xAxis: {
title: { text: '% of Outstanding Shares Needed for Hedging' },
// labels: {
// formatter: function () {
// return this.value.toFixed(2) + '%'
// }
// },
labels: {
format: '{value:,.2f}%'
},
min: -0.01,
max: 0.6,
tickInterval: 0.1,
allowDecimals: false
},
yAxis: {
title: { text: 'Absolute % Change in Price' },
min: -0.01,
tickInterval: 0.5,
labels: {
formatter: function () {
return this.value.toFixed(1)
}
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
legend: {
enabled: false
},
series: [{
type: 'line',
name: '',
color: "#f79646",
data: [[0, -.1489], [0.5, 0.7003]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
marker: {
symbol: 'circle',
fillColor: '#00429d',
radius: 3
},
name: 'Observations',
color: '#000',
data: [
[0.05, 0.08],
[0.05, 0.00],
[0.08, 0.05],
[0.08, 0.01],
[0.05, 0.02],
[0.13, 0.12],
[0.11, 0.00],
[0.35, 0.57],
[0.42, 0.27],
[0.38, 0.11],
[0.22, 0.10],
[0.21, 0.00],
[0.26, 0.09],
[0.48, 0.51],
[0.34, 0.18],
[0.44, 0.92],
[0.43, 1.34],
[0.34, 0.44],
[0.42, 0.67]
],
tooltip: {
valueDecimals: 2
}
}]
});
Something like this?
labels: {
formatter: function () {
return this.value * 100 + '%';
}
},
I am trying to split the data contained in a dict into multiple charts. Each chart has two series: column and marker. If represent all the data in a single chart, everything works fine, but if I try to split it, the columns and the marker don't get aligned for some reason
function setup_chart(chart_container){
return new Highcharts.chart(chart_container, {
chart: {
alignTicks: false,
type: 'columnrange',
inverted: true,
zoomType: 'y',
panning: true,
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: [],
className: 'chart-axis-title',
title: {
align:'high'
},
offset: -10
},
navigation: {
buttonOptions: {
x: 5,
y: -12
}
},
yAxis:[{
minRange: 1,
max:null,
min:null,
allowDecimals: false,
title: {
text: 'Days'
},
labels:{
formatter:function(){
if(this.value !=0){
return this.value;
}
}
}
},{
tickPositions: [0, 100],
visible: false
}],
tooltip: {
},
exporting: {
scale: 3,
chartOptions: {
legend: {
enabled: true
}
}
},
legend: {
enabled: false
},
series: [{
yAxis: 1,
data:[]
},{
name: 'Days',
data: [],
stickyTracking: true
}]
});
}
I'm passing the data via jinja2 and populate the chart in the following way:
var options_data_cm = {{options|tojson|safe}}[k]['cms'];
var cm_groups = {{cm_group_dict}};
var cms_details = {};
for(var key in cm_groups){
cms_details[key] = {
"data":[],
"left":[],
"right":[],
"cols":[],
"categories":[]
}
}
for(var key in cms_details){
var crtChart = $('#'+key).highcharts();
crtChart.xAxis[0].update({title:{ text: ""+cm_groups[key] }});
crtChart.addSeries({
type: 'column',
yAxis: 1,
data: cms_details[key]['cols'],
zIndex: 1,
minPointLength: 10,
threshold: -0.1,
pointPadding: 0,
pointRange: 0,
groupPadding: 0,
showInLegend: false,
tooltip: {
pointFormat: false
},
states: {
hover: {
enabled: false
}
}
});
crtChart.addSeries({
name: "Study Days",
dataLabels: {
enabled: false,
padding: 10,
borderWidth: 0,
useHTML:false,
formatter:function(){
if(this.y != 0)
return this.y;
}
},
stickyTracking: false,
data: cms_details[key]['data'],
borderWidth: 0,
zIndex: 5,
maxPointWidth: 5,
tooltip:{
followPointer:true
},
point: {
events: {
click: function() {
if (url != "")
window.open(url,'_blank');
}
}
}
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['left'],
zIndex: 1
});
crtChart.addSeries({
type:'scatter',
stickyTracking:false,
tooltip:{snap:0},
data:cms_details[key]['right'],
zIndex: 1
});
crtChart.xAxis[0].setCategories(cms_details[key]['categories']);
}
Here are two pictures, the first one is with assignment without breaking the data into multiple charts, the second one is an attempt to split it :
I've tried to inspect the content of the data and it seems OK in the sense that both have the same coordinates, however they are shifted.
EDIT:
Here's the link to the jsfiddle
I have managed to solve the issue by adding pointPlacement: 0.2 to the series which was displaced.
Please refer to JSFIDDLE
I want the value of var x1 (i.e, var x1 = 10;) should be change the moment i change the range slider which is::
document.getElementById("range").innerHTML
Please suggest.
Here is a simple solution for your question:
http://jsfiddle.net/La9s2cp4/5/
var chart;
function createChart(){
// Set up the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
margin: 100,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: 'Draggable box'
},
subtitle: {
text: 'Click and drag the plot area to rotate in space'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10,
showFirstLabel: false
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
marker: {
radius: xdata
},
colorByPoint: true,
data: [dataG.data1, dataG.data2, dataG.data3]
}]
});
}
I am using Highstock to visualize some data for my web application.
The data is displayed as steps (that is one value is held until a new one takes over), however the navigator of Highstock seems to use the spline algorithm on the data. I would rather like it to display as "blocks" like the main chart.
I have tried adding step: "true" to navigator.series in the options, but it does not seem to matter.
Does anyone know a way to do this with the Highstock API? I have been digging into the documentation for a while without any luck.
Code used to initialize highstock chart:
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: true,
selected: 0,
buttons: [{
type: 'day',
count: 1,
text: 'Day'
}, {
type: 'week',
count: 1,
text: 'Week'
}]
},
series: [{
name: 'Light level',
data: data,
type: 'area',
step: true,
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, "#fff800"],
[1, Highcharts.Color("#fff800").setOpacity(0).get('rgba')]
]
}
}],
yAxis: {
labels: {
formatter: function () {
if (this.value > 0) return "" + this.value + "%";
return "";
}
},
plotLines: [{
value: 0,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: '0%',
align: "right"
}
}, {
value: 100,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: '100%',
align: "right"
}
}],
tickPositions: [0, 25, 50, 75, 100]
},
credits: {
enabled: false
},
navigator: {
//enabled: false
}
});
I have also created a jsfiddle with example data.
http://jsfiddle.net/EJZ5x/
According to docs - step option isn't supported.
However, when you set directly type for navigator, it works! See: http://jsfiddle.net/EJZ5x/1/
navigator: {
series: {
type: 'area',
step: 'left'
}
}
My highchart crashes chrome, when i add the 2nd serie.
Cannot see Chrome console to debug.. :(
Does anyone have an idea?
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
margin: [40,10,60,80],
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
tickInterval: 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
/* gridLineWidth: 0, */
/* alternateGridColor: null */
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
showInLegend: false,
pointInterval: 60 * 1000,
pointStart: Date.UTC(2006, 0, 1),
marker: {
enabled: false
},
dashStyle: 'solid',
yAxis: 0,
xAxis: 0,
} , {
name: 'Humdity',
data: hum,
yAxis: 1,
xAxis: 0,
showInLegend: false,
type: 'line',
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});
You only have one yAxis, so it breaks because you set the second serie to display into the second one( yes, that's what yAxis: 1 means ).
Remove it or create the second yAxis.
Update:
Use yAxis: 0 the reffer the first and 1 to the second.
Missing , after } on line 36 of jsfiddle.
Store data before.
Demo