I'm working on a heat map with a lot of dates, but I've now removed weekends from the data. Unfortunately, that had the side effect of adding blanks to the heat map.
I've tried the connecting nulls option to no avail: https://api.highcharts.com/highcharts/plotOptions.series.connectNulls
Also tried: showEmpty:false
And I'm aware of https://www.highcharts.com/demo/spline-irregular-time, but don't know if I can apply that here.
Here is a pic:
Ideally I would figure this out because I intend on thinning out the data further. For example I may remove every other day.
Here is the pertinent chart code:
{
...
xAxis: {
type: 'datetime',
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}'
},
tickInterval: 30 * 24 * 3600 * 1000,
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
colsize: 24 * 36e5, // one day
tooltip: {
headerFormat: '<b>Details</b><br/>',
pointFormat: 'Date: {point.x:%A, %b %e, %Y}<br/>Underlying Price: ${point.y}<br/>Positon Value:{point.positionvalue}<br/>NET:{point.net}<br/>ROI:{point.roi}%'
},
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
...
app.chart.config["series"][0]["data"] = chartData;
The chartData variable looks something like:
[{
net: -0.2
positionvalue: -0.54
roi: -30.3
value: -30.3
x: 1591329600000
y: 55
}]
If you need to see it in prod I can attach my url.
UPDATE:
Here is a fiddle:
https://jsfiddle.net/vo8syrhn/
I think that the only solution for this case is use the breaks feature. Notice that using it requires including the broken-axis module.
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>
Demo: https://jsfiddle.net/BlackLabel/t72dfwz9/
API: https://api.highcharts.com/highcharts/xAxis.breaks
One way to do it is to omit the xAxis.type. You can see a demo on jsFiddle - https://jsfiddle.net/r32z7esd/ (note data for 2020-06-05 is missing)
html code
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart">
</div>
js
Highcharts.chart("chart", {
title: {
text: "chartTitle"
},
xAxis: {
categories: ['2020-06-06','2020-06-04','2020-06-03']
},
yAxis: [{
title: {
text: "yAxis1Title"
}
}],
series: [{type:'column',data:[3,4,7]}]
});
Related
I want to create a linechart with HighCharts that has a plotband along every point of the line. Like so: https://imgur.com/a/WVj7uJb
(They are using HighCharts as well, so it must be possible).
However, I can't seem to manage getting it for every point specific. Whenever I add plotbands, it just draws a band using the highest and lowest point like so: https://imgur.com/a/PZdKIBz
How I currently render the chart (note the plotbands part):
Highcharts.chart('chart', {
chart: {
type: 'line',
},
title: {
text: `${this.variable}`,
},
credits: {
enabled: false,
},
xAxis: {
type: 'category',
title: {
text: "Date"
},
},
yAxis: {
title: {
text: this.unit
},
plotBands: [
{
color: "orange",
from: 12,
to: 14
},
{
color: "orange",
from: 10,
to: 13
} // and so on.
]
},
tooltip: {
headerFormat: `<div>Date: {point.key}</div>`,
pointFormat: `<div>${this.unit}: {point.y}</div>`,
useHTML: true,
},
series: seriesList,
} as any);
So exact example would render a plotband from 10 to 14 along the whole linechart, instead of to different points: one from 12 to 14, and one from 10 to 13.
Any ideas as to how I can accomplish this? I have seen something with 'path', but I can't find anything about it.
Thanks in advance.
In that case, you should use arearange series instead of plotBand.
Demo:
https://www.highcharts.com/demo/arearange-line
API Reference:
https://api.highcharts.com/highcharts/series.arearange
I have two charts line and scatter together. I want two different tool tip for two different graphs. I have set for one but I couldn't do for another. Please help me out.
Code
this.chart = new Chart({
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
shared: true,
},
series: [{
type: 'line',
name: 'BG',
color: '#FA8686',
pointInterval: 3600 * 1000, // one hour
data: [[1571715050000, 95],[1571729415000, 115]]
},
{
type: 'scatter',
name: 'Insulin',
pointInterval: 3600 * 1000, // one hour
data: [{x:1571715050000, y:30, tool:85},{x:1577729415005, y:30, tool:90}],
}]
})
My output for scatter
But I want only the tool value to be in the tool tip of the scatter. Is there is any way to do it ?
You can customize the tooltip on a series level:
series: [{
...,
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
pointFormat: '{point.x}'
},
},
{
...,
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
pointFormat: '{point.y}'
},
}
]
Live demo: http://jsfiddle.net/BlackLabel/doqxygb9/
API Reference: https://api.highcharts.com/highcharts/series.scatter.tooltip.pointFormat
I'm trying to render a scatter plot in chart.js of (x,y) data where x is a date string. I've seen many examples and tutorials online where the instructor uses a function to generate the time stamp for an example chart, but I haven't found any examples that use real data like one might collect.
I have data that looks like this (collected from cron):
2017-07-08T06:15:02-0600,23.375
2017-07-08T06:20:02-0600,23.312
2017-07-08T06:25:02-0600,23.312
2017-07-08T06:30:02-0600,23.25
I tried a data like this in chart.js (both with and without "quotes" around the data string):
data: [{
x: 2017-07-08T06:15:02-0600,
y: 23.375
},{
x: 2017-07-08T06:20:02-0600,
y: 23.312
},{
x: 2017-07-08T06:25:02-0600,
y: 23.312
},{
x: 2017-07-08T06:30:02-0600,
y: 23.25
}],
Nothing renders. What am I doing wrong?
According to the documentation of scatter charts:
Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
So you can't use values like 2017-07-08T06:15:02-0600. You can convert dates into numbers and use them in your data.
In your case:
data: [{
x: 1499516102000,
y: 23.375
}, {
x: 1499516402000,
y: 23.312
}, {
x: 1499516702000,
y: 23.312
}, {
x: 1499517002000,
y: 23.25
}
]
Now your xAxes will be with numbers, so you can use a callback to modify xAxes labels.
That advice isn't quite right. The javascript moment.js makes it possible to plat scatter data using dates as the x axis value. For some reason the bundled version in Chart.bundle.js wasn't working for me, so I downloaded moment.js directly. I'm using this to setup:
<script src="js/moment.js"></script>
<script src="js/Chart.min.js"></script>
and this for my chart.js data details:
data: [
{x: moment("2017-07-08T06:15:02-0600"), y: 23.375},
{x: moment("2017-07-08T06:20:02-0600"),y: 23.312},
{x: moment("2017-07-08T06:25:02-0600"),y: 23.312},
{x: moment("2017-07-08T06:30:02-0600"),y: 23.25}
],
It's working great!
Another solution that worked great for me, was to just use the line type for the chart, configure it for using dates for the x axis, and addtionally disable the lines, so that it just looks like a scatterplot.
new Chart(ctx, {
type: 'line',
data: {
datasets: [{
x: 2017-07-08T06:15:02-0600,
y: 23.375
},{
x: 2017-07-08T06:20:02-0600,
y: 23.312
},{
x: 2017-07-08T06:25:02-0600,
y: 23.312
},{
x: 2017-07-08T06:30:02-0600,
y: 23.25
}]
},
options: {
showLine: false,
scales: {
x:{
type: 'time',
display: true,
title: {
display: true,
text: 'Date'
},
},
}
}
}
);
I see this as a quite elegant solution. The documentation even specifies:
The scatter chart supports all of the same properties as the line chart. By default, the scatter chart will override the showLine property of the line chart to false.
I couldn't find a working example from these answers, so here's mine.
new Chart(document.getElementById("chart"), {
type: "line",
data: {
datasets: [
{
showLine: false,
fill: false,
data: [
{
x: new Date(Date.now()),
y: 100,
},
{
x: new Date(Date.now() + 1000 * 60 * 60),
y: 200,
},
{
x: new Date(Date.now() + 2000 * 60 * 60),
y: 300,
},
{
x: new Date(Date.now() + 3000 * 60 * 60),
y: 400,
},
],
},
],
},
options: {
plugins: {
legend: {
display: false,
},
title: {
text: "Chart.js Time Scale",
display: true,
},
},
scales: {
x: {
type: "time",
time: {
unit: "hour",
// Luxon format string
// tooltipFormat: "DD T",
},
title: {
display: true,
text: "Hour",
},
},
y: {
title: {
display: true,
text: "value",
},
},
},
},
});
I pulled it from here: https://www.chartjs.org/docs/latest/samples/scales/time-line.html
You'll need to install momentjs and its adapter:
npm install moment chartjs-adapter-moment --save
..and then import all libraries like
import Chart from "chart.js/auto";
import "chartjs-adapter-moment";
i'm having trouble displaying chart from my csv file.it doesn't plot chart. maybe my parser it is the problem. firebug says no major errors but i'm stuck i dont know how to make it work. please help..
this is how my csv looks like:
1437931522,30
1437931555,30.25
1437931768,30.25
1437931785,29.75
1437931802,30.25
1437932702,30.5
1437933601,29.75
1437933974,30
end of file is \n, but seems to not showing right here so I inserted extra enter
this is the code:
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: true
}
});
var mydata = [];
var times = [];
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
if(lineNo=>0)
{
times.push(new Date(items[0]*1000).toUTCString());
mydata.push(items[1])
}
});
});
$('#container').highcharts({
title: {
text: 'Temperature',
x: -20 //center
},
subtitle: {
text: 'test1',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %e, %Y',
year: '%Y'
},
categories: times
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Temp',
data: mydata
}]
});
});``
is it ok, to get csv just with 'data.csv' if it is in the same directory or I have to set entire url?
this ismy fiddle:
http://jsfiddle.net/skoky2/yw25z6ow/1/
You should use the following code in your main module
data: {
csv: csv
},
Ref: data-module
1) If you use datetime type of xAxis, you should no use categories. You can define tickPositions
2) Point value should be number not string, so replace:
mydata.push(items[1])
with
mydata.push(parseFloat(items[1]))
i managed to get it work. but I noticed that this chart works only in IE 8, not in firefox or chrome. firefox with ie tab aslo works
I have another issue with Highcharts graphs. A PHP file returns a JSON whith many elements, compounds of two fields (name: date,int:). I need Highcharts draw all dates of the month in the X axis. The elements on JSON chain are all the same month.
I try whith many sintaxis of tickInterval (put 1, or put 24 * 3600 * 1000,...), but not works!
Thank you in advance!!!
NOTE: I tried to copy the code in jsFiddle, but does not work ... neither use jsFiddle :( ... sorry!
JSFiddle
Thanks wergeld!!
JSFiddle
JSON chain returned from PHP file:
[{"name":"Sant Iscle 60","data":[[1398902400000,4],[1399939200000,1]]},{"name":"Sant Iscle 62","data":[[1399939200000,2]]},{"name":"Laboratorio Comp.","data":[[1400025600000,2]]}]
Javascript file:
chart = new Highcharts.Chart({
chart: {
renderTo: 'divStatsGrupo',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'column'
},
title: {
text: tituloMes
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%d/%m/%Y',new Date(this.x)) + '<br/>' +'Alarmas: ' + this.y
}
},
xAxis: {
type: 'datetime',
tickInterval: 1, //<------NOT WORKING?¿
labels: {
style: {
fontSize: '13px',
fontFamily: 'Arial,sans-serif'
}
},
dateTimeLabelFormats: { // don't display the dummy year
day: '%e. %b',
}
},
yAxis: {
tickInterval: 1,
title: {
text: 'Total alarmas'
},
allowDecimals: false,
min: 0
},
series : data,
});
});
Image explicative:
Thank you very much in advance!!!
EDIT & SOLVED! ...Thanks Jerko again! ...see below answers for the solution!
This is the common problem with columns and bars in Highcharts. You need to add pointRange under the plotOptions
Also tickInterval for one day is 24*3600*1000 not 1 (x-axis is in microseconds)
here is working fiddle
http://jsfiddle.net/nah67/3/
plotOptions: {
series: {
pointRange: 24 * 3600 * 1000 // one day
}
}
P.S. I removed some comments from your code, because they were distracting me :)