I would like to draw a line chart for a field raw_value and I've this code :
{
$schema: https://vega.github.io/schema/vega-lite/v4.json
data: {
url: {
%context%: true
%timefield%: #timestamp
index: filebeat-*
body: {
size: 10000
_source: ["#timestamp","raw_value"]
}
}
format: {property: "hits.hits"}
}
transform: [
{calculate: "toDate(datum._source['#timestamp'])", as: "time"}
]
mark: circle
encoding: {
x: {field: "time", type: "temporal"}
y: {field: "_source.raw_value", type: "quantitative"}
}
}
it works well and I see the circles for each couple (time,raw_value), but if i want to draw a line to rely points and i replace circle by line, nothing appears on the chart.
Lines are only drawn between adjacent non-null points, so what you describe generally means that you have null y values in your data. You can fix this by filtering out undefined data before drawing your lines:
transform: [
{calculate: "toDate(datum._source['#timestamp'])", as: "time"},
{filter: "isDefined(datum._source.raw_value)"}
]
Related
I'm trying to draw some text at a particular height (so it's drawn at the same height as some other primitive) in Cesium. Text-wise, I can't seem to be able to draw anything but labels clamps to the ground (in the example below, the first little circle is at ground level). As such:
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(parseFloat(terrain[5]), parseFloat(terrain[4])),
ellipse : {
semiMinorAxis : 10000,
semiMajorAxis : 10000,
height : 1000,
fill : true,
outline: true,
material : Cesium.Color.fromCssColorString(someColour).withAlpha(0.5),
outlineWidth : 2
},
label: {
id: 'my label',
text: "Blabla",
scale: .5,
height: 1000
}
});
Is there any way to draw text at a specific height in Cesium?
The text height needs to be part of entity.position. Try adding it as a 3rd parameter to Cartesian3.fromDegrees on the 2nd line there.
I'm working on highcharts to view my data.
And i would like to do a single chart with 2 lines inside, wich one lines as 1 y-axis.
I already implement the chart like this :
$.get("http://1001dev.com/Chahine/wp-content/themes/consulting-child/data/fonds/DigitalStarsEurope/assetsFR.csv", function(csv) {
$('#EuropeActifs').highcharts({
yAxis: [{ // Primary yAxis
labels: {
format: '{value} M',
},
title: {
text: 'Actifs en € ',
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
labels: {
format: '{value}',
},
title: {
text: 'Nombre de parts',
}
}],
data: {
csv: csv
}
});
});
This is my CSV :
Date,Actifs en €,Nombre de parts
13/11/1998,461728.00,30286.50
11/12/1998,460454.00,30286.50
08/01/1999,499715.00,30286.50
05/02/1999,502512.00,30933.50
05/03/1999,502481.00,30933.50
02/04/1999,505413.00,31105.00
30/04/1999,519929.00,31105.00
28/05/1999,516903.00,31105.00
Obviously my CSV is longer than this. But u can see the idea i think.
I would like to have the data for Actifs en € associete to the y-axis Primary and the data for Nombre de parts associate to the y-axis Secondary
How can i do that ?
Thanks a lot for your help
Cheer
Jordan
You need to specify which yAxis you want the different series to be in, like this:
series: [{
yAxis: 1
}, {
yAxis: 0
}]
Working example based on your data: https://jsfiddle.net/ewolden/q489nsgw/2/
API on data: http://api.highcharts.com/highcharts/data
API on series.yAxis: http://api.highcharts.com/highcharts/series.line.yAxis
I am a beginner for highcharts. I was trying something and got stuck. My x axis has values repeated multiple times. Tooltip values should contain date and time as shown. but the thing i want to change is the x axis values. same value must be shown only once and not repeated everywhere where there is data.
X axis format must be DD-MMM and tooltip should be DD-MM-YY HH am/pm .
is this possible?
Here is my trial code
http://jsfiddle.net/j6oqcgp2/
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
categories:['01-Feb-17 12 AM','01-Feb-17 01 AM','01-Feb-17 02 AM','02-Feb-17 04 AM','02-Feb-17 05 AM','02-Feb-17 06 AM','02-Feb-17 07 AM'],
labels: {
formatter: function () {
y=(this.value).substring(1,6);
return y;
}
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
formatter: function () {
y=(this.x).substring(0,15);
return y;
},
shared:false
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [5,10,19,10,4,6,8]
}]
});
and this is how i want it to be
If your x-axis categories are going to be a predictable set of values (for example, four readings on each day), then you simply can add the tickInterval attribute to show a new axis label on when the day changes (see http://api.highcharts.com/highcharts/xAxis.tickInterval).
So, if you had four readings per day, you would add tickInterval: 4 to your x-axis options. This would show an axis label at every fourth reading, or, in this example, once per day.
If, however, your x-axis categories are not predictable (for example, any number of readings per day), you may want to look at this Highcharts demo, which shows a chart with irregular time periods: http://www.highcharts.com/demo/spline-irregular-time. In this demo, you'll see regular, non-repeating axis labels for whatever unit you're measuring (hours, days, etc.) and the data being plotted as frequently as it's recorded in the data.
I hope these examples and resources are helpful for you.
I am using morris.js to create bar chart.But the size of bar is too wide.
Can you suggest how can i restrict the bar size?
Using the Java Script Code
var bar = new Morris.Bar({
element: 'bar-chart',
resize: true,
data: [
{y: '2012', a: 100, b: 90}
],
barColors: ['#00a65a', '#f56954'],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['CPU', 'DISK'],
hideHover: 'auto'
});
You can use barSizeRatio to control the width of the bars. So, when you have few bars e.g. less than 5, set barSizeRatio to 0.2. For more than 5 bars, let don't specify barSizeRatio, let the chart control figure it out.
jsfiddle http://jsfiddle.net/bv4xezh7/1/
Morris.Bar({
barSizeRatio:0.2,
element: 'chart',
data: [
{ date: '04-02-2014', value: 3 },
{ date: '04-03-2014', value: 10 },
],
xkey: 'date',
ykeys: ['value'],
labels: ['Orders']
});
You can make it more dynamic by figuring out the width of the chart control and then decide the value of barSizeRatio to meet your maximum bar width criteria.
I have problem with sorting in Kendo grid. Here is my example: http://dojo.telerik.com/iVATi
In IE sorting works fine: default view and asc sorting view are the same: first going elements starting with symbols, second elements with a-z letters, third elements with а-я letters. But in Chrome and Firefox I see three other results:
1). default view: first going element starting with symbols, second elements with a-z letters, third elements with а-я letters. (correct!)
2). asc sorting: first going elements starting with symbols, second elements with а-я letters, third elements with a-z letters. (bad!)
3). desc sorting: first going elements with z-a letters, second elements with я-а letters, third sorted elements with symbols. (correct!)
The problem is caused by Chrome's unstable sorting and adding an auxiliary data field is the standard way to resolve this limitation.
In case you don't want to add indexes in the data items array, it is also possible to add them on the fly with schema.parse:
var dataSource = new kendo.data.DataSource({
data: [
{ Name: "!asdgad" },
{ Name: "#sgjkhsh" },
{ Name: "adfadfka" },
{ Name: "tgjbndgnb" },
{ Name: "xsdfvks" },
{ Name: "абдваолптрв" },
{ Name: "пролрлитс" },
{ Name: "юатроваро" },
{ Name: "юдвлоитвт" }
],
schema: {
parse: function(data) {
for (var i = 0; i < data.length; i++) {
data[i].index = i;
}
return data;
}
}
});
You will still need to use a custom comparer function though.
I solved this problem. I extended sorted datasource with index field and added comparer-function by index for field name:
http://dojo.telerik.com/UKimo
May be exists other solutions?