Missing columns in Highcharts when the series are added individually - javascript

I'm trying to add data to a chart, series by series. However, the columns are not centralized, and the initial and final columns are outside the charting area: https://jsfiddle.net/L28q3z7u/
Highcharts.chart('container', {
chart: {
type: "column",
},
xAxis: {
type: "datetime",
minTickInterval: 60000 * 60 * 24 * 365,
crosshair: true
},
series: [{
data: [1],
color: "blue",
pointStart: 1640995200000
},
{
data: [2],
color: "blue",
pointStart: 1672531200000
},
{
data: [3],
color: "blue",
pointStart: 1704067200000
},
{
data: [4],
color: "blue",
pointStart: 1735689600000
}]
});
If I try to add the data at once, it works: https://jsfiddle.net/263Lh4bu/
Highcharts.chart('container', {
chart: {
type: "column",
},
xAxis: {
type: "datetime",
minTickInterval: 60000 * 60 * 24 * 365,
crosshair: true
},
series: [{
data: [1,2,3,4],
color: "blue",
pointStart: 1640995200000
}]
});
Does anyone know how I can do it by adding series by series?

In that case, you need to disable column.grouping and set column.pointRange as the same value as xAxis.minTickInterval
plotOptions: {
column: {
grouping: false,
pointRange: 60000 * 60 * 24 * 365
}
},
Demo:
https://jsfiddle.net/BlackLabel/pzb9jwnm/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.grouping

Related

Highcharts, datetime, xAxis label. How to show all dates on x axis, not only even dates?

I'm new with Highcharts and stuck with a question. I need to display all dates on x axis, but by default, I'm supposing, only even dates are displaying. How can I display all dates?
Here my code:
const options: Options = {
chart: {
type: 'column',
},
title: {
text: '',
},
xAxis: {
crosshair: false,
type: 'datetime',
title: {
text: 'Days',
},
labels: {
format: LABEL_FORMAT[period],
rotation: 90,
align: 'left',
},
},
legend: {
enabled: true,
},
credits: {
enabled: false,
},
yAxis: {
title: {
text: 'Values',
},
},
series: [
{
name: 'test',
type: 'column',
data: [
[1651363200000, 10],
[1651449600000, 15],
[1651536000000, 5],
...
],
},
{
name: 'test 2',
type: 'column',
data: [
[1651363200000, 10],
[1651449600000, 20],
[1651536000000, 30],
...
],
},
],
},
};
This chart is not only used for to display day, but also for months and years.
Please, answer my question
Use the xAxis.tickInterval option. In this case:
xAxis: {
tickInterval: 24 * 3600 * 1000,
type: 'datetime',
labels: {
format: '{value:%Y-%m-%d}',
rotation: 90,
align: 'left'
},
}
Demo:
https://jsfiddle.net/BlackLabel/t0Lohusx/
API Reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval

highchart with a specific json format in django

I received data from an api in this format:
[{"t":"2010-05-06T00:00:00Z","v":294},
{"t":"2010-05-07T00:00:00Z","v":103},
{"t":"2010-05-08T00:00:00Z","v":293},
{"t":"2010-05-09T00:00:00Z","v":113}]
how can I draw a chart with highchart in my website with them. "t" have to convert to "time" and "v" to "volume"
this is my JS file. I need to remain in the chart property as much as I can.
Highcharts.chart('container', {
chart: {
scrollablePlotArea: {
minWidth: 700
}
},
data: {
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
legend: {
align: 'left',
verticalAlign: 'top',
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
className: 'popup-on-click',
marker: {
lineWidth: 1
}
}
},
});
You need to map your data to the format required by Highcharts.
const data = [{
"t": "2010-05-06T00:00:00Z",
"v": 294
},
...
];
const seriesData = data.map(dataEl => [new Date(dataEl.t).getTime(), dataEl.v]);
Highcharts.chart('container', {
...,
series: [{
data: seriesData
}]
});
Live demo: http://jsfiddle.net/BlackLabel/z74pyfbj/
API Reference: https://api.highcharts.com/highcharts/series.column.data

Issue with Highcharts spline not correctly positioned

I'm having a problem with Highcharts spline chart, I'm basically drawing a CPU/RAM chart, getting the values from my NAS API.
This is basically the chart.
And as you can see, this value is correct (6).
This one is not, 3 is of course lower than 6, but is displayed higher than 3.
And here you can see the 1 value, that is drawn around 24% (The RAM value).
This is the chart creation:
Highcharts.chart({
title: {
text: 'CPU and RAM'
},
chart: {
renderTo: 'cpu-memory-chart',
type: 'spline',
animation: Highcharts.svg
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPadding: 0.2,
animation: 1000
},
spline: {
marker: {
enabled: false
}
}
},
yAxis: {
title: '%',
max: 100,
min: 0
},
xAxis: {
type: 'datetime',
tickInterval: 1000,
labels: {
/*style: {
color: '#aaa'
}*/
enabled: false
}
},
exporting: {
enabled: false
},
colors: ['#4CAF50', '#1F80ED'],
series: [
{
name: "CPU",
pointInterval: 1000,
pointStart: (new Date()).getTime()
},
{
name: "RAM",
pointInterval: 1000,
pointStart: (new Date()).getTime()
}
]
});
}
And this is how I update points:
(note that data is the result of the API call, and cpuRamSeries is the serie of the chart)
if(points < 10){
points++;
cpuRamSeries[0].addPoint([(new Date()).getTime(), data.cpu]);
cpuRamSeries[1].addPoint([(new Date()).getTime(), data.ram]);
}else{
cpuRamSeries[0].addPoint([(new Date()).getTime(), data.cpu], false, true);
cpuRamSeries[1].addPoint([(new Date()).getTime(), data.ram], false, true);
cpuRamChart.redraw();
}
This is my first try with Highcharts so I don't really know where the problem might be. Any advice is appreciated :)

How to represent date array in java script for highcharts

I want to represent data include dates on highcharts dynamically(get from database) how can I do this?
assume this is my static data
series: [{
data: [[Date.parse('7/7/2017'),222],[Date.parse('9/9/2019'),333]],
pointStart: Date.parse('7/7/2017'),
pointInterval: 24 * 3600 * 1000 // one day
}]
});
how can I create this array([[Date.parse('7/7/2017'),222],[Date.parse('9/9/2019'),333]]) in java script dynamically and how can I pass it to series element in highcharts.
Here you go, i have prepare chart for you, from your data.
var initialData = [{
"name": "sales",
pointStart: Date.parse('7/7/2017'),
pointInterval: 24 * 3600 * 1000,
tickInterval: 24 * 3600 * 1000,
data: [[Date.parse('8/7/2017'),222],[Date.parse('9/7/2017'),333],[Date.parse('11/7/2017'),333]]}];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area',
},
xAxis: {
type: 'datetime',
tickmarkPlacement: 'on',
showFirstLabel: true,
showLastLabel: true,
endOnTick: true,
// second: '%H:%M:%S',
dateTimeLabelFormats: {
day: '%d. %b',
month: '%b \'%y',
year: '%Y'
},
labels: {
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
}
}
//,tickInterval : null
},
yAxis: {
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillOpacity: .5,
marker: {
radius: 4
},
stacking: 'normal'
}
},
series: initialData
});
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container" style="height: 400px"></div>

Highchart tick interval

I cannot seem to figure out how to set my tick interval correctly.
Need to have an hourly tick on the X axis.
The data is minute based.
Javascript:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: "datetime",
categories: time,
dateTimeLabelFormats: {
day: '%h'
},
minTickInterval: 24 * 36000000 * 1000,
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Asen',
data: temp
}]
,
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});
Data arrays:
temp = [-4.39,-4.39,-4.33,-4.33,-4.33,-4.33,-4.33]
time = [1359910725000,1359910786000,1359910848000,1359910908000,1359910968000,1359911028000,1359911089000,1359911150000]
First of all, remove the 'categories' property on xAxis, this has no meaning on a datetime axis. Note that datetime axes are based on milliseconds, so an interval of one hour is expressed as 3600 * 1000. See API highcharts, tickInterval
use this config for the xAxis.
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%H'
},
tickInterval: 3600 * 1000
},
See here for a working demo on JS Bin.
You should use tickInterval with value: 3600 * 1000

Categories