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.
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();
});
}
}
Below are my questions
I am using advanced accessible chart in high charts and I have customized few data points to be circle . Since the data for these points is almost in the same range , it's causing the data points to overlap . How do I prevent this?
the tooltip provided for these customized data points(circle) are not showing up . How to get the tool tip displayed.
I have been pondering a lot but none of the solution is working . Any help is appreciated.
Thanks.
enter image description here
function DrawRemoteRequestPSRChart(seriesData, yAxisCategories) {
Highcharts.seriesType('lowmedhigh', 'boxplot', {
keys: ['low', 'high'],
}, {
drawPoints: function () {
var series = this;
this.points.forEach(function (point) {
var graphic = point.graphic,
verb = graphic ? 'animate' : 'attr',
shapeArgs = point.shapeArgs,
width = 0,
left = Math.floor(shapeArgs.x) + 0.5,
right = left + width,
crispX = left + Math.round(width / 2) + 0.5,
highPlot = Math.floor(point.highPlot) + 0.5,
lowPlot = Math.floor(point.lowPlot) +
0.5 - (point.low === 0 ? 1 : 0);
if (point.low == point.high) {
highPlot = lowPlot - 20;
}
else if (lowPlot - highPlot < 20) {
highPlot = lowPlot - 20;
}
if (point.isNull) {
return;
}
if (!graphic) {
point.graphic = graphic = series.chart.renderer
.path('point')
.add(series.group);
} else {
console.log('graphic');
}
if (Math.floor(point.lowPlot) == Math.floor(point.highPlot)) {
graphic.attr({
stroke: "#FFCD11",
"stroke-width": 2,
});
//console.log('point.lowPlot & highplot ' + point.lowPlot, point.highPlot )
}
else {
graphic.attr({
stroke: "lime",
"stroke-width": 4,
"borderColor": "black"
});
}
graphic[verb]({
d: [
'M', left, highPlot,
'H', right,
'M', left, lowPlot,
'H', right,
'M', crispX, highPlot,
'V', lowPlot
]
});
});
}
});
var chart = Highcharts.chart('GraphHere', {
chart: {
type: 'lowmedhigh',
inverted: true,
},
credits: {
enabled: false
}, legend: {
enabled: false
},
title: {
text: ''
},
tooltip: {
useHTML: true,
shared: false,
formatter: function () {
if (this.point.options.low != this.point.options.high) {
return this.point.category + ': <br>PSR Request Time: ' + new Date(this.point.options.low).toGMTString() +
' <br>PSR Received Time: ' + new Date(this.point.options.high).toGMTString();
} else {
return this.point.category + ': <br>PSR Request Time: ' + new Date(this.point.options.low).toGMTString() +
' <br>PSR Received Time: N/A';
}
},
pointFormatter: function () {
if (this.point.options.low != this.point.options.high) {
return this.point.category + ': <br>PSR Request Time: ' + new Date(this.point.options.low).toGMTString() +
' <br>PSR Received Time: ' + new Date(this.point.options.high).toGMTString();
} else {
return this.point.category + ': <br>PSR Request Time: ' + new Date(this.point.options.low).toGMTString() +
' <br>PSR Received Time: N/A';
}
}
},
xAxis: [{
categories: yAxisCategories,
crosshair: true,
gridLineWidth: 1,
}],
yAxis: {
type: 'datetime',
gridLineWidth: 0
},
plotOptions: {
column: {
pointWidth: 10
},
series: {
stickyTracking: true,
whiskerWidth: 2,
grouping: true
}
},
series: seriesData
});
var seriesidexlength = chart.series.length;
for (var seriesidex = 0; seriesidex < seriesidexlength; seriesidex++) {
var dataindexlength = chart.series[seriesidex].data.length;
for (var dataindex = 0; dataindex < dataindexlength; dataindex++) {
var fromdate = new Date(chart.series[seriesidex].data[dataindex].low);
var todate = new Date(chart.series[seriesidex].data[dataindex].high);
if (fromdate.getDate() == todate.getDate()) {
//if (chart.series[seriesidex].data[dataindex].low == chart.series[seriesidex].data[dataindex].high) {
if (chart.series[seriesidex].data[dataindex].graphic != undefined) {
var obj = chart.series[seriesidex].data[dataindex].graphic.renderer.symbol('circle', chart.series[seriesidex].data[dataindex].plotX, chart.series[seriesidex].data[dataindex].plotY, 5).attr({ fill: 'orange', pointwidth: 10 }).add(chart.series[seriesidex].group);
chart.series[seriesidex].data[dataindex].graphic.destroy();
chart.series[seriesidex].data[dataindex].graphic = obj;
//console.log("same date - " + chart.series[seriesidex].data[dataindex].plotX, chart.series[seriesidex].data[dataindex].plotY)
} else {
//console.log("undefined"+seriesidex, dataindex)
}
//}
} else {
//console.log("not same" + seriesidex, dataindex)
}
}
}
chart.container.onmousedown = null;
chart.container.onclick = null;
$('.highcharts-yaxis').hide();
}
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 have a simple json document :
[ {
"x" : "a",
"y" : 2
}, {
"x" : "b",
"y" : 8
}, {
"x" : "c",
"y" : 4
}, {
"x" : "d",
"y" : 15
} ]
I want to visualize it using Highcharts having 4 series. I could success, however, the data appeared only as one series (see the next Figure).
Here is part of the code:
var options = {
.
.
.
series: [{ }]
};
.
.
.
var data = JSON.parse(json);
var seriesData = [];
for (var i = 0; i < data.length; i++) {
seriesData.push([data[i].x, data[i].y]);
options.xAxis.categories.push( data[i].x );
}
options.series[0].data = seriesData;
var chart = new Highcharts.Chart(options);
also updating the series
chart.series[0].update({
type: type,
});
works fine.
using
options.series.push({name: data[i].x, data: [data[i].x, data[i].y]});
creates 4 series but not appropriately visualized and also updating the series
chart.series[0].update({
type: type,
});
doesn't work, therefore, I want to focus in the first mentioned method.
any hints?
EDit: code which partially works for me:
var options = {
chart: {
renderTo: 'container',
type: 'column' //default
},
title: {
text: ''
},
yAxis: {
title: {
enabled: true,
text: 'Count',
style: {
fontWeight: 'normal'
}
}
},
xAxis: {
title: {
enabled: true,
text: '',
style: {
fontWeight: 'normal'
}
},
categories: [],
crosshair: true
} ,
plotOptions: {
pie: {
innerSize: 125,
depth: 80
},
column: {
pointPadding: 0.2,
borderWidth: 0,
grouping: false
}
},
series: [{ }]
};
// Set type
$.each(['column', 'pie'], function (i, type) {
$('#' + type).click(function () {
chart.series[0].update({
type: type
});
});
var data = get the data fom json file**
var seriesData = [];
for (var i = 0; i < data.length; i++) {
seriesData.push([data[i].x, data[i].y]);
options.xAxis.categories.push( data[i].x );
}
options.series[0].data = seriesData;
var chart = new Highcharts.Chart(options);
});
});
You have to decide whether you want to have 4 different series and update all 4 series at once or you want to have one series an then build e.g. legend on your own.
If you want to have 4 series, set grouping to false, set xAxis categories and each point should be mapped to one series with one point - the point.x should have the index of the series.
const series = data.map((point, x) => ({ name: point.x, data: [{ x, y: point.y }]}))
const chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
grouping: false
}
},
xAxis: {
categories: data.map(point => point.x)
},
series: series
});
Then you can update your all 4 series:
chart.series.forEach(series => series.update({
type: series.type === 'column' ? 'scatter' : 'column'
}, false))
chart.redraw()
example: http://jsfiddle.net/pdjqrj5y/
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.