I know I should have sorted data, but I'm getting it from different API calls and there are 10 other reasons why I cannot have sorted data.
I have some unsorted data, that I need to plot in a timeseries graph.
{
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2020, 0, 1), 29.9],
[Date.UTC(2020, 0, 2), 71.5],
[Date.UTC(2020, 0, 6), 106.4],
[Date.UTC(2020, 0, 3), 129.2],
[Date.UTC(2020, 0, 5), 144.0],
[Date.UTC(2020, 0, 8), 176.0]
]
}]
}
When I use the above options for highcharts, the line travels backwards
Is there a way I can make highcharts do the required sorting, and plot the chart correctly?
I have tried dataSorting option as well, but it didn't work.
Highcharts has a dataSorting flag to sort the data, so its not completely crazy of me to expect it.
Are you missing the dataSorting property?
{
xAxis: {
type: 'datetime'
},
series: [{
dataSorting: {
enabled: true,
sortKey: 'value'
},
data: [
[Date.UTC(2020, 0, 1), 29.9],
[Date.UTC(2020, 0, 2), 71.5],
[Date.UTC(2020, 0, 6), 106.4],
[Date.UTC(2020, 0, 3), 129.2],
[Date.UTC(2020, 0, 5), 144.0],
[Date.UTC(2020, 0, 8), 176.0]
]
}]
}
Highcharts requires sorted data in ascending X order. You need to pre-sorts the data, for example:
var data = [
[Date.UTC(2020, 0, 1), 29.9],
[Date.UTC(2020, 0, 2), 71.5],
[Date.UTC(2020, 0, 6), 106.4],
[Date.UTC(2020, 0, 3), 129.2],
[Date.UTC(2020, 0, 5), 144.0],
[Date.UTC(2020, 0, 8), 176.0]
];
data.sort((a, b) => a[0] - b[0]);
Highcharts.chart('container', {
...,
series: [{
data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/cf8tq6a2/
Related
I created a chartjs bar graph to represent a set of measurements over a 60 minute interval. I have managed to get the graph up and running but the end bars of it keep getting clipped. The code is here https://jsfiddle.net/bagelboy/yxs9tr5c/
//
var hourBarctx = document.getElementById("hourBarChart");
var hourBarChart = new Chart(hourBarctx, {
// type: 'line',
type: 'bar',
data: {
labels: [
// min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
// max: moment.unix(new Date(2018, 1, 0, 0, 30, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 1, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 2, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 3, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 4, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 5, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 59, 0).getTime() / 1000),
moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
],
datasets: [{
label: 'All Units',
data: [42, 43, 70, 89, 47, 42, 43, 70],
// backgroundColor: 'rgba(0, 0, 200, 0.1)',
backgroundColor: 'rgba(0, 99, 132, 0.6)',
borderColor: 'rgba(0, 99, 132, 1)',
// borderWidth: 0
borderWidth: 1,
},
{
label: 'TV',
data: [],
backgroundColor: 'rgba(76, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'Light',
data: [],
backgroundColor: 'rgba(0, 175, 80, 0.1)',
borderWidth: 1,
},
{
label: 'AC',
data: [],
backgroundColor: 'rgba(76, 0, 80, 0.1)',
borderWidth: 1,
}
]
},
options: {
tooltips: {
enabled: true,
callbacks: {
label: function(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label;
}
}
},
title: {
display: true,
text: 'Hour'
},
elements: {
},
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
},
categoryPercentage: 1.0,
barPercentage: 1.0,
type: "time",
stacked: true,
time: {
unit: 'minute',
unitStepSize: 1,
displayFormats: {
// day: 'MM/DD/YYYY hh:mm a X Z ',
minute: 'mm',
},
//new Date(year, month, day, hours, minutes, seconds, milliseconds)
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
}
}, ],
yAxes: [{
// barPercentage: 1,
// categoryPercentage: 1,
ticks: {
beginAtZero: true
}
}]
}
}
});
Anyone know how to keep the ends from being clipped like this?
I think it's the way you are trying to do the axis, its looking to show the values between 00-01, 01-02 etc, in the last data point your axis doesn't go to 1am, and the first data point is similar, i was able to fix it by changing:
min: moment.unix(new Date(2018, 1, 0, 0, 0, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 60, 0).getTime() / 1000),
to:
min: moment.unix(new Date(2018, 1, 0, 0, -1, 0).getTime() / 1000),
max: moment.unix(new Date(2018, 1, 0, 0, 61, 0).getTime() / 1000),
Might not be exactly what you want but in the fiddle (after adding moment.js as a dependency) it doesn't cut off your bars.
I haven't worked with time like this, but maybe the data supplied needs to be different to get it to work.
Hello i am plotting a Column Chart using Javascript and Google Chart. which shows per week the tickets wich met the critea of the SLA. So what i expect on the x-as are whole week numbers but instead i get divided numbers (see figure below). What can i do to change that ?
To create the column chart i use the following dataset:
[[1, 7, 4, 5, 0, 0, 1]
,[2, 12, 2, 9, 1, 1, 0]
,[3, 10, 0, 1, 1, 1, 0]
,[4, 4, 3, 0, 1, 0, 0]
,[5, 7, 5, 0, 0, 0, 0]
,[6, 6, 1, 0, 0, 0, 0]
,[7, 11, 4, 0, 0, 0, 0]
,[8, 11, 2, 0, 0, 0, 1]]
To plot this data to a chart i use the following code:
console.info('Start ticketsSolvedPerWeek SLA')
console.info(ds.Data)
// (A)Define column headers
var dataNew = new google.visualization.DataTable()
dataNew.addColumn('number', 'Weeknumber');
dataNew.addColumn('number', '00');
dataNew.addColumn('number', '01');
dataNew.addColumn('number', '02');
dataNew.addColumn('number', '03');
dataNew.addColumn('number', '04');
dataNew.addColumn('number', '05');
dataNew.addRows(ds.Data)
//(3) Set graph options
var options = {
title: ds.title,
hAxis: {
title: 'Weeknumber'
},
vAxis: {
title: 'Tickets'
},
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
},
width: 750,
height: 500,
};
//(4) Draw Graph
var slaChart = new google.visualization.ColumnChart(
document.getElementById('ticketsSLA'));
slaChart.draw(dataNew, options);
you can use option hAxis.ticks to provide custom axis labels
the option takes an array of values the same type as the data table axis column
in the following working snippet,
data table method getDistinctValues(columnIndex) is used to create the array for ticks
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var dataNew = new google.visualization.DataTable()
dataNew.addColumn('number', 'Weeknumber');
dataNew.addColumn('number', '00');
dataNew.addColumn('number', '01');
dataNew.addColumn('number', '02');
dataNew.addColumn('number', '03');
dataNew.addColumn('number', '04');
dataNew.addColumn('number', '05');
dataNew.addRows([
[1, 7, 4, 5, 0, 0, 1]
,[2, 12, 2, 9, 1, 1, 0]
,[3, 10, 0, 1, 1, 1, 0]
,[4, 4, 3, 0, 1, 0, 0]
,[5, 7, 5, 0, 0, 0, 0]
,[6, 6, 1, 0, 0, 0, 0]
,[7, 11, 4, 0, 0, 0, 0]
,[8, 11, 2, 0, 0, 0, 1]
]);
var options = {
title: 'title',
hAxis: {
ticks: dataNew.getDistinctValues(0),
title: 'Weeknumber'
},
vAxis: {
title: 'Tickets'
},
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20,
opacity: 0.1
}
},
width: 750,
height: 500,
};
var slaChart = new google.visualization.ColumnChart(
document.getElementById('ticketsSLA'));
slaChart.draw(dataNew, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="ticketsSLA"></div>
I created two simple time data charts with the same data. In the second one I switched the third and fourth data points and my chart becomes ugly.
You can see the results here:
http://jsfiddle.net/EdmundoDelGusto/1j8eh2ya/
first chart:
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9], //1.
[Date.UTC(2010, 0, 2), 71.5], //2.
[Date.UTC(2010, 0, 3), 106.4], //3.
[Date.UTC(2010, 0, 6), 129.2], //4.
[Date.UTC(2010, 0, 7), 144.0], //5.
[Date.UTC(2010, 0, 8), 176.0] //6.
]
}]
second chart:
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9], //1.
[Date.UTC(2010, 0, 2), 71.5], //2.
[Date.UTC(2010, 0, 6), 129.2], //4. <<-switched
[Date.UTC(2010, 0, 3), 106.4], //3.
[Date.UTC(2010, 0, 7), 144.0], //5.
[Date.UTC(2010, 0, 8), 176.0] //6.
]
}]
I want the second chart to look like the first chart without the need to order my data-series.
Is it possible, that Highcharts automatically connects the points in the order of the dates even if my data is in wrong order? Or do I have to sort my data first? Because in my term I got a big unsorted JSON array and maybe there is an easy solution to this.
Edit: seems like you can't do it, so I leave this post here, on how to sort an Json Array by Date: Sort JSON array by date key
The Highcharts requires to use the sorted data by x, ascending. Unfortunately has no build-in sorting algorithm.
I'm trying to show only the first day of the month in Xaxis, everything is ok when
the series array has more than or equal to five elements:
http://jsfiddle.net/2f6Ne/
data: [
[ Date.UTC(2014, 0, 1), 10.82413772161932 ],
[ Date.UTC(2014, 1, 1), 0.10286926951274679 ],
[ Date.UTC(2014, 2, 1), 0.4359489916094994 ],
[ Date.UTC(2014, 3, 1), 0.4359489916094994 ],
[ Date.UTC(2014, 4, 1), 0.4359489916094994 ]
]
But when the series are fewer than five elements the dateTimeLabelFormats option doesn't work:
http://jsfiddle.net/XtFnx/
data: [
[ Date.UTC(2014, 0, 1), 10.82413772161932 ],
[ Date.UTC(2014, 1, 1), 0.10286926951274679 ],
[ Date.UTC(2014, 2, 1), 0.4359489916094994 ],
[ Date.UTC(2014, 3, 1), 0.4359489916094994 ]
]
Any ideas?
While I"m not sure what you are asking, but have I vaguely guessed that you want to show first of each month on x-axis. If yes, you can use tickPositioner.
tickPositioner: function() {
var ticks = [
Date.UTC(2014, 0, 1),
Date.UTC(2014, 1, 1),
Date.UTC(2014, 2, 1),
Date.UTC(2014, 3, 1)];
//dates.info defines what to show in labels
//apparently dateTimeLabelFormats is always ignored when specifying tickPosistioner
ticks.info = {
//unitName: "month",
unitName: "day",
higherRanks: {} // Omitting this would break things
};
return ticks;
}
http://jsfiddle.net/2f6Ne/2/
http://jsfiddle.net/XtFnx/3/
It works as expected: you have changed month/year options, but all others (day, hour etc.) are used as defaults. dateTimeLabelFormats doesn't prevent from displaying different interval on xAxis. To change that use minTickInterval.
An issue I have noticed when you put two charts side by side in highcharts is that the tooltip function will work for the first chart but not the other. My guess that is that although the charts "look" like they are next to each other ... but in fact chart 1 is actually on top of chart 2. A good example of this is as follows: http://jsfiddle.net/F3pts/7/
Other example that will yield the same issue:
var options = {
chart: {
renderTo: 'container',
animation: true
},
xAxis: [{
type: 'datetime',
width :320,
}, {
type: 'datetime',
offset: 0,
width :200,
left: 380
}],
yAxis: [{
lineWidth: 2,
offset: 0,
tooltip: {
enabled: true,
formatter: function () {
return this.value;
}
}
},
],
series: [{
xAxis: 0,
name: 'Some line',
data: [
[Date.UTC(2010, 0, 1), 3],
[Date.UTC(2010, 0, 2), 7],
[Date.UTC(2010, 0, 3), 5],
[Date.UTC(2010, 0, 6), 6],
[Date.UTC(2010, 0, 7), 4],
[Date.UTC(2010, 0, 8), 5]
],
}, {
name: 'bar1',
xAxis: 1,
data: [
[Date.UTC(2010, 0, 1), 5],
[Date.UTC(2010, 0, 2), 6],
[Date.UTC(2010, 0, 3), 7],
[Date.UTC(2010, 0, 6), 4],
[Date.UTC(2010, 0, 7), 3],
[Date.UTC(2010, 0, 8), 4]
],
}, {
name: 'bar2',
xAxis: 1,
data: [
[Date.UTC(2010, 0, 1), 5],
[Date.UTC(2010, 0, 2), 8],
[Date.UTC(2010, 0, 3), 5],
[Date.UTC(2010, 0, 6), 6],
[Date.UTC(2010, 0, 7), 4],
[Date.UTC(2010, 0, 8), 3]
],
}]
};
var chart = new Highcharts.Chart(options);
Any ideas as to how ALL tooltips can be displayed? Kinda defeats the purpose if only one of these is available...
Regards and thanks for your time
Tooltip doesn't work, because of missconfigured chart:
tooltip: {
pointFormat: function () {
return "";
}
},
pointFormat should be string, not a function.
Anyway, there is stil la problem with tooltip position, see #2062.