I have datetime values on y-axis and I am trying to start my values in 2019 however, highcharts defaults to a datetime of 0 which is around 1970. So I have to include an initial column that brings me to todays date. How do I get round this and start adding my time values to a value that isn't 0?
You need to set threshold property:
yAxis: {
type: 'datetime',
...
},
plotOptions: {
series: {
threshold: threshold
}
},
series: [{
type: 'column',
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/s7vgkm3y/
API Reference: https://api.highcharts.com/highcharts/series.column.threshold
Related
I am using highcharts and in which I have by default today entire day data.
I would like to set start and end points dynamically.
$(document).ready(function() {
$.ajax({
type:'POST',
dataType: 'JSON',
url: "http://localhost/data.php",
success: function(response) {
var pointstart=response.start_date;
console.info(response.start_date+" "+response.end_date);
$('#graph').highcharts({
chart: {
type: 'spline',
zoomType: 'x'
},
xAxis: {
type: 'datetime',
setExtremes: (response.start_date,response.end_date),
tickInterval: 3600 * 1000,
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
series:[{
pointStart : pointstart,
pointInterval : 3600 * 1000,
name: 'cc',
data: response.data
}]
});
},
cache: false
});
});
Problem: I am not able to see graph from 00:00:00 to 23:59:59. I have per minute single record. Above graph showing me data from 12:48:01 to 23:59:01.
I am using this test data.
Note: In some cases, I have multiple months data so values should need to set up dynamically based on ajax response start_date and end_date. By
Test data: http://dpaste.com/2QQQX49
You can set xAxis extremes using min and max properties (Check here https://api.highcharts.com/highcharts/xAxis.min, https://api.highcharts.com/highcharts/xAxis.max). By default they are undefined and value is automatically calculated. That's why your chart is rendered from 12:48:01 to 23:59:01 - appropriately to your data.
Online example: https://jsfiddle.net/wchmiel/sL13nhfq/
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000,
max: response.end_date,
min: response.start_date,
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
}
Another approach is to use setExtremes method on xAxis object (https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes). You can make it for e.g when load event occur:
Online example: https://jsfiddle.net/wchmiel/e42sx7pk/
chart: {
type: 'spline',
zoomType: 'x',
events: {
load: function() {
var chart = this;
chart.xAxis[0].setExtremes(response.start_date, response.end_date);
}
}
}
I am trying to plot a chart with only two data points from a CSV file that holds many more data points with a datetime x-Axis.
In the end the user should be able to compare two years of his choice out of the whole dataset.
From the API documentation I know that I can pick a range of data points from a CSV with startRow and endRow:
https://api.highcharts.com/highcharts/data.startRow
But that would only plot one specific point, as you can see in my fiddle.
Is there any other way to programmatically show specific points?
Highcharts.chart('container', {
chart: {
type: 'column',
polar: false,
},
title: {
text: ''
},
subtitle: {
text: ''
},
data: {
csv: document.getElementById('csv').innerHTML,
startRow: 3,
endRow: 4,
googleSpreadsheetKey: false,
googleSpreadsheetWorksheet: false
},
series: [{
name: 'val'
}],
yAxis: [{
title: {
text: ''
},
opposite: true,
labels: {
align: 'right',
reserveSpace: true
}
}],
xAxis: [{
type: 'datetime',
opposite: false
}],
pane: {
background: []
},
responsive: {
rules: []
},
legend: {
title: ''
},
plotOptions: {
series: {
animation: false
}
}
});
Edit:
I forgot to mention, that i only want to load the CSV once. After that the user should be able to select/update data points without reloading the data.
For showing ranges of values dynamically, I used Axis min and max settings like this:
$(this).highcharts().update({
xAxis:{
min: Date.UTC(selectedStart,0,0),
max: Date.UTC(selectedEnd,11,31)
}
});
The whole dataset is loaded once and the chart axis gets updated on user interaction.
Now I am looking for something similar just not for a range but a comparison of two values off of the whole dataset.
Highcharts data module provides a function called parsed that allows you to modify the fetched data programmatically before it's applied to the chart.
From Highcharts API (https://api.highcharts.com/highcharts/data.parsed):
parsed: function
A callback function to access the parsed columns, the
two-dimentional input data array directly, before they are
interpreted into series data and categories. Return false to stop
completion, or call this.complete() to continue async.
Live demo: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/data/parsed/
Show data using highchart bar graph where categories are dynamic date which comes with data.
My code to show data on graph:
function highchartDate(Male,Female) {
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000, // one day
startOnTick: true,
endOnTick: true,
dateTimeLabelFormats: {
day: '%e of %b'
}
},
tooltip: {
shared: true
},
series: [{
name: 'Day Shift',
data: Male
}, {
name: 'Night Shift',
data: Female
}]
});
};
where Male and Female are the array of arrays like
Male = [[1508803200000, 41][1509235200000, 44][1509408000000, 44]]
Female =[[1508803200000, 41][1509235200000, 44][1509408000000, 44]]
when i run this code on fiddle it works fine but not in project I noticed the reason but don't get the way to make it worked in code.
Can any one help me in this getting the data displayed on graph properly.
this is the Link where you get the code which run fine if i put the value in data seperated with commas like [[1508803200000, 41],[1509235200000, 44],[1509408000000, 44]] .this works fine : https://jsfiddle.net/Pookool/k1qua683/1/
#Kamil Kulig can you help me in this or any one else
I made a barchart with dates. Currently, to remove the dates, you must click on the dates in the legend. I wish delete multiple dates at once.
Let's take an example. My dates range from 1960 to 2015. If I would have on my chart the dates from 2000 to 2005, so I would like that if you click on 1960 and 1999, then all the dates between are deleted / hidden. It goes faster when many dates.
How to do ?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
colors:[
'#7cb5ec',
'#434348',
'#90ed7d',
'#f7a35c',
'#8085e9',
'#f15c80',
'#e4d354',
'#2b908f',
'#f45b5b',
'#91e8e1',
'#DA70D6',
'#1E90FF',
'#E0F000'
],
legend:{
itemStyle:{
fontSize:'10px',
font:'10pt',
color:'#000000'
}
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
categories: [
'',
],
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2004',
data: [49.9],
},
{
name: '2005',
data: [83.6]
},
{
name: '2006',
data: [48.9]
},
{
name: '2007',
data: [69.1]
},
{
name: '2008',
data: [83.6]
},
{
name: '2009',
data: [40.9]
},
{
name: '2010',
data: [69.9]
},
{
name: '2011',
data: [83]
},
{
name: '2012',
data: [28.9]
},
{
name: '2013',
data: [40.9]
},
{
name: '2014',
data: [81.6]
},
{
name: '2015',
data: [24.9]
},
{
name: '2016',
data: [46.4]
}]
});
});
Thanks
Rather than having each year as its own series, I would recommend that you place the years as the values in your x-axis (as categories) and then use Highcharts' native zoom function to allow users to select a certain date range.
I've updated your fiddle with some changes, which I explain below: https://jsfiddle.net/brightmatrix/hr28s27L/
First, in your chart option, I added zoomType: 'x' to allow users to use their mouse to zoom in on specific years. The value x means they can only zoom horizontally (across), which makes for a "cleaner" interaction.
chart: {
type: 'column',
zoomType: 'x'
},
Second, I updated your x-axis with the years as the categories/values:
xAxis: {
categories: ['2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
},
Lastly, I updated your series to show just the data points, which are then plotted on the y-axis:
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4]
}]
Here is what happens when a user clicks and drags their mouse cursor:
The shaded box is what they are selecting. Once they release the cursor, the chart will automatically adjust to show only what they chose. A "Reset Zoom" button will appear at the top right to allow them to go back to all years:
Update (July 19, 2016): I did some research on adding a simple slider element to this chart that allows users to choose from a range of years.
An updated version of my fiddle that shows this example chart with sliders can be found here: https://jsfiddle.net/brightmatrix/uvat8u05/.
The code to handle the sliders is shown below. I discovered that explicitly setting the slider values to integers using the parseInt() function solved a couple of problems:
You can correctly compare the slider values to make sure users can't choose an end year that is earlier than the start year.
The setExtremes() function correctly shows a single year when users choose the same start and end year.
All x-axis labels are shown at all times. Before I added parseInt(), some labels disappeared when users chose different values in the sliders.
Please be sure to read the comments I've left in both the HTML and Javascript panes, as I've included additional details on why I made certain code decisions.
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// convert the slider values to integers to make sure setExtremes() works as expected
var slider1Val = parseInt($('input[name="slider1"]').val());
var slider2Val = parseInt($('input[name="slider2"]').val());
if (slider2Val < slider1Val) {
// warn the user if they try to choose an end year that is later than the start year
alert("You can't choose an end year that is earlier than your start year.");
} else {
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes(slider1Val, slider2Val);
}
});
I hope this information is helpful for you.
I have looked at the HighCharts API and I came across dateTimeLabel but I haven't been able to set the label properly. Here is my code, for the options
var options = {
chart: {
renderTo: 'graph',
defaultSeriesType: 'line'
},
title: {
text: 'KWH Per Phase'
},
xAxis: {
title: {
text: 'Time Period'
},
categories:[],
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b'
}
},
yAxis: {
title: {
text: 'KWH Per Phase'
}
},
series: []
};
and the part where I push in the data
if (itemNo === 0) { /* first item containes year */
options.xAxis.categories.push(item);
}
The datetime is displayed how it is in my csv file "1/2/2014 7:59"
If you have pushed the categories then it doesn't become any dateTime axis. Then it is a normal axis with categorised labels.
For dateTime axis you need to specify the type: 'datetime'
and pass the date along with data.
the date should be either a UNIX time stamp or the UTC date format.
examples:
with UTC date
http://jsfiddle.net/kolliparavamsikrishna/9XWpC/
http://jsfiddle.net/kolliparavamsikrishna/jFj5w/
timestamp
http://jsfiddle.net/kolliparavamsikrishna/jFj5w/1/
you can format the labels from the formatter.
I hope this will help you.