Is this possible to do?
I have a lite graph that is tracking check in times for patients. This time might be coming back as 01:10:45 or 00:45:00 or something similar. And I'm trying to plot this on a graph so the receptionist can see how much time it takes for something to check into the clinic.
Initially I was just plotting this in minutes, but was just told that was not going to cut it. I couldn't find any documentation on this and I've tried everything I can think of.
This is kind of what my code looks like
waitAverage = []
for(looping through all my data here){
waitAverage.push(moment(data[i].AverageWaitTime, "hh:mm:ss").format('HH.mm.ss')); //I have also tried formatting it like HH:mm:ss. I thought maybe decimals would help
waitAverage.unshift(label)
}
arrayHolder.push(waitAverage);
c3.generate({
bindto: '.timeline',
data: {
columns: arrayHolder,
axes: {
data1: 'x'
}
},
axis: {
y: {
label: { // ADD
text: text,
position: 'outer-middle'
}
},
x: {
type: 'category',
categories: hour //This does exist I just didn't include the variable here
}
}
});
Any help would appreciated!
For anyone who needs an answer for this I was able to figure it out!
In the axis you have to call the tick format function and do some weird rounding.
axis: {
y: {
label: { // ADD
text: text,
position: 'outer-middle'
},
tick: {
format: function (d) {
return app.moment(Math.round(d*100)/100, "hh.mm").format('H:mm');
}
}
},
x: {
type: 'category',
categories: hour
}
}
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 am trying to make a graph that shows how much power solarpanels are produsing using chartJS. I am using data in the following format
{x: Fri Mar 19 2021 06:20:28 GMT+0100 (centraleuropeisk normaltid), y: 1.88}
And it makes a graph but the x values is not in a readable date format. The graph liks like this:
Link to picture of graph (I am not allowed to post images yet apparently)
https://i.imgur.com/HUOHoqg.png
To make the graph I use this code:
var ctx = document.getElementById("lineChart");
var line = new Chart(ctx, {
type: "scatter",
data: {
datasets: [
{
data: power,
borderColor: "#ffd420",
showLine: true,
fill: false,
},
],
},
options: {
tooltips: { enabled: false },
hover: { mode: null },
elements: {
point: {
radius: 0,
},
},
//---
xAxes: [],
//--
},
});
I have tried to play with the xAxes settings but it still show a large number instead of a date.
Does anyone know what settings can fix this or do I need to change the format of the input?
I have searched alot but I can't find a solution to this problem.
There are 2 options, you can make use of the timescale provided by chart.js in here you can set what format you want it to show the dates: https://www.chartjs.org/docs/latest/axes/cartesian/time.html
The other options is to use the tick callback to do it yourself like this:
options: {
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
const date = new Date(value)
return `${date.getDate()}/${date.getMonth()}/${date.getFullYear()}`
}
}
}]
}
}
I know the ApexCharts can help to display data using timeline chart.
but the example(vue) only shown how to display the date like
new Date(1797, 2, 4).getTime(),
new Date(1801, 2, 4).getTime() ```
how can I change the value to display time? like 08:00-09:00
You can create your own x-axis labels in the dataset using the chart's xaxis categories option.
For example:
options: {
chart: {
id: 'mychart'
},
xaxis: {
categories: ['8:00','9:00','10:00','11:00','12:00','1:00','2:00','3:00']
}
}
Use the formatter on the axis: https://apexcharts.com/docs/options/xaxis/. It isn't exactly the format you asked for, but will set you in the right direction. There are getMinutes() getSeconds() and GetHours() among other functions that can be used to then construct a format you want.
xaxis: {
type: 'datetime',
labels: {
formatter: function (val: number) {
return new Date(val).toLocaleTimeString()
}
}
},
I'm having an odd problem where my Highcharts graph is only properly "graphing" on Chrome. The graph frame itself shows up just fine (the axis' names, labels, white background, etc), but the actual columns do not get animated, nor do they show up on the graph to represent the actual data. It just appears to look like an empty graph.
The data is being called via AJAX. Everything on that end is fine. The code itself is also very simple, so not sure what could be causing this. Here is the code, any help would be greatly appreciated:
Highcharts.chart('modal-graph-wrapper', {
chart: {
type: 'column'
},
title: {
text: 'Build Time vs. Step'
},
yAxis: {
title: {
text: 'Length of Time (seconds)'
},
categories: timeArray
},
xAxis: {
categories: nameArray
},
plotOptions: {
series: {
pointStart: 0
}
},
series: [{
name: 'Build Time (seconds)',
data: timeArray,
lineWidth: 3,
marker: {
radius: 3,
fillColor: '#337ab7'
}
}]
});
I ended up figuring it out. It is because the Date.parse function does not work as expected in Firefox or Safari; whereas in Chrome it works as anticipated. Restructuring the time format solved my issue. Thanks!
I am using Highcharts to plot JSON Data. The dates are in the string format.
JSON Data:
[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]
HighCharts / JQuery Code :
<script>
var chart;
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
},
xAxis: {
labels: {
rotation: 45,
step: 3
},
type: 'category'
},
yAxis: {
lineWidth: 1,
title: {
text: '$ USD'
},
min: 0
},
series: []
};
$.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {
var BrentUSDPrice = {
name: "Brent Spot (USD)",
type: "line",
data: [],
marker: {
radius: 2
}
};
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
});
/*options.series[0] = BrentUSDPrice;*/
options.series.push(BrentUSDPrice);
chart = new Highcharts.Chart(options);
});
});
</script>
I'm unable to plot any values wrt each of the date strings. I tried converting the JSON dates to datetime instead but still the same issue.
Few More details (for testing purposes):
Modifying to the below line plots the graph with the correct "brent_spot" values. This means that the issue lies with the way the "trade_dates" are 'not' plotting.
BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
Edit 2 : (Using Datetime type to make the code work)
JSON Data (New): Returned as TO_CHAR(TRADE_DATE, 'YYYY/MM/DD')
[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
});
Server side language used : Coldfusion
Database : Oracle
Am I doing something silly somewhere?
I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/
I guess, you need to update to Highcharts 3.0.10 to get this working.
If you are using type: 'category' then you need to assign name: to the data points. See the categories entry at http://api.highcharts.com/highcharts#xAxis
If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".
So the question is whether you are using Highcharts 3.0 and if you do then it needs to look something like this:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
see: http://api.highcharts.com/highcharts#series.data