I have a graph, whereby users can add plotlines themselves by clicking a button. Often, those plotlines are added outside the current view of the graph, which means the user has to manually zoom out to search for the plotline they added. Is it possible for HighStock to dynamically change its current view based on added Plotlines?
Check out this example here:
http://jsfiddle.net/Ltgzwpo2/2/
If you click on the button, a plotline is added OUTSIDE of the current view, i.e. you need to zoom out to find the plotline. Is it possible for the chart to dynamically zoom out itself upon the adding of a plotline?
This is the code I use to add a plotline:
$("#button").click(function() {
chart.xAxis[0].addPlotLine({
value: Date.UTC(2015, 10, 5),
color: "green",
width: 1,
dashStyle: 'ShortDash',
label: {
text: "this appeared outside of the current view!",
align: 'left',
y: 5,
x: 3,
style: {
fontSize: "12px"
}
},
zIndex: 10
});
});
You can use axis.setExtremes() to set the visible area.
var value = Date.UTC(2015, 10, 5);
chart.xAxis[0].addPlotLine({
value: value,
color: "green",
width: 1,
dashStyle: 'ShortDash',
label: {
text: "this appeared outside of the current view!",
align: 'left',
y: 5,
x: 3,
style: {
fontSize: "12px"
}
},
zIndex: 10
});
var range = 1000 * 3600 * 24 * 30;
chart.xAxis[0].setExtremes(value - range, value + range)
example: http://jsfiddle.net/cqwk84dz/
Related
I have a chart which has part line and part area stacked. In the first part (area) I want to add an inline legend as it is shown in this example (ie where it says Asia)
https://www.highcharts.com/demo/area-stacked-percent
These are the example options but I do not see how to specify that or if this is the default way to show legends in this plot
In my example, I cannot put the legends inside the area part. Tried to add title in yAxis. I also tried to add an annotation but it did not work:
https://jsfiddle.net/hkpna40r/1/
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 4
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: Date.UTC(2019, 11, 2),
y: 3
},
zIndex:100,
text: 'Arbois'
}],
}],
You can achieve what you want by attaching a module called series-label and set plotOptions.area.label like that:
plotOptions: {
area: {
label: {
enabled: true,
onArea: false
}
},
line: {
label: {
enabled: false
}
}
}
Note, annotations also work but you have to attach annotations module separately.
Demo:
https://jsfiddle.net/BlackLabel/5utLhenb/
API reference:
https://api.highcharts.com/highcharts/plotOptions.area.label
https://www.highcharts.com/docs/advanced-chart-features/annotations-module
I'm using cirque.js plugin to show circle percentage values drawn with a canvas.
Here's a JSFIDDLE I made that should contain all the info with plugin code.
Initially, the circle gets drawn correctly, with the correct value.
Issue: When I try to update the value via a function on clicking a button, nothing happens, not working, I think the canvas needs to be drawn again with the new value?
Q: How can I update the circle percentage value asynchronously?
$('.cirque').cirque ({ //this works
radius: 40,
value: 65,
total: 100,
trackColor: '#ccc',
arcColor: '#5cb85c',
label: 'percent',
lineWidth: 12
});
$('#update').click(function (e) {
updateCircle(50); //this does not work
});
function updateCircle(val){
$('.cirque').cirque ({
radius: 40,
value: val,
total: 100,
trackColor: '#ccc',
arcColor: '#5cb85c',
label: 'percent',
lineWidth: 12
});
}
I've not find any function to update value in this plugin. But you can update value with a trick. Replace the div having class cirque with a same div and initialize it with new value like following. Hope this will help you.
function updateCircle(val){
var cirque=$('<div class="cirque"></div>');
$('.cirque').replaceWith(cirque);
cirque.cirque ({
radius: 40,
value: val,
total: 100,
trackColor: '#ccc',
arcColor: '#5cb85c',
label: 'percent',
lineWidth: 12
});
}
Updated Fiddle: https://jsfiddle.net/8d9sw1yg/2/
I am using google chart which is working absolutely fine except one thing the issue is when I select custom date filter and choose only single date from it then it will show only 1 record with little dot which is also fine no issue with that but its y axis shows repetitive values in it.
Please check example :
http://awesomescreenshot.com/0f757w8k3a
it shows 0, 1, 1, 2, 2
it should show 0, 1, 2, 3, 4 or just 0, 1, 2
var options = {
vAxis: {
format: '#',
minValue: 0,
gridlines: {
color: 'transparent'
},
viewWindowMode: "explicit",
viewWindow:{ min: 0 }
},
hAxis: { textPosition: 'none' },
legend: { position: 'none' },
colors:[{color:'#A8D1FF', darker:'#97B9D8'}]
};
var chart = new google.visualization.AreaChart(document.getElementById('PostChart'));
chart.draw(PostChartData, options);
That may be cause of small range of values for Y axis. Try using Ticks for vAxis commonly referred as vAxis.ticks
vAxis: { ticks: [5,10,15,20] } //array
vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] } // A valid value as V
vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] } // Dates
Click Here for Ref.
Edit1: In case your record values belongs to smaller range and and you have set the Max Value of vAxis to a higher value, It can also result in Repeated values in vAxis.
Using latest highcharts (3.0.7). We are trying to add text to the top of the chart on export. to do this I need to increase the spacingTop so that we do not overwrite any chart elements. This then causes the chart to become less high by that amount of spacingTop for a the same chart height. How can I get the current chart height and add X amount to it on export? I have tried:
exporting: {
sourceWidth: 400,
//sourceHeight: this.chartHeight,
//sourceHeight: this.chartHeight + 200,
scale: 1, //(default)
chartOptions: {
subtitle: null,
height: this.chartHeight + 200
}
}
This seems to be ignored. See this fiddle. This was just a test to see if I could do this at all. Seems like it should be straight forward. If I uncomment out the sourceHeight it still does not do what I expect - the chart is still 400px high. So it seems that this.chartHeight does not contain anything.
In the end this height change code is going to exist in a function we call:
chartMainLoc.exportChart({
type: 'image/jpeg',
sourceHeight: this.chartHeight + 200,
sourceWidth: this.chartWidth,
scale: 1
}, {
chart: {
events: {
load: function () {
this.renderer.text('Occupational Employment and Wage Rates (OES) for Multiple Occupations in Louisiana in 2012<br /> The graph below shows the annual occupational employment and annual wage data for Multiple Occupations in Louisiana in 2012.<br /> ', 5, 15).attr({
rotation: 0
}).css({
color: '#4572A7',
fontSize: '10px',
fontStyle: 'italic',
width: this.chartWidth
}).add();
this.renderer.rect(5, 5, this.chartWidth - 10, 60, 5).attr({
'stroke-width': 2,
stroke: 'black',
zIndex: 2
}).add();
}
},
spacingTop: 200,
shadow: false
}
})
Since I do not know the chart's height or width beforehand I have to get this value somehow.
You need to set chart optiosn with objects (chart / series etc) like in the example http://jsfiddle.net/GQUDJ/2/
I have a 250px wide column chart, it looks great when there are 10+ items in the series, but when there's only 2-3, the bars are drawn really wide, which looks somewhat odd.
_____
| |
| |
-----|-----
I can set the width in the series config:
{
style: { width: 25 }
}
This works, but the thinner bars are still left-aligned with their previous position, so they don't match up with the axis tick and label.
Like so:
_
| |
| |
-----|-----
I don't want to change the axis spacing, I want to end up with widely-spaced, 25px bars (that are correctly centered on the axis tick):
_
| |
| |
-----|-----
Any ideas?
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Math.max(attr.x, attr.x + (attr.width - 50) / 2)
});
}
Maybe a bit to late but this is my solution
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Ext.getCmp('chart_id').axes.items[1].inflections[value][0] - 25
});
}
In this example I read the x axe and find any given point (label stripes) than I looped though my bars, you can use a count or something and use in instead of value. Hope it works!
//try like below
series:[
{...
style:{
minBarWidth:5,
maxBarWidth:5
}
},
{...}
]
I think the problem is that the chart you are looking for is Cartesian one and the column chart doesn't work for you because it hasn't any exact X value.
So, I simulate the Cartesian chart (like Line chart) to look like the column chart like this:
It's a trick somehow but it works fine for me.
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['min-X','max-X']
}, {
type: 'Numeric',
position: 'left',
fields: ['min-Y','max-Y']
}],
series: [{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line1-X',
yField: 'line1-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line2-X',
yField: 'line2-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line3-X',
yField: 'line3-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line4-X',
yField: 'line4-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
}]
And the data:
{
line1-X: 2, line1-Y: 0,
line2-X: 5, line2-Y: 0,
line3-X: 5.5, line3-Y: 0,
line4-X: 8, line4-Y: 0,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
},{
line1-X: 2, line1-Y: 40,
line2-X: 5, line2-Y: 80,
line3-X: 5.5, line3-Y: 60,
line4-X: 8, line4-Y: 100,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
}
But in this approach you have to know the maximum number of Columns(Lines) you have. And each time insert Zero(0) data to one you don't want to show. If you don't know the number of Columns(Lines) you have to create them dynamically.
This is my idea and it works the way I want it. Maybe it helps you to find your solution.
try using the "gutter" property to set the gap between the column.