This is the source code
http://jsfiddle.net/m5cvH/
Im not really sure why but I cannot get the x axis to display the correct timestamp information, the timestamp data is in unix timestamp format.. And I also cant figure out how to get these two graphs to stack properly.
Also I would like to Datagroup this data using the datagrouping method provided by the Highcharts library.
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: container,
type: 'area',
marginRight: 130,
marginBottom: 85
},
title: {
text: 'Patron Count Spring 2012',
x: -20 //center
},
xAxis: {
categories: time,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
plotOptions: {
area: {
stacking: 'normal',
marker: {
enabled: false
}
},
},
yAxis: {
title: {
text: 'Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: date
});
The times do not display correctly because javascript uses milliseconds - you need to multiply your time stamps * 1000.
in order to use data grouping, you need to use Highstock.
{{Edit:
in looking through your fiddle example, there are a variety of things happening that are not going to work right.
1) you can't combine categorical and datetime axes - it's one or the other. If you want your data to show on a datetime axis, you need to do the following:
make your timestamps milliseconds instead of seconds (as noted above)
you need to create your data array so that the x values are the time stamps, as opposed to having a separate array of timestamps. ie:
this:
"data": [3, 9, null]"
becoms:
"data": [[1370799000000,3], [1370802600000,9], [1370806200000,null]]"
Related
First time messing around with HighCharts.js.
I'm pulling in a .csv and passing in the necessary arrays. They're populated and valid but the charts still aren't displaying.
function buildChartsUSD(dayLabelsArray, usdSeriesArray) {
$('#containerUSD').highcharts({
title: {
text: 'USD Daily Close',
x: -20 //center
},
subtitle: {
text: 'The Big Short',
x: -20
},
xAxis: {
categories: dayLabelsArray,
labels:{rotation: 90, x:-20}
},
yAxis: {
title: {
text: 'USD'
},
format: '{value:.2f}',
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
data: usdSeriesArray,
name: 'USD'
}]
});
};
The Y-axis would be values like 204000.83 - series data is getting a 'reference error data not defined' exception though the array usdSeriesArray is populated. Any help would be much appreciated! Thank you!
As pointed out by wergeld above, the issue had to do with the elements in the array. They should have been numeric and not strings. Hence,
[111, 222, 333,...] not ['111', '222', '333', ...]
Silly mistake and simple answer.
I am trying to finalize a graph where I report the daily production within a month and a couple of other daily based series. The graph is always set at full scale, meaning that I always show all the days within a month, even if I do not have values for them, whichever is the reason why. On the first day of each month, I display the graph of the previous month, as a report.
This is the jfiddle I've set up so that you can have an idea. The problem I've been fighting against is that, whatever I try to do, Highcharts simply ignores me and displays wrong labels on x axis. So the days start from 2, go throughout the whole month to the last and they end with 1.
This is the code for my chart:
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'tab-month-graph',
zoomType: 'xy'
},
title: {
text: 'Daily - August 2015'
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
align: 'center',
text: 'Giorni',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
},
dateTimeLabelFormats: {
day: '%e'
}
},
yAxis: [{ // Primary yAxis
title: {
text: 'Produzione giornaliera',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
{ // Secondary yAxis
title: {
text: 'PR giornaliero',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
startOnTick: false,
opposite: true
}],
legend: {
enabled: false
},
series: [{
name: 'Prod.',
type: 'column',
data: [[1438466230000, 4603.36],[1438552630000, 4264.92],[1438639030000, 3108.05],[1438725430000, 2047.03],[1438811830000, 2270.39],[1438898230000, 2258.2],[1438984630000, 3971.95],[1439071030000, 3784.45],[1439157430000, 3674.53],[1439243830000, 3131.95],[1439330230000, 1963.13],[1439416630000, 3333.52],[1439503030000, 4161.8],[1439589430000, 4408.59],[1439675830000, 2968.83],[1439762230000, 2808.05],[1439848630000, 4439.77],[1439935020000, 3746.48],[1440021430000, 4980],[1440107830000, 3683.91],[1440194230000, 4480.78],[1440280630000, 4406.48],[1440367030000, 4518.98],[1440453430000, 4492.73],[1440539830000, 3924.14],[1440626230000, 4062.89],[1440712630000, 3225.47],[1440799030000, 3213.75],[1440885430000, 4631.95],[1440971830000, 4471.17],[1441058230000, 4223.91]],
color: '#89CE7F',
dataLabels: {
enabled: true,
rotation: -90,
color: '#000000',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
},
{
name: 'PR',
type: 'spline',
yAxis: 1,
lineWidth: 0,
marker: {
radius: 6
},
data: [[1438466230000, 73.36],[1438552630000, 75.08],[1438639030000, 57.54],[1438725430000, 38.85],[1438811830000, 39.14],[1438898230000, 63.78],[1438984630000, 76.03],[1439071030000, 75.78],[1439157430000, 77.61],[1439243830000, 79.74],[1439330230000, 77.35],[1439416630000, 73.98],[1439503030000, 75.79]],
color: '#AA0000',
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'PR Cont.',
type: 'spline',
yAxis: 1,
lineWidth: 0,
marker: {
radius: 5,
symbol: 'circle'
},
data: [[1438466230000, 78.84],[1438552630000, 79.85],[1438639030000, 75.16],[1438725430000, 59.15],[1440971830000, 78.5],[1441058230000, 78.45]],
color: '#BBBB00',
tooltip: {
valueSuffix: ' %'
}
}
],
tooltip: {
xDateFormat: '%A, %d %B %Y',
valueSuffix: ' kW',
shared: true // LEGENDA CONDIVISA
},
plotOptions: {
series: {
pointStart: Date.UTC(2015, 7, 1),
pointRange: 24 * 3600 * 1000
}
}
});
});
I've read tons of posts on Stack Overflow, tried tons of suggestions, I've even tried this post tinyurl.com/psbzxeh on HighCharts official forum which is referred to a similar problem, but it did not solve my issue.
Could someone point me out to the right solution?
Just to clarify things: columns look like translated by one day, because of that time (21:57:10 UTC) - which is almost another day (without UTC it's 23:57:10 for GMT+2:00). In general, if you have daily data, then it's better to use 00:00:00 as this is when exactly date starts. Manipulating JSON shouldn't be that hard, see:
function modify(data) {
var time;
data.map(function(e) {
time = new Date(e[0]);
time.setUTCHours(0);
time.setUTCMinutes(0);
time.setUTCSeconds(0);
e[0] = time.getTime();
return e;
});
return data;
}
And:
series: [{
name: 'Prod.',
type: 'column',
data: modify([
[1438466230000, 4603.36],
...
])
}]
Demo: http://jsfiddle.net/p7vnqmt7/3/
Note: to remove extra tick at the last place on the axis, you can simply set xAxis.max.
And to answer question in the comment: no, pointInterval shouldn't be used when you have data as x-y pair.
try below function above your highchart function and set xAxis min and max.
Use very first timestamp(date) as min and last timestamp(date) as max value.
$( function () {
Highcharts.setOptions( {
lang : {
rangeSelectorZoom : ' '
},
global : {
useUTC : false
}
} );
} );
I seem to have found a plotting bug see this example here: http://jsfiddle.net/MrSteve/Smu6r/
Source data:
<script src="http://gosargon.com/iconectiv/portWon.js"></script>
Javascript:
$('#container').highcharts('StockChart', {
chart: { },
credits: {
enabled: true
},
yAxis: {
startOnTick: false,
endOnTick: false,
min: -20000,
max: 20000,
plotBands: [{
from: 0,
to: 60000,
color: 'white'
}, {
from: -60000,
to: 0,
color: 'rgba(68, 170, 213, 0.1)'
}]
},
rangeSelector: {
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'
}
}
}
},
inputBoxBorderColor: 'gray',
inputBoxWidth: 120,
inputBoxHeight: 18,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
selected: 1
},
series: [{
name: 'Net',
data: portsNetData
}
]
});
});
Look at first few days of March and the hover shows all positive numbers by day (as does the json data) but the line takes a weird dip below zero similar to 1/27 -7661 value, but in March portion of X axis. I see the same problem in Chrome, Safari and Firefox.
The problem seems to be related to having negative data values. When I remove them the problem goes away.
Suggestions and help welcome.
Thanks,
Steve
If you check the javascript for errors you'll see this one:
http://www.highcharts.com/errors/15
Highcharts expects data to be sorted
This happens when you are trying to create a line series or a stock
chart where the data is not sorted in ascending X order. For
performance reasons, Highcharts does not sort the data, instead it is
required that the implementer pre-sorts the data.
This appears to be misleading because at first glance you data looks fine.
BUT, the with Date.UTC function, the month is zero based so some of your dates like
Date.UTC(2014,01,31) // this is February the 31st!?!
don't make any sense and Date.UTC is trying to make meaning out of them.
I am using Highcharts to show some statistic for my customer but I have problem when the customer select long data range
here is the first image for my highchart in the default view
and if I select too long date range here is the result
here is my code
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 50,
marginBottom: 80,
dataGrouping: {
enabled: true
}
},
title: {
text: 'Visits Statistics',
x: -20 //center
},
credits: {
text: '',
href: ''
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [<?php print $categories; ?>],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Visits'
},
min: 0,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +' '+'</b><br/>'+ this.y +'Hit';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 10,
borderWidth: 0
},
series: [{name:'from 2011-09-1',data: [<?php print $visits; ?>]}]
});
});
});
Highcharts can automatically manage time values in the x-Axis, provided that your chart is configured correctly. The problem in your case is that you've told Highcharts to use your categories, and it shows all of the categories.
To set up your chart to avoid this, you'll need to do two things:
Set the x-Axis type to datetime
Make sure that your data is formatted correctly
Or, use pointStart and pointInterval if you can't mess around with the data.
Using your example:
// ...
xAxis: {
//remove categories and set type as 'datetime'
type: 'datetime',
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
// ...
series: [{
name:'from 2011-09-1',
// since you probably don't want to change your data, we leave it alone...
data: [<?php print $visits; ?>],
// ... and instead, set `pointStart` and `pointInterval`
pointStart: Date.UTC(2011, 8, 1), // September 1, 2011
pointInterval: 24 * 3600 * 1000 // each point is 1 day (measured in milliseconds)
}]
I am generating my x-axis and y-axis data dynamically and displaying highcharts, but the chart becomes messy when the x-axis range is high with small intervals.
How do I make highcharts to make normal horizontally scrollable graph?
Here is what I am using right now:
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
//CODE FOR HIGHCHARTS JS
function makeChart() {
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Banana',
x: -20 //center
},
subtitle: {
text: 'Source: banana.com',
x: -20
},
xAxis: {
categories: xlist
},
yAxis: {
title: {
text: 'No. of C'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: $("#repoSelector option:selected").text(),
data: ylist
}]
});
}
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations here.
Here I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
}
Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories.
find the fiddled example here.
To enable scrollbar in x-axis, try this
xAxis: {
categories: xlist,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Check the jfiddle here: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/
Also, make sure that you import the highstock library
src="https://code.highcharts.com/stock/highstock.js"
add this
const Highcharts = require('highcharts/highstock');
comment this if you have
// import Highcharts from 'highcharts';
change xAxis to like this
xAxis : {
categories: [],
min:0,
max:9,
scrollbar: {
enabled: true
}
}
Use
require('highcharts/highmaps') instead of require('highcharts') in imports<br>
#NgModule({<br>
...<br>
imports: [<br>
BrowserModule, <br>
ChartModule.forRoot( <br>
require('highcharts/highmaps')<br>
],<br>
})