I am looking at the examples provided with Echarts and I can't find a way to have 2 time series with different time values on the same chart. The time series both represent measures taken during the same interval but they don't align.
Example:
TS1 = [
{time: 0:00, value: 1},
{time: 0:10: value: 2,
{time: 0:22, value: 3},
... ]
TS2 = [
{time: 0:05, value: 0.2},
{time: 0:11: value: 0.45,
{time: 0:15, value: 0.3},
{time: 0:21, value: 0.17},
... ]
Some suggested to merge the 2 streams and replace missing values with null which I'd rather not do if I don't have to...
TS1 = [
{time: 0:00, value: 1},
{time: 0:05, value: null},
{time: 0:10: value: 2},
{time: 0:11: value: null},
{time: 0:15, value: null},
{time: 0:21, value: null},
{time: 0:22, value: 3},
... ]
TS2 = [
{time: 0:00, value: null},
{time: 0:05, value: 0.2},
{time: 0:10: value: null},
{time: 0:11: value: 0.45,
{time: 0:15, value: 0.3},
{time: 0:21, value: 0.17},
{time: 0:22, value: null},
Help would be much appreciated thanks!
I had the same problem and my solution was to send no xAxis to Echarts, instead I sent just the 2 series and included the [x, y] pair inside series.data.
Example:
option = {
xAxis: {},
yAxis: {},
series: [
{
symbolSize: 5,
data: [
[0, 2],
[1, 3],
[2, 4]
],
type: 'line'
},
{
symbolSize: 5,
data: [
[0.1, 3],
[1.1, 3],
[1.9, 2]
],
type: 'line'
}
]
};
Related
Currently I am learning mongodb. Suppose I have one collection named post in mongodb which data is :
[{
id: 123,
uId: 111,
msg: 'test 1',
attachments: [
{name: 'attach1', url: 'https://example.com', isDeleted: false},
{name: 'attach2', url: 'https://example.com', isDeleted: true}
]
},
{
id: 456,
uId: 222,
msg: 'test 2',
attachments: [
{name: 'attach1', url: 'https://example.com', isDeleted: true}
]
},
{
id: 789,
uId: 333,
msg: 'test 3',
attachments: [
{name: 'attach1', url: 'https://example.com', isDeleted: false}
]
}]
Now i want the result of all post where attachments.isDeleted is false which look like :
[{
id: 123,
uId: 111,
msg: 'test 1',
attachments: [
{name: 'attach1', url: 'https://example.com', isDeleted: false}
]
},
{
id: 456,
uId: 222,
msg: 'test 2',
attachments: []
},
{
id: 789,
uId: 333,
msg: 'test 3',
attachments: [
{name: 'attach1', url: 'https://example.com', isDeleted: false}
]
}]
I tried this db.post.find({attachments: {$elemMatch: {isDeleted: false}}}) but it is not working. I have taken help from [https://stackoverflow.com/questions/62953855/how-get-query-for-array-of-objects-in-mongodb]
I think this is what you are looking for. It uses the Mongodb aggregation framework. You can take a look the documentation to see details. In brief, the $project stage allow us select fields to show or to hide, and it admits calculated fields. We calculated a new attachments field using $filter stage with a the given condition (isDeleted equals to false).
db.collection.aggregate([
{
"$project": {
_id: 1,
uId: 1,
msg: 1,
attachments: {
"$filter": {
"input": "$attachments",
"as": "attachment",
"cond": {
"$eq": [
"$$attachment.isDeleted",
false
]
}
}
}
}
}
])
You can try it in: https://mongoplayground.net/p/YDvpkbZIZ2H
Note that I changed id by _id, but it was only for style purpose.
Hope I helped.
I am trying to add a visual map according to the y axis in echarts.
Taking one of their example:
https://echarts.apache.org/examples/en/editor.html?c=area-pieces
The results looks as follow:
what I'm trying to achieve is:
Obviously here, I have just rotated the picture by 90 degree.
How can this be achieve in echarts directly (so not by saving the picture first)?
The simplest solution would be inverting the axis, data index, and visual map axis. See chart options below:
option = {
backgroundColor: '#fff',
xAxis: {
type: 'value',
boundaryGap: [0, '30%'],
position: 'top'
},
yAxis: {
type: 'category',
boundaryGap: false
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 1,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 180, 0, 0.5)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 180, 0, 0.5)'
}]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: 'green',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [
{yAxis: 1},
{yAxis: 3},
{yAxis: 5},
{yAxis: 7}
]
},
areaStyle: {},
data: [
[200, '2019-10-10'],
[400, '2019-10-11'],
[650, '2019-10-12'],
[500, '2019-10-13'],
[250, '2019-10-14'],
[300, '2019-10-15'],
[450, '2019-10-16'],
[300, '2019-10-17'],
[100, '2019-10-18']
]
}
]
};
Result:
See on Imgur
I have below 2 colection
**aggregate collection**
{
_id: '1',
test_name: 'test1',
status: "flaked"
test_ids: [1, 2]
}
{
_id: '2',
test_name: 'test1',
status: "Flaked"
test_ids: [3, 4]
}
**test collection**
{
_id: 1,
run_id: 1,
test_name: 'test1',
status: "fail"
pipeline: "A"
}
{
_id: 2,
run_id: 2
test_name: 'test1',
status: "pass",
pipeline: "A"
}
{
_id: 3,
run_id: 3
test_name: 'test1',
status: "Infra",
pipeline: "B"
}
{
_id: 4,
run_id: 4
status: "pass",
test_name: 'test1',
pipeline: "B"
}
I am trying to % of how many times the test flaked like No of Flakes/ no of runs. Above should give me (1/4).
Test is considered flake only when aggregate result is flaked and one of test is failed. Can this be built with one query.
I have this code:
Ext.define('mObject', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'x', type: 'int', convert: null},
{name: 'y', type: 'int', convert: null}
]
});
var obj = Ext.create('mObject', {
text : 'test test',
x : 100,
y : 24
});
How can I add more records? and is there any way to go to a specific record by a field value, I mean if I have 200 records and I ant to navigate to a record with name='yaya' do I have to go through all records and search for 'yaya' or there is alternative way?
Thank you all,
Ext.define('mObject', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'x', type: 'int', convert: null},
{name: 'y', type: 'int', convert: null}
]}
});
var mObject=Ext.create('Ext.data.Store', {
model: 'mObject',
data : []
});
mObject.add({text: 'sample1', x: 34, y:544});
mObject.add({text: 'sample2', x: 243, y:76});
mObject.add({text: 'sample3', x: 54, y:123});
mObject.add({text: 'sample4', x: 67, y:43});
mObject.add({text: 'sample5', x: 12, y:655});
var indx=mObject.find('text','sample4');
alert( mObject.getAt(indx).get('text'));
I am using Highcharts for generating a two column bar graph. Means for each day I am showing the number of downloads and number of signups. Now I need to have a drilldown, which shows up the hourly data. The Highcharts docs is showing an example for Signle column by specifying the y value. But as I am showing stached bar, I have two y values for the same date. The code I am using is as follows :
series: [{
name : 'Signups,
color : '#0066FF',
data : <?=$series_1?>, //data in JSON format from PHP
drilldown: true
}, {
name : 'Downloads',
color : '#E81531',
data : <?=$series_2?>, //data in JSON format from PHP
drilldown: true
}],
Example for you for drilldown with two series, with stacking: 'normal': http://jsfiddle.net/6zYmJ/10/
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}, {
name: 'Things2',
colorByPoint: true,
data: [{
name: 'Animals2',
y: 5,
drilldown: 'animals2'
}, {
name: 'Fruits2',
y: 2,
drilldown: 'fruits2'
}, {
name: 'Cars2',
y: 4,
drilldown: 'cars2'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
},{
id: 'animals2',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits2',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars2',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
Adding to Pawel Response-
Just replace in plotOptions with this value
column: {
pointPadding: 0.2,
borderWidth: 0
}
,