When using $('#container').highcharts('StockChart', { ... the highest value of the y-Axis is not shown. If I try it without StockChart, it is ok.
Example in http://jsfiddle.net/h5bSV/3/ the value 430 is missing.
Is there a possibility to show this label?
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function(data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
tooltip:{
formatter:function(){
return "open: " + this.points[0].point.open + 'close: ' + this.points[0].point.close + ' high: ' + this.points[0].point.high + ' low:' + this.points[0].point.low;
}
},
series : [{
name : 'AAPL',
type: 'candlestick',
data : data,
tooltip: { valueDecimals: 2}
}]
});
});
});
You need to set ShowLastLabel as true.
Related
Highcharts is working when not calling Gantt chart in other views. I've played around trying to get this Gantt chart to work. Looks like there is a conflict with import map only calling highcharts and highcharts.ganttChart is not found. I've tried added the src url through a script tag directly in the html view but still getting this error.
Error msg <
Uncaught (in promise) TypeError: Highcharts.ganttChart is not a function
>
Javascript controller
```
import {Controller} from "#hotwired/stimulus"
export default class extends Controller {
connect() {
let today = new Date(),
day = 1000 * 60 * 60 * 24;
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
let dateFormat = Highcharts.dateFormat;
let series
let chart; // global
async function requestData() {
const response = await fetch('http://localhost:3000/api/v1/charts/index');
if (response.ok) {
const data = await response.json();
series = data.map(function (job, i) {
let data = job.deals.map(function (phase) {
return {
id: 'deal-' + i,
project: phase.project,
client: phase.client,
phase: phase.phase,
start: new Date(phase.from).getTime(),
end: new Date(phase.to).getTime(),
y: i
};
});
return {
name: job.name,
data: data,
current: job.deals[job.current]
};
});
setTimeout(requestData, 1000);
console.log(series);
chart = Highcharts.ganttChart('container', {
series: series,
title: {
text: 'Crew Schedule'
},
tooltip: {
pointFormat: '<span>Client {point.client}</span><br/>' +
'<span>Project: {point.project}</span><br/>' +
'<span>Phase: {point.phase}</span><br/>' +
'<span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>'
},
lang: {
accessibility: {
axis: {
xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.',
yAxisDescriptionSingular: 'The chart has a tabular Y axis showing a data table row for each point.'
}
}
},
scrollbar: {
enabled: true
},
rangeSelector: {
enabled: true,
selected: 0
},
accessibility: {
keyboardNavigation: {
seriesNavigation: {
mode: 'serialize'
}
},
point: {
valueDescriptionFormat: 'Assigned to {point.project} from {point.x:%A, %B %e} to {point.x2:%A, %B %e}.'
},
series: {
descriptionFormatter: function (series) {
return series.name + ', job ' + (series.index + 1) + ' of ' + series.chart.series.length + '.';
}
}
},
xAxis: {
currentDateIndicator: true
},
navigator: {
enabled: true,
liveRedraw: true,
series: {
type: 'gantt',
pointPlacement: 0.5,
pointPadding: 0.25,
accessibility: {
enabled: false
}
},
yAxis: {
min: 0,
max: 3,
reversed: true,
categories: []
}
},
yAxis: {
type: 'category',
grid: {
columns: [{
title: {
text: 'Crew'
},
categories: series.map(function (s) {
return s.name;
})
}]
}
}
})
}
return chart;
}
window.addEventListener('load', (event) => {
requestData();
});
}
}
I have an API which returns JSON data like this:
[
{
"name":"Something",
"data":[
{
"x":1541096421,
"y":2
},{
"x":1541436378,
"y":4
},{
"x":1553621371,
"y":2
}
]
},{
"name":"Something else",
"data":[
{
"x":1541096421,
"y":2
},{
"x":1541436378,
"y":4
},{
"x":1553621371,
"y":2
}
]
}
]
The x axis represents date/time and the y axis is a score. It's plotted on a chart like this, using some formatting to convert the date from millisecond timestamp to a readable date format:
function renderChart(data) {
$('#chartContainer').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: chartTitle()
},
xAxis: {
allowDecimals: false,
title: {
text: 'Date completed',
scalable: false
},
type: 'datetime',
labels: {
formatter: function () {
if (true) {
return Highcharts.dateFormat('%d-%b-%y', moment.unix(this.value));
}
else {
if (this.value > 0 && this.value < 24) {
return this.value;
}
else
return 0;
}
}
},
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'Score'
}
},
plotOptions: {
scatter: {
marker: {
radius: 5
}
}
},
series: data,
exporting: {
buttons: {
contextButton: {
menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.filter(item => item !== 'openInCloud')
}
}
// Tried adding this but it doesn't make any difference:
/*,
csv: {
dateFormat: '%d/%m/%Y'
}*/
},
tooltip: {
formatter: function () {
return 'Score of <b>' + this.y + '</b> posted on <b>' + Highcharts.dateFormat('%d-%b-%y', moment.unix(this.x)) + '</b>';
}
}
});
}
This works fine. However, when I click 'export to CSV' in the Highchart graph on the front-end it outputs a CSV file where the date is always showing as "18/01/1970". Obviously it's something to do with the fact that the API is returning a timestamp value, but I don't see how I can modify the format in the CSV similar to how it's done in the chart rendering code.
Can anyone advise how (preferably without modifying the data returned by the API) to get the CSV to output a correct date in day/month/year format?
Many thanks
It can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export. Check demo and code posted below.
Code:
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = Highcharts.dateFormat('%d-%b-%y', row.x * 1000);
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/yafx8cb1/1/
Docs:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
As per #Core972's comment, the issue here is related to the timestamp in the API returning the date as seconds rather than milliseconds. I don't believe there is a way to manipulate the date format in the CSV export specifically so it will require a change to the API which returns the data.
Wojciech Chmiel's answer demonstrates how to override Highchart's output to re-format the date from a non-ideal source.
Following is my highcharts config, can you help me to why my alternate months are coming, and if i want to show every month, how do i do it ? Also, to change width of the bar if showing every month.
Highcharts.chart("energy_chart", {
chart: {
type: "column",
spacingBottom: 15,
spacingTop: 10,
spacingLeft: 10,
spacingRight: 10,
backgroundColor: "#f2f2f2",
events: {
load: function() {
var fin = new Date();
var finDate = fin.getDate();
var finMonth = fin.getMonth();
var finYear = fin.getFullYear();
var ini = new Date();
ini.setFullYear(ini.getFullYear() - 1);
var iniDate = ini.getDate();
var iniMonth = ini.getMonth();
var iniYear = ini.getFullYear();
if (this.yAxis[0].dataMax == 0) {
this.yAxis[0].setExtremes(null, 1);
}
//this.yAxis.set
console.log(new Date(Date.UTC(iniYear, iniMonth, iniDate)))
console.log(new Date(Date.UTC(finYear, finMonth, finDate)))
this.xAxis[0].setExtremes(
Date.UTC(iniYear, iniMonth, iniDate),
Date.UTC(finYear, finMonth, finDate)
);
},
drilldown: function(e) {
console.log('drilldown')
var charts_this = this;
var inidrillDate = new Date(e.point.x);
setTimeout(function() {
inidrillDate.setDate(0);
inidrillDate.setMonth(inidrillDate.getMonth());
var DateinidrillDate = inidrillDate.getDate();
var MonthinidrillDate = inidrillDate.getMonth();
var YearinidrillDate = inidrillDate.getFullYear();
var findrillDate = inidrillDate;
findrillDate.setMonth(findrillDate.getMonth() + 1);
findrillDate.setDate(findrillDate.getDate() - 1);
var DatefindrillDate = findrillDate.getDate();
var MonthfindrillDate = findrillDate.getMonth();
var YearfindrillDate = findrillDate.getFullYear();
console.log(Date.UTC(
YearinidrillDate,
MonthinidrillDate,
DateinidrillDate
))
console.log(Date.UTC(
YearfindrillDate,
MonthfindrillDate,
DatefindrillDate
))
charts_this.xAxis[0].setExtremes(
Date.UTC(
YearinidrillDate,
MonthinidrillDate,
DateinidrillDate
),
Date.UTC(
YearfindrillDate,
MonthfindrillDate,
DatefindrillDate
)
);
if (charts_this.yAxis[0].dataMax === 0) {
charts_this.yAxis[0].setExtremes(null, 1);
}
}, 0);
}
}
},
title: {
text: '<p className="energy_gen">Energy Generated</p>'
},
exporting: { enabled: false },
xAxis: {
type: "datetime",
labels: {
step: 1
},
dateTimeLabelFormats: {
day: "%e"
}
},
yAxis: {
title: {
text: "kWh"
}
},
credits: {
enabled: false
},
plotOptions: {
series: {
cursor: "pointer",
dataLabels: {
enabled: true,
format: "{point.y}"
},
color: "#fcd562",
point:{
events:{
click:function(event){
}
}
}
}
}
},
tooltip: {
formatter: function() {
if (this.point.options.drilldown) {
return (
"Energy generated: <b> " +
this.y +
"</b> kWh " +
"<br>" +
Highcharts.dateFormat("%b %Y", new Date(this.x))
);
} else {
return (
"Energy generated: <b> " +
this.y +
"</b> kWh " +
"<br>" +
Highcharts.dateFormat("%e %b %Y", new Date(this.x))
);
}
}
},
series: [{'data':obj.data,'name':obj.name,"color":"#4848d3"}],
drilldown: {
series: obj.data
}
});
Also, attaching the screenshot of the rendered highchart with drilldown.
,
Now drilldown graph(same sort a issue)
EDIT:
It turnsout to be a zoom issue, i.e if i zoomout enough, then it shows all points. So, how to show every point without zooimg out .
Working fiddle:
http://jsfiddle.net/gkumar77/w9ngp63u/5/
Use tickInterval property and set it to one month:
xAxis: {
type: "datetime",
tickInterval: 30 * 24 * 3600 * 1000,
labels: {
step: 1
},
dateTimeLabelFormats: {
day: "%e"
}
}
Live demo: http://jsfiddle.net/BlackLabel/q5coany2/
API: https://api.highcharts.com/highcharts/xAxis.tickInterval
I created a highstock spline graph with half an hour interval data. The graph displays on "1 month,3 month" selectors, disappear on "all" selector. There are too many data points which could be the problem; but my other hourly dataset has even more data and works just fine.
See all the code in jsFiddle:https://jsfiddle.net/gbr1v9yu/8/
Here is my code for highchart:
$('#chart-A').highcharts('StockChart', {
rangeSelector : {
selected : 0
},
title : {
text : 'Water Level'
},
// xAxis: {
// ordinal: false
// },
yAxis: {
title:{text:'Water Level(m)'},
labels: {
align:'left',
formatter: function () {
return this.value + ' m';
}
}
},
navigator : {
enabled : false
},
colors: ['#0000FF'],
series : [{
type: 'spline',
name : 'Water Level',
data : tsData,
tooltip: {
valueDecimals: 2,
valueSuffix: 'm'
}
}]
});
Can anyone help me out? Thanks a lot.
let me know how to get the difference between my current value "this.y.toLocalString()" and the previous value ? I would like to know the rate of change between this 2 values.
var x = document.getElementById("people2").selectedIndex;
var y = document.getElementsByTagName("option")[x].id;
//Charts
var db = data.dataevolution[x]
$('#container').highcharts({
chart:{
type:'column',
},
xAxis:{
categories: [
'2005','2006','2007','2008',
]
},
yAxis: {
min: 0,
title: {
text: 'Nombre'
},
labels: {
formatter: function() {
return this.value.toLocaleString();
}
}
},
tooltip: {
formatter: function() {
return 'Le nombre de <b>' + this.series.name + '</b> est de <b>' + this.y.toLocaleString() + '</b>, en '+ this.x +'<br>soit une évolution de ' ; }
},
series: [
{
name: [db.metier],
data: [db.annee2005,db.annee2006,db.annee2007,db.annee2008]
},
]
});
You can get the prevous point like:
tooltip: {
formatter: function() {
var prevPoint = this.point.x == 0 ? null : this.series.data[this.point.x - 1];
// do stuff with it
}
}
Here's a fiddle example.