Ordering a feild (date) in simple Vega Data Table - kibana

I have a simple text vega ata table which we use in Kibana, it works fine, but I'm trying to find a way to order the results based on the arrival date, code below:
{
$schema: https://vega.github.io/schema/vega/v3.json
config: {
title: {offset: 20, fontSize: 14, font: "Helvetica", anchor:"start"}
}
title: {
text: Departure Airport Arrival Time
}
background: white
width: 1200
height: 100
padding: {"left": 0, "top": 5, "right": 5, "bottom": 5}
autosize: {type: "pad"}
// Define the data source
data: [
{
name: source
url: {
// change "index" to the name of the index
index: myindex*
"%context%": true
body: {
size: "10"
}
}
format: {property: "hits.hits"}
transform: [
{
type: flatten
// change fields to the actual path for flight segment but keep _source as a prefix
fields: ["_source.Something.FlightSegment"]
as: ["val"]
}
{
type: formula
as: x_position
expr: width * 1 / 4
}
{type: "formula", as: "line_height", expr: "20"}
{
type: stack
groupby: ["x_position"]
field: line_height
as: ["y0", "y1"]
}
]
}
]
marks: [
{
type: text
from: {data: "source"}
interactive: true
encode: {
enter: {
x: {field: "x_position", offset: -250}
y: {field: "y0"}
y2: {field: "y1"}
align: {value: "right"}
text: {field: "val.DepartureAirportCode"}
font: {value: "Helvetica"}
fontSize: {value: 14}
}
}
}
{
type: text
from: {data: "source"}
interactive: true
encode: {
enter: {
x: {field: "x_position", offset: -150}
y: {field: "y0"}
y2: {field: "y1"}
align: {value: "left"}
text: {field: "val.ArrivalDateTime"}
font: {value: "Helvetica"}
fontSize: {value: 14}
}
}
}
]
}
This is the result here:
You can see that the results are returned, but are out of order. What I would like to do is order it by ArrivalDateTime.
My problem is that most tutorials I have seen are for actual graphs and not for just plain old text.
Really appreciate anyone helping me out here.

I was curious about this too so found Vega lite sort
Especially sort by encoding from another field will do the job.

Related

How to color EXTJS 6.2 modern grid row

I'm facing an issue. I'm building an EXTJ 6.2 modern app with Sencha architect 4.1. I'm using the grid component in my panel with a server loaded store. I'd like to color rows according to the data I have.
In classic, this is doable with
viewConfig: {
forceFit: true,
getRowClass: function(record, rowIndex, p, store) {
//some if statement here
}
I tried this in modern but it doesn't work. Does anyone know of another way or a hack that I could do color the rows? Or at best at least change the one-color background.
I'd really like to avoid using the list component if possible.
In modern you can use itemConfig to configure Ext.grid.Row.
Add the code bellow to a Sencha Fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
itemConfig: {
listeners: {
painted: function (row) {
var record = row.getRecord();
var color = record.get('color');
row.setStyle('background: '+color)
//if (color == 'red')
//row.setStyle('background: red');
}
}
},
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120
},
{
text: 'Color',
dataIndex: 'color',
flex: 1
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
the itemConfig part is what will do the trick.
After #Gwynge's comment i've created another example setting the color to each cell using the renderer config:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", color: "blue" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", color: "green" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244", color: "yellow" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", color: "red" }
]
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
variableHeights: true,
store: store,
columns: [
{
text: 'Name',
dataIndex: 'name',
minWidth: 200,
//flex: 1,
//cellWrap: true,
cell: {
bodyStyle: {
whiteSpace: 'normal'
}
},
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 2,
minWidth: 250,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1,
minWidth: 120,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
},
{
text: 'Color',
dataIndex: 'color',
flex: 1,
renderer: function(value, record, dataIndex, cell) {
cell.setStyle('background: '+record.get('color')+';')
return value;
}
}
],
//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});
I hope this will help.
To color a row, the following code couldn't work in my project
itemConfig: {
listeners: {
painted: function(row) {
var record = row.getRecord();
}
}
}
row.getRecord doesn't work (getRecord() is not recognized as function)
I succeed to color a row from a cell
columns: [{
text: 'Name',
dataIndex: 'name',
width: 150,
sortable: true,
renderer: function(v, record, dataIndex, cell) {
var row = cell.up();
row.setStyle('background: ' + record.get('color') + ';');
return v;
}
}]
I found that neither of the solutions suggested in the accepted answer worked well for me. The solution using a painted event handler only works on first load. If the data is updated then the styling doesn't change so the rows are still coloured as per the original data. The renderer solution is unwieldy if you have a large number of columns or want to have multiple renderers.
For anyone else in the same boat, here's my solution:
itemConfig: {
viewModel: true,
bind: {
cls: '{record.IsEnabled === false ? "disabled" : ""}'
}
}

Highchairs Tooltip not showing accurate date time

I have a written a stats chart using highchairs.com for the daily visits and installs. I want to show the tooltip with Datetime and Names with total values for each series when hover or on click event.
Highcharts tooltip shared Data shared output is displaying with names but not the date and time correctly when you mouseover on the markers.
What I'm doing wrong?
The code I have written is on jsfiddle as well.
$(function () {
$('#campaign-container').highcharts({
chart: {
type: 'areaspline',
},
title: {
text: null
},
credits: {
enabled: false,
},
navigation: {
buttonOptions: {
enabled: false
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day:"%b %e, %Y",
},
tickInterval: 2,
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
min: 0,
max: 3000,
tickInterval: 1000,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalAlign: 'bottom',
layout: 'horizontal',
x: 0,
y: 0
},
plotOptions: {
areaspline: {
lineWidth: null,
marker: {
enabled: false,
radius: 5
}
}
},
series: [{
name: 'Visits',
color: '#d3d3d3',
data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}, {
name: 'Installs',
color: '#e77378',
data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}]
});
});
You need to provide either:
1) a pointStart and pointInterval property, on the series level (either in the plotOptions, or in the series object)
2) datetime values in the x values of your data
The datetime values can either by epoch time stamps (in milliseconds), or Date.UTC() objects.
The pointInverval, if used, must be in milliseconds.
Example using the pointStart and pointInterval properties:
http://jsfiddle.net/jlbriggs/7yrnreLx/3/
I have updated the code with the correct date time values and added the customised crosshair.
Here is the final code with a correct data values
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: null
},
credits: {
enabled: false,
},
navigation: {
buttonOptions: {
enabled: false
}
},
xAxis: {
type: 'datetime',
tickInterval: 2,
dateTimeLabelFormats: {
day:"%e",
},
crosshair: {
color:'#e77378',
zIndex: 2,
width: 3,
}
},
yAxis: {
min: 0,
max: 3000,
tickInterval: 1000,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalAlign: 'bottom',
layout: 'horizontal',
x: 0,
y: 0
},
plotOptions: {
series: {
cursor: 'pointer',
pointStart: Date.UTC(2016,0,1),
pointInterval: 86400000, //1 day
},
},
areaspline: {
lineWidth: null,
marker: {
enabled: false,
lineColor:'#e77378',
fillColor:'#ffffff',
lineWidth: 3,
radius: 4,
symbol:'circle'
}
}
},
series: [{
name: 'Visits',
color: '#d3d3d3',
data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}, {
name: 'Installs',
color: '#e77378',
data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}]
});
});

HighCharts scatter plot with Datetime on X Axis not plotting values correctly

I am creating a highchart scatter plot with epoch DateTime values on X-Axis and a float value on Y-Axis. The problem is when I use label formatter to convert the epoch time value to a readable time value ("DD-MMM-YYYY"), multiple labels with the same caption are created on X-Axis, and the points do not align vertically with the tick marks on the X-axis.
I have created a JSFiddle for it (Link). What can I do to resolve this problem...
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Errors'
},
subtitle: {
text: 'Source: Temp Data'
},
xAxis: {
allowDecimals: false,
title: {
text: 'days',
scalable: false
},
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%d-%b-%y', moment.unix(this.value));
}
},
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{"name":"Positive Influencer","data":[[1448994600,41.40329],[1448994600,20.19966],[1449081000,32.26196],[1449167400,45.44334],[1449167400,43.79153],[1449167400,41.07479],[1449167400,24.75943],[1449167400,59.41171],[1449167400,62.26523],[1449167400,43.51655],[1449167400,41.14505],[1449253800,49.21474],[1449253800,41.14505],[1449253800,41.14505],[1449253800,59.45902],[1449340200,29.63791],[1449340200,31.5257],[1449426600,12.77947],[1449426600,16.81416],[1449426600,17.47938]],"color":"#A9D18E"},{"name":"Negative Influencer","data":[[1448908200,21.79101],[1448908200,21.79101],[1448908200,21.79101],[1448908200,17.06943],[1448908200,33.64876],[1448908200,11.28691],[1448908200,18.40087],[1448908200,16.87335],[1448908200,50.01515],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,35.88634],[1448908200,20.16196],[1448908200,34.89129],[1448908200,12.91103],[1448908200,12.91103],[1448908200,12.91103],[1448908200,20.16196],[1448908200,24.0311],[1448994600,26.38517],[1448994600,11.80575],[1448994600,10],[1448994600,20.07552],[1448994600,32.33444],[1448994600,32.33444],[1448994600,20.16196],[1448994600,24.24678],[1448994600,26.86968],[1448994600,26.86968],[1449081000,16.27982],[1449081000,13.02332],[1449081000,25.71094],[1449081000,20.14183],[1449081000,11.01994],[1449081000,27.91542],[1449081000,27.91542],[1449081000,15.11342],[1449167400,29.38302],[1449167400,42.58746],[1449167400,13.3506],[1449167400,57.63139],[1449167400,46.52709],[1449167400,46.52709],[1449167400,27.91542],[1449167400,22.57789],[1449167400,20.14183],[1449167400,30.69887],[1449167400,18.12275],[1449167400,30.19594],[1449167400,30.19594],[1449253800,46.52709],[1449253800,13.3506],[1449253800,30.69887],[1449253800,12.30569],[1449253800,12.30569],[1449253800,11.81466],[1449253800,13.9246],[1449253800,11.80575],[1449253800,11.80575],[1449253800,18.12275],[1449253800,18.12275],[1449253800,27.91542],[1449253800,16.27982],[1449253800,16.27982],[1449253800,16.27982],[1449253800,16.27982],[1449253800,47.37541],[1449253800,16.27982],[1449253800,64.55871],[1449253800,42.33084],[1449253800,16.27982],[1449253800,22.57789],[1449253800,22.57789],[1449253800,16.27982],[1449253800,16.27982],[1449253800,50.01515],[1449253800,22.57789],[1449253800,12.91103],[1449253800,18.12275],[1449253800,81.70462],[1449253800,21.86977],[1449253800,22.57789],[1449253800,42.14268],[1449253800,21.1656],[1449253800,44.74439],[1449253800,30.48095],[1449253800,17.63912],[1449253800,42.34763],[1449253800,23.14725],[1449253800,28.20117],[1449340200,22.57789],[1449340200,24.12882],[1449340200,20.14183],[1449340200,22.57789],[1449340200,18.81954],[1449426600,24.12882],[1449426600,15.08914],[1449426600,21.53001],[1449426600,15.08914],[1449426600,15.08914],[1449426600,14.8175],[1449426600,15.08914],[1449426600,23.64472],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,30.59185],[1449426600,30.59185],[1449426600,30.59185],[1449426600,23.64472],[1449426600,18.12275],[1449426600,18.12275],[1449426600,19.01658],[1449426600,10],[1449426600,10],[
1449426600,10]],"color":"#FF5252"}]
});
});
TL:DR
Make your x axis tick marks fall at midnight with tickInterval: (24 * 3600 * 1000)
Detailed answer
You said that you saw "multiple labels with same caption are created on X Axis". However when I view your fiddle in a recent version of Google Chrome, the x axis looks clean, though the tickmarks don't align perfectly with the days:
I suggest you try different browsers to see if your issue is caused by a particular browser version.
You said in your comment that if you maximize the chart in a larger window, some of the date labels are repeated.
I suggest you make a simpler plot to try to nail down your issue(s).
Update
If you change your formatter function to include the time as well as the date:
Highcharts.dateFormat('%d-%b-%y %H:%M', moment.unix(this.value))
each tickmark will have a different label, even if they fall on the same day:
Alternatively, customize the layout of the tick marks so that they always fall on midnight.
Update 2
I made a simplified demo to show tick marks and data both aligned with midnight. The important features are:
tickInterval: (24 * 3600 * 1000) // the number of milliseconds in a day.
and:
[Date.UTC(2015, 11, 01), 75], // pure JavaScript to return a unix time (in milliseconds since unix epoch) of midnight on the 1st of December
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Datetime scatter plot demo'
},
subtitle: {
text: 'for Stack Overflow'
},
xAxis: {
tickInterval: (24 * 3600 * 1000), // the number of milliseconds in a day
allowDecimals: false,
title: {
text: 'Date',
scalable: false
},
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%d-%b-%y', (this.value));
}
}
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
"name": "Demo values",
"data": [
[Date.UTC(2015, 11, 01), 75],
[Date.UTC(2015, 11, 02), 70],
[Date.UTC(2015, 11, 02), 80],
[Date.UTC(2015, 11, 02), 45],
[Date.UTC(2015, 11, 03), 65],
[Date.UTC(2015, 11, 03), 40],
[Date.UTC(2015, 11, 05), 75]
]
}],
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

How to change the font family of Highchart to Bootstrap css default font family

I want to change the font of title, data label and tooltip to Bootstrap default default font in the pie chart (I'm using Highchart library to show the chart). I'm How can I change these? Tried to add fontFamily but it didn't work.
var chart = new Highcharts.Chart({
chart: {
renderTo: $(element).attr('id'),
backgroundColor: '#F8F8F8'
},
title: {
text: "Space Used by Users",
fontFamily: 'Helvetica'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.sizeText}',
style: {
fontSize: '11px'
}
},
showInLegend: true
}
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.sizeText}</b>'
},
series: [{
type: 'pie',
data: [
{
name: 'Personal Usage',
y: scope.item.personalUsage,
sizeText: scope.item.personalUsageSizeText
},
{
name: 'Shared Usage',
y: scope.item.sharedUsage,
sizeText: scope.item.sharedUsageSizeText
}
]
}]
});
How to change the font to default bootstrap?
You are only setting the font for the chart title. The below code sets the font globally for the pie chart.
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Helvetica'
}
}
});

Date format on chart from unix

Have put together a simple chart in Highcharts which is compiling from data supplied:
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
title: {
text: 'Chart'
},
xAxis: {
type: 'datetime'
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
fill: 'white'
},
select: {
style: {
color: 'white'
}
}
}
},
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
selected: 1
},
series: [{
name: 'Data',
data: [
[1325376000,102.2],
[1328054400,104.5],
[1330560000,106.7],
[1333238400,109.8],
[1335830400,122.1],
[1338508800,124.3],
]
}]
});
});
However, the date data (e.g. 1325376000) renders simply as hours on the x-axis on the chart and the dates show in the top appear as 1970... can you tell me where I have gone wrong? Many thanks.
Highcharts expects its dates in milliseconds. I think you are supplying seconds?
You have i.e 1325376000 which is timestamp, (date in 1970). Do you use UNIX timestamps or other? Which date should be? You can use i.e Date.UTC() to prepare appropaite date http://www.w3schools.com/jsref/jsref_utc.asp

Resources