I'm not able to set the xAxis min and max without screwing with the data. I tried using plotOptions and setting pointStart: Date.UTC(2016, 3, 1) but doing that screws with the data. The series ends up on the far right and doesn't load properly.
Is it possible to set a min and a max and make the data obey whatever is set? It loads properly when I don't set min and max. I need it to start in April 2016 and end on April 2018 with a tick every month.
Fiddle: https://jsfiddle.net/omaraziz/h5jsk7a3/5/
Here is an almost working version that just needs the xAxis dates and the tick (data is not exactly the same, but the same exact setting of the json:
The data is coming from a JSON file (data.json):
{
"(1)": [1,2,3,4,5],
"(2)": [6,7,8,9,0]
"(3)": [1,4,7,2,0]
}
Setting the options:
var myChart = function() drawChart() {
$("#container").highcharts("StockChart", {
rangeSelector: {
enabled: false
},
xAxis: {
type: 'datetime',
tickInterval: (24 * 3600 * 1000) * 30, // every month
min: Date.UTC(2016, 3, 1),
max: Date.UTC(2018, 3, 4)
},
series: processedData, // from the data loaded below
});
};
Loading JSON:
processedData = [];
$(function () {
$getJSON("data.json", function(data) {
for(let value in data) {
if(data.hasOwnProperty(value)) {
processedData.push({
name: value,
data: data[value],
})
}
myChart(); // after the data has loaded
});
});
If Your are recording your data at each hour, I hope your problem would be solved by using these two lines of code:
pointStart:Date.UTC(2016, 3, 1),
pointInterval: 3600 * 1000
Here is example:
var myChart = function drawChart() {
$("#container").highcharts("StockChart", {
rangeSelector: {
enabled: false,
},
xAxis: {
type: 'datetime',
ordinal: false,
min: Date.UTC(2016, 3, 1),
max: Date.UTC(2018, 3, 4)
},
plotOptions:{
series:{
pointStart:Date.UTC(2016, 3, 1),
pointInterval: 3600 * 1000
}
},
series: processedData,
});
};
const processedData = [];
$(function () {
$.getJSON("https://omaraziz.me/CC-chart/new-activity.json", function (data) {
for(let value in data) {
if(data.hasOwnProperty(value)) {
processedData.push({
//pointStart: Date.UTC(2016, 3, 1),
name: value,
data: data[value],
})
}
}
myChart();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<div id="container"></div>
Related
When looking at the Highstock documentation, it says there is a softMin and softMax for the xAxis, but if i leverage dates, it doesnt seem to properly represent the date ranges requested.
I have been needing to do the following: find the interval of the xAxis data, then padd the front/end of the array with null data at those timepoints to properly convey the info.
This works, but I figured HighStock's soft values should be able to handle this.
In a sample use case: you can set the following:
{
chart: {
type: this.type || 'line',
},
title: {
text: this.title || ''
},
credits: {
enabled: false
},
rangeSelector: {
inputEnabled: false, // Specific to the Date Range Picker.
enabled: false // Specific to the Quick Selects for YTD, 6 mo, zoom.
},
navigator: {
adaptToUpdatedData: true
},
scrollbar: {
enabled: false
},
legend: {
enabled: true
},
xAxis: {
min: undefined,
max: undefined,
softMin: undefined,
softMax: undefined,
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e'
}
},
// yAxis: {
// title: { text: ''}, opposite: true, type: 'linear'
// },
plotOptions: {
series: {
dataGrouping: {
approximation: 'sum',
groupPixelWidth: 25,
forced: true,
units: [
['minute', [30]],
['day', [1, 7, 15]],
['month', [1, 3, 6]]
]
}
}
},
series: []
}
So I look at the dates as if they are numbers, new Date().getTime() but if i want to set the softMin and softMax, I wanted to do something like:
xAxis: {
softMin: new Date().getTime() - 1000 * 3600 * 24 * days_back
softMax: new Date().getTime()
}
where days_back is a user defined variable for how many days previously to look.
The way i pad out the series info is as follows:
const endtime = new Date().getTime(); //The current definition of endtime is now as there is no data for the future.
const starttime = endtime - 1000 * 3600 * 24 * days;
opts.series = dataset.map((item, idx, arr) => {
const name: string = item.name || '';
const data: any[] = item.data || []; // data is a list of lists. ][time_as_number, value],...]
if (data.length > 1) {
/// The purpose of this code block is to padd out the dataset to the start and end ranges.
/// While there is a softMin and softMax, it doesnt work too when with regards to dates.
/// This will padd the data to be represenative of the users base selection.
/// If the list of data has 0 or 1 points, there is not enough data to define an interval for the target range.
const difference = data[1][0] - data[0][0];
let low = data[1][0];
while (low > starttime) {
low -= difference;
data.unshift([low, null]);
}
let high = data[data.length - 1][0];
while (high < endtime) {
high += difference;
data.push([high, null]);
}
}
return {
marker: { enabled: true },
showInNavigator: true,
type: 'line',
name,
data
};
});
Is there something I am missing which i should be taking into account? min/max/minRange/maxRange according to the docs are not the correct keys i wanted to assign to.
For ease of understanding, HighStock Documentation is located here: https://api.highcharts.com/highstock/xAxis.softMin
Here is a sample: https://jsfiddle.net/sp18efkb/
You will see in this sample i set the softMin but it is not reflected. If i use a chart object though, it works. It seems that while it is valid according to the API, is not a valid or monitored property.
When looking at HighStock charts, there is an additional variable which needs to be set if you are looking at this.
In the xAxis you need to set the property ordinal property to false. In order to get the navigator to function in the same way, you need to use that property, set the softmin and soft max as the same, and also turn off ordinal.
It would look something like this:
...
navigator: {
adaptToUpdatedData: true,
xAxis: {
ordinal: false,
min: undefined,
max: undefined,
softMin: new Date().getTime() - 1000 * 3600 * 24 * 5,
softMax: undefined
}
},
xAxis: {
ordinal: false,
min: undefined,
max: undefined,
softMin: new Date().getTime() - 1000 * 3600 * 24 * 5,
softMax: undefined,
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e'
}
},
...
Referred this link and having doubt with this code {$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?'},
I have Json data, if i replace instead of JSON link in the stockchart,chart get disappeared. If have only from last month,the chart should display from the last month. I don't know how to replace the link with my data. And i have 2 series, can I change to line to bar in stock highcharts to column?
Please share the points for 2 series column charts with the data from server side.
I have tried,replaced the link with my server side data.
var data1=([1501545600000,150.05],[1501632000000,157.14],[1501718400000,155.57],[1501804800000,156.39],[1502064000000,158.81],[1502150400000,160.08],[1502236800000,161.06],[1502323200000,155.32],[1502409600000,157.48],[1502668800000,159.85], [1502755200000,161.60],[1502841600000,160.95],[1502928000000,157.86],[1503014400000,157.50],[1503273600000,157.21],[1503360000000,159.78],[1503446400000,159.98],[1503532800000,159.27],[1503619200000,159.86]);
var data2=([1504224000000,164.05],[1504569600000,162.08],[1504656000000,161.91],[1504742400000,161.26],[1504828800000,158.63],[1505088000000,161.50],[1505174400000,160.86],[1505260800000,159.65],[1505347200000,158.28],[1505433600000,159.88],[1505692800000,158.67],[1505779200000,158.73],[1505865600000,156.07],[1505952000000,153.39],[1506038400000,151.89],[1506297600000,150.55],[1506384000000,153.14]);
var startDate = new Date("April 01, 2016 00:00:00");
var today = new Date();
var count = parseInt((today.getTime() - startDate)/(24*3600*1000)) -1;
$.getJSON(data1, function (data1) {
// Create the chart
Highcharts.stockChart('ytdChart', {
chart: {
alignTicks: false
//type:column
},
xAxis: {
range: 9 * 30 * 24 * 3600 * 1000 // nine months
},
rangeSelector : {
enabled:false,
},
navigator: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: 'YTD'
},
scrollbar: {
enabled: false
},
series: [{
// type: 'column',
name: 'YTD monthly charge',
data: data1,
tooltip: {
valueDecimals: 2
}
}
//{
//type:column,
// name: 'YTD Total',
// data: data2,
// tooltip: {
// valueDecimals: 2
// }
}
]
});
});
I want to dynamically change the startAngle value on my polar chart from JSON 'Wind_direction' value.
The code is below:
$(function() {
$.getJSON('wind_graph.php?callback=?', function(dataWind) {
var direction = Wind_direction;
var polarOptions = {
chart: {
polar: true,
events : {
load : function () {
setInterval(function(){
RefreshDataWind();
}, 1000);
}
}
},
title: {
text: 'Wind Direction'
},
pane: {
startAngle: direction,
},
xAxis: {
tickInterval: 15,
min: 0,
max: 360
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 30,
},
}
};
// The polar chart
$('#graph-1').highcharts(Highcharts.merge(polarOptions, {
yAxis: {
tickInterval: 5,
min: 0,
max: 25,
visible: false
},
series: [{
type: 'line',
name: 'Direction',
data: [
[0, 0],
[direction, 20]
],
}
]
}));
function RefreshDataWind()
{
var chart = $('#graph-1').highcharts();
$.getJSON('wind_graph.php?callback=?', function(dataWind)
{
var direction = Wind_direction;
chart.series[0].setData([[0,0],[direction, 20]]);
});
}
});
});
In the last function, below 'chart.series[0].setData... I was trying to add something like this:
chart.pane.setStartAngle(direction);
but this throws the error: "Cannot read property 'startAngle' of undefined"
Also was trying another one idea:
polarOptions.pane({ startAngle: direction });
but here is error: "polarOptions.pane is not a function".
So I'm stack. Please for help.
You should be able to update all chart options with Chart.update(). Unfortunately, it looks that it does not have any effect on pane - I reported the issue here.
Now you can update the pane in old-fashioned way - by destroying and creating a new chart - http://jsfiddle.net/highcharts/qhY8C/
The other possibility is trying the workaround - set options for pane, remove the pane and update the axis - it should create a new pane with new options.
const xAxis = chart.xAxis[0];
chart.options.pane.startAngle = 45;
Highcharts.erase(chart.panes, xAxis.pane);
chart.yAxis[0].update(null, false);
xAxis.update();
example: http://jsfiddle.net/v8L381Lj/
1) I am wondering how I can remove the date picker from the right side of the chart? I really only need the left rangeSelector buttons i.e. 24 hours, 6 hours...
2) is there anyway to turn off the dataLabels when you click on one of the rangeSelector options as well?
When zoomed in to show 5 minutes worth of data the dataLabels are handy, but when looking at 24 hours worth they make the chart quite unusable due to crowding. It would be nice if they could be automagically turned off when I zoomed out.
Huge thanks for your help, if this is indeed possible.
For the second option, i'm looking to toggle the visibility of
plotOptions:{series: {
dataLabels:{
enabled:true,
Fiddle Link
After customization of range selector from Highstock Example
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var chart = Highcharts.charts[0];
chart.showLoading('Loading data from server...');
$.getJSON('https://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
'&end=' + Math.round(e.max) + '&callback=?', function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
// See source code from the JSONP handler at https://github.com/highcharts/highcharts/blob/master/samples/data/from-sql.php
$.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function (data) {
// Add a null value for the end date
data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
// create the chart
Highcharts.stockChart('container', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: data
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'AAPL history by the minute from 1998 to 2011'
},
subtitle: {
text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
},
rangeSelector: {
buttons: [{ //customization of buttons
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'minute',
count: 5,
text: '5m'
}],
inputEnabled: false, // it remove datepicker
},
xAxis: {
events: {
afterSetExtremes: afterSetExtremes,
setExtremes: function(e) {
if(typeof(e.rangeSelectorButton)!== 'undefined')
{
if(e.rangeSelectorButton.text=='5m'){
addlables(); //function to add data label
}else{
removelables(); // function to remove data lable
}
}
}
},
minRange: 300 * 1000 // 5min * 1000
},
yAxis: {
floor: 0
},
plotOptions:{
series: {
dataLabels:{
enabled:false,
}
}
},
series: [{
data: data,
dataGrouping: {
enabled: false
}
}]
});
});
function removelables(){
var chart = $('#container').highcharts();
var opt = chart.series[0].options;
opt.dataLabels.enabled = false;
chart.series[0].update(opt);
}
function addlables(){
var chart = $('#container').highcharts();
var opt = chart.series[0].options;
opt.dataLabels.enabled = true;
chart.series[0].update(opt);
}
I've been working on this for hours and couldnt figure it out, I'd appreciate if anyone could help.
$(function() {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(),
// current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime' ,
tickPixelInterval: 150
},
yAxis: {
max: 400,
min: 0,
plotLines: [{
value: 200,
width: 1,
color: '#ccc',
}]
},
tooltip: {
enabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <=0; i++) {
data.push({
x: time + i * 1000,
y: time + 4 * 50
});
}
return data;
})()}]
});
});
});
Here's what I'm trying to do:
Instead of current time on the xAxis, I like to start from 00:00 and run 5 seconds increments.
I would also like to have the Y value to have random numbers, not sure why it is not working
Last, I would like to get value from another element, and draw a horizontal line on the graph accordingly.
Thanks for looking...
1 - Keep a running counter of the seconds (i) and use setHours() to set the hours,minutes,seconds and milliseconds...the only one you'll really care about is seconds though.
var i = 0;
setInterval(function() {
var x = (new Date((new Date()).setHours(0,0,i,0)).getTime()),
y = Math.random()*400;
series.addPoint([x, y], true, true);
i++;
}, 1000);
2 - Multiply your Math.random() by something (like your max y value).
Math.random():
Returns a floating-point, pseudo-random number in the range [0, 1)
that is, from 0 (inclusive) up to but not including 1 (exclusive),
which you can then scale to your desired range.
3 - Slightly unclear on what you're looking for, would you mind specifying?
EXAMPLE