Related
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/
Started working with Phaser making my first game and so far progress has been fine, but I have hit a snag, where my inexperience is getting the best of me.
So the situation is as follows. I have a map generated from a 2D matrix. The Purple tiles in the picture.
var testMap = [
[0, 0, 0, 1, 1, 1, 1, 1],
[0, 1, 1, 1, 1, 1, 0, 1],
[0, 0, 0, 0, 0, 1, 1, 1],
[1, 1, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],
[1, 0, 1, 1, 0, 1, 1, 1],];
And I have a range of tiles around the player, that he can move to. The Green tiles in the picture.
I've also made a system that reads the mouse location and generates a path to the tile that the mouse is over. I have this path information in an array. The White tiles in the picture.
var path = [[3,3],[4,3],[5,3],[5,4],[5,5]];
And now I want to make the player move along this path, by using the coordinates of the path array. And ideally have a function in between, that checks if the player has stepped on a trap when he steps on a new tile while moving.
But I keep hitting a wall with this function. Any and all ideas would be a appreciated.
See this example. It's about tween interpolations, but illustrates a tween along a path as well. Basically instead of a single value for x, you pass an array.
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.
I am trying to create a line chart showing the number of hits on a page for an entire year. However I just want the horizontal axis to show one label per month on the first of each month. I've currently got something like this but it only shows the first month.
view.setColumns([{
type: 'string',
label: 'Month',
calc: function(dt, row) {
var date = dt.getValue(row, 0).split('/');
date = new Date(date[2], date[1] - 1, date[0]);
var current_month = date.getMonth();
if (current_month > month || (current_month == 0 && month != 0)) {
month = current_month;
return months[month];
} else {
return null;
}
}
}, 1]);
If your category values are of the Date() type, Google will usually nicely make them display by month by default. See the below example:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Rabbits');
data.addRows([
[new Date(1990, 0, 5), 1, 1, 0.5],
[new Date(1990, 1, 10), 2, 0.5, 1],
[new Date(1990, 2, 15), 4, 1, 0.5],
[new Date(1990, 3, 20), 8, 0.5, 1],
[new Date(1990, 4, 25), 7, 1, 0.5],
[new Date(1990, 5, 30), 7, 0.5, 1],
[new Date(1990, 6, 5), 8, 1, 0.5],
[new Date(1990, 7, 10), 4, 0.5, 1],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, null);
}
If your first column is not stored as a date, and they are just values, then I would suggest converting them to dates instead in order to make Google do the hard work for you.
I need to draw a chart to show the evolution of data in real time in a day. I've been playing in Google Charts Playground to see how it would be visualized, but I haven't been able to set the hAxis.viewWindow.max option, in order to make the X axis be fixed.
Here is the code I've been using to test:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'x');
data.addColumn('number', 'S0');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
[[2,0,0,0], 4, 1, 0.5],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {maxValue: [23,59,59,0], minValue:[0,0,0,0], viewWindow:{max: [23, 59, 59, 0]}}}
);
}
The documentation claims that hAxis.viewWindow.max receives numbers, but I haven't found a way to represent the "timeofday" type as a number.
Using that, the X axis goes from 0am to 2am, but I needed the axis to go until midnight.
I tried using "datetime" as the column type, with the same problem.
The sample below, using numbers, works the way I intended it to, drawing the line where my points are, but extending the grid until my max value:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'S0');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addRows([
[0, 1, 1, 0.5],
[1, 2, 0.5, 1],
[2, 4, 1, 0.5],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
hAxis: {maxValue: 23, minValue:0, viewWindow:{max: 23}}}
);
}
X axis will end up to your max value for it (or close in same cases - like this one). For example
in case of:
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
]);
the x axis will end at 1:00
in case of:
data.addRows([
[[0,0,0,0], 1, 1, 0.5],
[[1,0,0,0], 2, 0.5, 1],
[[23,59,59,0], 4, 1, 0.5],
]);
it will end at 23:59:59 showing 22:00 as the last x axis label.
This means that no matter the value your define as max in hAxis, the chart runs up to the max "timeofday" value you have in your dataRows (actually the last added row).