The data starts at 6am on Monday and has a data point for each hour. I am having trouble getting the xAxis tick marks to read "6am Monday", and repeat every 24 hours.
Any tips? Here is a fiddle http://jsfiddle.net/4x136qxg/1/
Here is my main graphing function:
var dayInMilliseconds = 3600 * 1000 * 24;
$(function () {
$('#chart1').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Orders'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
// month: '%A',
},
// tickInterval: dayInMilliseconds,
title: {
text: null
},
labels: {
align: 'left',
x: 3
},
// startOnTick: true,
// endOnTick: true,
// min: 1413352800000,
},
yAxis: {
title: {
text: null
},
min: 0,
},
legend: {
enabled: false
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle'
},
lineWidth: 0,
fillOpacity: 1,
// pointStart: 1413352800000,
},
},
series: [{
name: '1',
color: '#edc54b',
data: seriesData[0].data
},{
name: '2',
color: '#edc54b',
data: seriesData[1].data
},{
name: '3',
color: '#edc54b',
data: seriesData[2].data
},{
name: '4',
color: '#edc54b',
data: seriesData[3].data
},{
name: '5',
color: '#edc54b',
data: seriesData[4].data
},{
name: '6',
color: '#edc54b',
data: seriesData[5].data
},{
name: '7',
color: '#fbd046',
data: seriesData[6].data
}]
});
});
Related
I need to get Category name (Age>90 Days,Age<90 Days,Age<60 Days,Age<30 Days,Age<14 Days,Age<7 Days) when click on the related area of the graph.
For example when I click on the red area it want to alert "Age > 90 Days".
Graph Image is here!!!
Here is the my Hi chart code.
Highcharts.chart('ageContainer', {
chart: {
type: 'area',
},
colors: ['#39AA59', '#CEAE22', '#3E90BC','#B787E6','#ea780e','#F85858'].reverse(),
title: {
text: 'Age of queued patches during the last year'
},
xAxis: {
categories: lastMonthsName,
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Patch count'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
split: true,
valueSuffix: ' patches'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Age > 90 Days',
data: getData[5]
},{
name: 'Age < 90 Days',
data: getData[4]
},{
name: 'Age < 60 Days',
data: getData[3]
},{
name: 'Age < 30 Days',
data: getData[2]
},{
name: 'Age < 14 Days',
data: getData[1]
},{
name: 'Age < 7 Days',
data: getData[0]
}]});
Check plotOptions.area.events.click for more info.Also see plotOptions.area.trackByArea. Your post does not contain live example. Using official example to give solutions.Hope this helps
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function() {
return this.value / 1000;
}
}
},
tooltip: {
split: true,
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
},
series: {
cursor: 'pointer',
trackByArea: true,
stickyTracking: false,
events: {
click: function(event) {
alert(this.name)
}
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I want to make the format of my y axis series to only return 2 decimal places.
I have this code:
$('#main-graph').highcharts({
chart:{
zoomType:'xy',
type: 'spline'
},
title: {
text: '',
x: -20 //center
},
xAxis: {
categories: stat_date,
crosshair:true,
},
yAxis: [
{ //0
title: {
text: 'Impressions'
},
},
{//1
title:{
text: "Clicks"
}
},
{ //2
title:{
text: "CTR"
}
},
{ //3
title:{
text: "CPM"
}
},
{ //4
title:{
text: "CPC"
}
},
{ //5 - secondary axis which is the SPEND axis
title: {
text: "Spend",
style:{
// color: Highcharts.getOptions().colors[0]
color: "#8B8B8B"
}
},
opposite:true
}],
tooltip: {
shared: true,
valueDecimals: 2
// pointFormat: "{point.y:,.2f}"
},
legend: {
layout: 'horizontal',
align: 'top',
verticalAlign: 'top',
borderWidth: 0,
floating:true,
x: 0,
y: 0
},
series: [{
name: 'Spend',
data: spend,
yAxis: 5,
type:'column'
}, {
name: 'Impressions',
data: imp,
yAxis: 0,
}, {
name: 'Clicks',
data: clicks,
yAxis: 1
},
{
name: 'CTR',
data: ctr,
yAxis: 2
}, {
name: 'CPM',
data: cpm,
yAxis: 3
}, {
name: 'CPC',
data: cpc,
yAxis: 4
}
]
});
}
I tried adding this line of code:
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
}
}
but it isn't working.
Any ideas? your help will be grealty apprecaited!
Thanks!
Is it possible to move the y-position of the x-axis in highcharts? So far, I have only been able to move it to the top or bottom of my chart using
opposite: true/false
but now I need it to be in the middle of my graph, at a fixed y-value. My current code is
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
type: 'spline',
renderTo: 'container'
},
title: {
text: 'Title'
},
xAxis: {
opposite: true,
min: 0,
max: 4,
reversed: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1
},
yAxis: {
labels: {
enabled: true
},
title: null,
gridLineWidth: 0,
min: 1,
max: 3.1
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
marker: {
enabled: false
},
name: 'Year 1800',
data: [
[1, 1],
[2.5, 1]
],
showInLegend: false
}, {
marker: {
enabled: false
},
name: 'Year 1900',
data: [
[1.5, 2],
[3, 2]
],
showInLegend: false
}, {
name: 'name1',
data: [
[2, 3]
],
type: 'scatter',
zindex: 10
}, {
name: 'name2',
data: [
[3, 3]
],
type: 'scatter'
}, {
name: 'name3',
data: [
[1.5, 3]
],
type: 'scatter'
}]
});
});
});
My JSfiddle is http://jsfiddle.net/5xum/fVpqU/7/ .
I want the x axis (along with the ticks and labels) to run through y=2.5, between the two different data sets. Does HighCharts support this?
You can use offset property to move xAxis. In your case you have to use negative offset to move xAxis down:
xAxis: {
opposite: true,
min: 0,
max: 4,
reversed: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1,
offset: -130
},
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text : <%=jtitle%>
},
xAxis : {
min:Date.UTC(2016, 0, 0),
max:Date.UTC(2016, 11, 1),
//allowDecimals: false,
type : 'datetime',
tickInterval : 24 * 3600 * 1000*30, //one day
labels : {
rotation : 0
},
},
yAxis: {
dateTimeLabelFormats: {
day: '%Y' },
labels :{
formatter:function() {return Highcharts.dateFormat('%Y',this.value);}
},
title: {
text: 'Date'
},
plotLines: [{
value: 0,
width: 5,
color: '#808080'
}]
},
series : [
{
name : 'MB Data',
data : <%=datasp%>,
tooltip: {
valueDecimals: 2,
dateTimeLabelFormats: {
hour: '%H:%M'
}
}
},
{
name : 'Date & Time',
data : <%=datetime%>
},
]
});
});
In the chart described in this fiddle, the date-labels on the x axis are missing. Can anyone tell me why that is? The code in the fiddle is listed below:
$(function () {
var counts = [[635172879695710000, 383], [635172882696280000, 271], [635172885696780000, 274]],
averages = [[635172879695710000, 288774], [635172882696280000, 85592], [635172885696780000, 79455]],
ranges = [[635172879695710000, 12, 2760740], [635172882696280000, 12, 2761263], [635172885696780000, 12, 2761265]];
$('#container').highcharts({
title: {
text: 'Testing!'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
labels: {
format: '{value}B',
style: {
color: '#89A54E'
}
},
title: {
text: 'Size',
style: {
color: '#89A54E'
}
},
min: 0
}, {
labels: {
format: '{value}M',
style: {
color: '#4572A7'
}
},
title: {
text: 'Messages',
style: {
color: '#4572A7'
}
},
min: 0,
opposite: false
}],
tooltip: {
shared: true
},
series: [{
name: 'Line',
type: 'spline',
data: averages,
color: '#89A54E',
zIndex: 1,
marker: {
enabled: false
}
}, {
name: 'Area',
data: ranges,
type: 'areasplinerange',
lineWidth: 0,
linkedTo: ':previous',
color: '#89A54E',
fillOpacity: 0.3,
zIndex: 0
}, {
name: 'Count',
data: counts,
type: 'spline',
zIndex: 2,
color: '#4572A7',
yAxis: 1,
marker: {
enabled: false
}
}]
});
});
High charts is unable to parse the datetime that you have given.
Check console for the following error
Cannot call method 'substr' of undefined
Your dateTime seems to be micromilliseconds, which is not valid
635172879695710000
635172882696280000
635172885696780000
Try to change the format to milliseconds
check the timestamp they are invalid.
[timestamp, value]
updated your timestamps and got it working http://jsfiddle.net/BbZq7/7/
How can I limit showing ticks on X axis in Highcharts? The last one is outter of X axis:
My source:
var options = {
chart: {
renderTo: 'chart',
events: {
load: function(event) {
}
},
type: 'spline',
animation: false
},
title: {
text: ''
},
colors: [
'#499878','black'
],
rangeSelector: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Temperature (°C)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' °C'
},
yAxis: 0,
color: '#89A54E',
data: []
},{
name: 'Wind speed (m/s)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' m/s'
},
yAxis: 1,
color: '#4572A7',
data: []
},{
name: 'Humidity (%)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' %'
},
yAxis: 2,
color: '#910000',
data: []
},{
name: 'Wind direction (°)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' °'
},
yAxis: 3,
color: '#000000',
dashStyle: 'shortdot',
data: []
}],
xAxis: {
type: 'datetime',
tickInterval: 10000,
min: 0,
max: 0
},
yAxis: [{
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
gridLineWidth: 1,
opposite: true
},{
labels: {
formatter: function() {
return this.value +' m/s';
},
style: {
color: '#4572A7'
}
},
title: {
text: 'Wind speed',
style: {
color: '#4572A7'
}
},
gridLineWidth: 1,
opposite: false,
min: 0
},{
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#910000'
}
},
title: {
text: 'Humidity',
style: {
color: '#910000'
}
},
gridLineWidth: 1,
opposite: true
},{
labels: {
formatter: function() {
return this.value +' °';
},
style: {
color: '#000000'
}
},
title: {
text: 'Wind direction',
style: {
color: '#000000'
}
},
opposite: false,
reversed: true,
min: 0,
max: 360,
minorGridLineDashStyle: 'longdash',
minorTickInterval: 'auto',
minorTickWidth: 0,
tickInterval: 90
}],
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
}
},
scatter: {
marker: {
enabled: true
}
}
}
};
I found out it's matter of oveflow: 'justify'. jsfiddle
What happens if you use 'spacingRight' (http://api.highcharts.com/highcharts#chart.spacingRight) as below:
chart: {
renderTo: 'chart',
events: {
load: function(event) {
}
},
type: 'spline',
animation: false,
spacingRight: 100 // you may change this for testing...
},