I'm creating a line chart using n3 line chart in my angular app.
My data is array of dates and counts.
This is the result I get:
As you can see, the X axis values are inconsistent.
It has a tick every 12 hours, but each tick has different format. I'm trying to keep the format the same for every tick, i.e:
This is how I include the chart in my html:
<linechart class="linechart" data="data" options="options"></linechart>
This is my axes options:
$scope.options = {
axes: {
x: {
key: "from",
type: "date",
innerTicks: false,
grid: false,
ticksInterval: d3.time.days
},
y: {
ticks: 6,
ticksFormatter: $scope. formatNumber
}
}
I've tried to use diffent values for ticks and ticksInterval but with no success.
Any way to achieve this?
Thank you.
I had the same problem today.
I solved it using thickFormat and the d3.time.format() function.
axes : {
x : {
key : "date",
type : 'date',
tickFormat : d3.time.format("%x %X")
}
}
Related
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 using highcharts to build my charts that shows the values that comes from a sensor placed into my garage: all of these values are numeric values, so, i have no problem to build a graph like the following one JSFIDDLE
As i've said, all of the values that comes from the sensor are numeric, except one: the "status", this value is a string value type and it's not a fixed string, it can be:
Transmitting
Standby
Active
Alarm
Or any free string
So, my intention is - and i don't know if that can be feasible - to draw a graph with a fixed serie value (e.g.: 1...maybe i have to use a javascript function that maps the "status" to a given value?) and show that string as fixed datalabels as shown in the fiddle that i've posted.
Final Remarks:
The data that comes from the sensor is a time-series value, like the following:
{"datetime": 1566730095, "status": "transmitting"}
{"datetime": 1566730162, "status": "hello! i'm here"}
This chart will be a separate chart instead the numeric charts, in order to simplify the build and management.
The final goal can be something like that (the following graph is a pure graphical example):
To achieve it you can map data like that:
series: [{
dataLabels: {
enabled: true,
format: '{point.name}',
rotation: -45,
align: 'left',
y: -8
},
data: data.map(item => {
return {
x: item.datetime,
y: 1,
name: item.status
};
})
}]
Demo:
https://jsfiddle.net/BlackLabel/840tv6mz/
To change the way data is exported to CSV you can use this wrapper (edit it as needed):
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows[0][0] = 'Time';
rows[0][1] = 'Status';
rows = rows.map(row => {
if (row.x) {
row[0] = H.dateFormat('%H:%M:%S.%L', row.x);
row[1] = row.name;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/to92mbu0/
I have a graph with values from 0-40000 (y2-axis) As an example: In a time window the values are 33000-37000. This can be seen on the right side axis-Y2. Now I want to have an axis Y on the left that shows relative values: that is, from 0-4000 in this example ... and at the same time to the right axis Y2 ... do you understand my concern?
Thanks Jerry
If I am understanding the question correctly you are trying to put two different y axes on a single graph.
Dygraphs has built in support for this.
When creating a new graph:
g = new Dygraph(
document.getElementById("graphDiv"),
data,
{
labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
series: {
'Y3': {
axis: 'y2'
},
'Y4': {
axis: 'y2'
},
},
axes: {
y: {
axisLabelWidth: 60
},
y2: {
// set axis-related properties here
labelsKMB: true
}
},
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
}
);
This is taken directly from the dygraphs 2 axes demo page which can be found here:
http://dygraphs.com/tests/two-axes.html
I have a highcharts chart that is dynamically updated. I add the values to the series using the "AddPoint" function on the series. Here is how I am initializing the chart.
var _trendToolChart = null;
var _trendSeries = null;
function createTrendTool() {
_trendToolChart = Highcharts.chart('trendToolContainer', {
chart: {
type: 'spline',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
title: {
text: 'Trending Signals'
},
yAxis: {
title: {
text: 'Values'
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: true
}
}
},
responsive: {
rules: [{
condition: {
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
_trendToolChart.showLoading("Loading...");
}
I keep the _trendToolChart variable as a global reference for later. On the regular I query our API to get a value. The value return is an x value of a datetime and a y value of a decimal. Since I have a multi line series, I have a WebId associated with each line on the chart itself. I find the series by this GUID, then add a point to the series.
Here's inside the function when I call it on the second:
var xValue = Date.UTC(apiResponse.DateString); // convert str to date
var yValue = apiResponse.Value; // decimal value
var point = [xValue, yValue];
// add to series & graph
var chartSeries = $.grep(_trendToolChart.series, function (e) { return e.userOptions.WebId == apiResponse.elemId; })[0];
chartSeries.addPoint(point);
_trendToolChart.redraw();
When I add these values to the chart, highcharts instead adds the x value as integer counts, not as a date. Here's the check inside the response function on chrome's developer side:
So instead of a series of ["11/27/2017",22] I get [0, 22] in my x values. And it shows on my chart, my xaxis labels has a "0" or 1 and not a Date.
Here's what I tried, instead of addPoint([Date,number]);, I've done addPoint ({x:Date, y:number}); Now that showed in the points on the highchart series with a date value, but then on my chart visually I saw, ZERO points added after the redraw.
What am I doing wrong?
Alright, it seems that the object being put in the x value was not a date, despite what it seems. It was actually a string.
So this returns a string:
Date("2017-11-27")
As a result, highcharts didn't know how to interpret that as a datetime, since I told it to do datetime in the options. The solution was this:
moment("2017-11-27").ToDate()
This returned a proper date object, and highcharts was able to interpret.