How can I make my own x-axis with a specific dates array and particular label for each one?
Something like this...
These are every three weeks, but my necesity is a mark every blue group (colored are events), each group has a start and end dates
You can customize the x-axis labels using a format function. E.g.,
options: {
showMinorLabels: false,
timeAxis: { scale: 'day', step: 1 },
format: {
majorLabels: function (date, scale, step) {
// return a custom label or "" depending on the date
}
}
}
Related
I am trying to invert the data I receive from my elastic search query.
The data I have is from a neural network driven car on a track.
I have track locations in X and Z, and the performance.. :
data: {
url: {
%context%: true
// %timefield%: #timestamp
index: performance.capture.August.*
body: {
size: 10000,
_source: ["var_Track_X", "var_Track_Z", "var_Performance"]
}
}
}
I've also tried to use calculate instead of tyle and expr, but no luck,
I tried to add _source. infront of my property name, but no luck either..
kibana would allow me to create scripted fields, but since vega can't
use these I need to make my own.
so I am trying:
transform: [
{type: "formula", expr: "-1 * datum.var_Track_X", as: "var_Playercar_X_Flipped"}
]
and plugging it in the axis like:
encoding: {
x: {
// Draw the time field on the x-axis in temporal mode (i.e. as a time axis)
field: var_Playercar_X_Flipped
type: quantitative
// Hide the axis label for the x-axis
axis: { title: false }
}
anyone know why it's not finding my property?
I have the following setting in reporting to display the total of stacked column:
I also tried, [[total]], "[[total]]" etc..
But I get:
Which is the same value as the last column.
What is the correct way to display the total value of the stacked columns ?
EDIT1:
Tried the first proposed solution and it gave the following:
where all labels are formatted with the same text.
For achieve this result you need:
1) Add "[[total]]" in "Total Text" field, in value axis advanced settings
2) Next you should override "Label Function" in Graph settings.
The code of function
/**
* Return label text
*/
function(graphDataItem, formattedText) {
var total = graphDataItem.values.total;
var formattedTotal = AmCharts.formatNumber(total, {
precision: 2,
decimalSeparator: ".",
thousandsSeparator: " "
}, 2);
return formattedTotal;
}
Result:
Is there a way to always have one item per line in the timeline? I don't want two or more items to share the same line, whatever the dates are.
Thanks.
You have to use groups, or if you're already using those for another purpose, you have to use subgroups.
Here's the official documentation for items, groups and subgroups (I'm assuming the website isn't gonna expire anytime soon... again...).
If you can use groups
Specify a different group for every item. You can set the group's content as an empty string, if you don't want to have a label for it on the left side of the Timeline.
If you want to arrange the groups in a specific way, specify an ordering function as the Timeline's options' groupOrder property. Example:
var options = {
// other properties...
groupOrder: function (a, b) {
if(a.content > b.content)// alphabetic order
return 1;
else if(a.content < b.content)
return -1;
return 0;
}
};
If you have to use subgroups
When you create an item, put it in the group it belongs to but also specify for it the subgroup property so that it's unique, like the item's id. For example, you can use the id itself, or add a prefix or suffix to it.
In the Timeline's options, set the stack and stackSubgroups properties to true.
In each group, set the subgroupStack property to true and specify an ordering function as the group's subgroupOrder property. Example:
var group = {
id: 1,
content: 'example group',
subgroupStack: true,
subgroupOrder: function(a, b) {
var tmp = a.start.getTime() - b.start.getTime();
return tmp === 0 ? parseInt(a.id) - parseInt(b.id) : tmp;
// if the start dates are the same, I compare the items' ids.
// this is because due to a bug (I guess) the ordering of items
// that return 0 in the ordering function might "flicker" in certain
// situations. if you want to order the items alphabetically in that
// case, compare their "content" property, or whatever other
// property you want.
}
};
I have a highchart which displayed the last x datapoints I measured.
This can be a few days or some hours.
When I have some hours, I want to display "HH:mm". And when it's midnight I want to display "HH:mm DD.MM.JJJJ".
But when I displayed a few days I only want to display "DD.MM.JJJJ"
I found a solution:
formatter: function() {
if (this.axis.tickPositions.length > 2 && (this.axis.tickPositions[1] - this.axis.tickPositions[0]) < (24 * 3600 * 1000)) {
if (this.dateTimeLabelFormat == format_days) {
this.dateTimeLabelFormat = format_minutes + "<br />" + format_days;
}
}
return this.axis.defaultLabelFormatter.call(this);
But I'm sure there is an nicer solution.
You can change dateTimeLabelFormats object to display specific date format on a specific unit.
API Reference:
http://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
Example:
http://jsfiddle.net/8gemdjn4/
I am using Chart.js 2.0 version to draw graphs, i want to define minimum step size in bar graph
var myNewChart = new Chart(grapharea, {
type: 'bar',
data: barData,
options: {
responsive: true,
scales: {
yAxes: [
{
ticks: {
min: 0, // it is for ignoring negative step.
beginAtZero: true,
stepSize: 1 // if i use this it always set it '1', which look very awkward if it have high value e.g. '100'.
}
}
]
}
}
});
this time i am using
stepSize: 1
i am using this step size to ignore the point value e.g. '0.5', it shows when the max graph values id less e.g '2'.
if i use this it always set the step it '1', which look very awkward if it have high value e.g. '100'.
I am looking for such thing:
suggestedMin = 1
Is there any thing to define thie minimum step size which should not be fixed in higher value cases.
If you don't want to show point value (e.g. 0.5) labels you could write a callback function to filter the point value labels instead of using stepSize.
Like this:
ticks: {
min: 0, // it is for ignoring negative step.
beginAtZero: true,
callback: function(value, index, values) {
if (Math.floor(value) === value) {
return value;
}
}
}
Working fiddle here: https://jsfiddle.net/ma7h611L/
Update:
As noted by Atta H. and Lekoaf below, Chart.js added the precision property to ticks. It is available since version 2.7.3. See Lekoaf's answer how to use this.
ticks: {
precision: 0
}
This worked equally well as the callback function above and is much cleaner.
precision, if defined and stepSize is not specified, the step size will be rounded to this many decimal places.
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html