AmCharts serial multiple data sets - amcharts

Taking a look at different examples on the documentation, I found that the only way to include multiple graphs (or lines) on a serial chart would be to do so by placing the data in one array as such:
[{
category: 1,
value1: .8,
value2: .64,
},
{
category: 2,
value1: .75,
value2: -.4,
}];
However, this is rather tedious if you have multiple data sets you are trying to display at once; is there an alternative way to do this, where you would pass multiple arrays at once (this is what I figured an implementation would look like, but it is not the case):
[
// First set of data
{ category: 0, value: .5},
{ category: 1, value: .5},
{ category: 2, value: .5},
{ category: 3, value: .5},
{ category: 4, value: .3},
{ category: 5, value: 1}
],
// Second set of data
[
{ category: 0, value: .5 },
{ category: 1, value: .3 },
{ category: 2, value: .25 },
{ category: 3, value: .6 },
{ category: 4, value: .79 },
{ category: 5, value: .81 }
]],
Any ideas on how this may be done? Or would I need to do switch to a different type of chart?

This isn't possible in the regular AmCharts JavaScript Charts library. The only supported format is a single array of objects with the values consolidated by category as you've noticed. You'll have to preprocess your data beforehand.
The AmCharts Stock Chart library supports separate arrays of data in the dataSets array, however it only supports date-based data.
AmCharts.makeChart("chartdiv", {
"type": "stock",
"dataSets": [{
// other properties omitted
"dataProvider": [{
category: "2017-08-01,
value: 3
}, {
category: "2017-08-02,
value: 2
}, {
category: "2017-08-03,
value: 1
}, // ...
]
}, {
// other properties omitted
"dataProvider": [{
category: "2017-08-01,
value: 10
}, {
category: "2017-08-02,
value: 9
}, {
category: "2017-08-03,
value: 5
}, // ...
]
},
// ...
]
// ...
});
You can see this in action in the any of the stock chart demos.

Related

elasticsearch 5: returning same document multiple times if multiple array items of one document fit condition

We are using elastic search 5 (yes I know it is EOL but it is what it is)
Elastic newbie here with a rather complicated task:
Let's imagine we have an event index filled with multiple event documents. Those event documents might have n speakers attached in a speakers object array. A speaker has a gender attribute.
How can I achieve the following query?
"return event for each speaker whose gender is x "
returning query result:
{
page: 1,
pageSize: 20,
total: 3
items: [
{
id: 1,
speakers: [
{
name: 'Sascha',
gender: 'x'
}
]
},
{
id: 1,
speakers: [
{
name: 'Leo',
gender: 'x'
}
]
},
{
id: 2,
speakers: [
{
name: 'Rue',
gender: 'x'
}
]
},
]
}
event index filled with three event documents
event 1
{
id: 1,
speakers: [
{
name: 'Sascha',
gender: 'x'
},
{
name: 'Leo',
gender: 'x'
},
]
}
event 2
{
id: 2,
speakers: [
{
name: 'Thomas',
gender: 'm'
},
{
name: 'Rue',
gender: 'x'
},
]
}
event 3
{
id: 2,
speakers: [
{
name: 'Nicole',
gender: 'f'
}
]
}
I didn't even start to code or write a query because I am not sure if elastic is built to give me a result like the one I want to achieve.
I don't even know how to articulate the type of query I am trying to achieve :/
Or do I have to create a new index which combines event and speaker index in a way I can work with?

Highcharts - timeseries chart with y-axis values need to be group with text labels

Need to show y-axis values(as text labels) and it should be grouped as mentioned below and x-axis should be date-time.
Poor - > 20
Bad -value 11 to 20
Good - value 1 to 10
so there will be 3 ticks/labels for y-axis - good, bad and poor
http://jsfiddle.net/Wk7sF/
$('#container').highcharts({
chart: {
type: 'line'
},
xAxis: {
type: "datetime"
},
series: [
{
data: [[1611319680000,4],[1611319860000,5],[1611320040000,11],[1611320220000,14],[1611320400000,1],[1611320580000,22],[1611320760000,19],[1611320940000,20],[1611321120000,9],[1611321300000,9]]
},
]
});
Please if anyone can guide me for this problem
You can map your y-data to values: 3 - 'Poor', 2 - 'Bad', 1 - 'Good' and use formatter function for labels to render a specific text. Example:
const data = [
[1611319680000, 4],
...
];
const categories = ['', 'Good', 'Bad', 'Poor'];
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,
max: 3,
labels: {
formatter: function() {
return categories[this.pos];
}
}
},
series: [{
data: data.map(el => el[1] > 20 ? 3 : (el[1] > 10 ? 2 : 1))
}]
});
Live demo: http://jsfiddle.net/BlackLabel/Lj4o2ent/
API Reference: https://api.highcharts.com/highcharts/yAxis.labels

ChartJS: How to center monthly bars against a daily line chart?

I'm trying to display total monthly sales and daily stock level. This way you could easily see that you didn't have any sales a particular month because you had low stock. Monthly sales is a bar chart that should be in the center of each month (in between the ticks).
In order to get it close to the middle my data is using the 15th of each month as the date to center it. I would want to know if there is a better way to achieve this?
JSFiddle to play around with: https://jsfiddle.net/8Lydhpqc/3/
const dailyStock = [
{ x: "2017-08-02", y: 1 },
{ x: "2017-08-25", y: 3 },
{ x: "2017-09-10", y: 7 },
{ x: "2017-09-28", y: 0 },
{ x: "2017-10-02", y: 3 },
{ x: "2017-10-24", y: 2 },
{ x: "2017-11-01", y: 1 },
{ x: "2017-11-30", y: 0 },
];
//using the 15th of each month to center it
const monthlyTotal = [
{ x: "2017-08-15", y: 1 },
{ x: "2017-09-15", y: 10 },
{ x: "2017-10-15", y: 5 },
{ x: "2017-11-15", y: 5 },
];
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
datasets: [
{
label: "sales",
data: data,
backgroundColor: "green",
borderColor: "black",
borderWidth: 1,
order: 2,
},
{
label: "stock",
type: "line",
data: dailyStock,
backgroundColor: "orange",
borderColor: "orange",
fill: false,
order: 1,
},
],
},
options: {
scales: {
xAxes: [
{
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM",
},
},
distribution: "linear",
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
Welcome to Stackoverflow!
It seems that there is a way better than using the 15th of the month.
You need to add another axis for the bar that is a category type axis. Also its pretty critical that you have "offset: true" on that axis as well. Otherwise it will not center.
In the code below I named that category "bar" and the existing one "line"
I also created a fiddle: https://jsfiddle.net/jyf8ax3e/
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
datasets: [
{
barPercentage: .7,
xAxisID: "bar",
label: "sales",
data: monthlyTotal,
backgroundColor: "green",
borderColor: "black",
borderWidth: 1,
width: 55,
order: 2,
},
{
label: "stock",
type: "line",
data: dailyStock,
backgroundColor: "orange",
borderColor: "orange",
fill: false,
order: 1,
},
],
},
options: {
scales: {
xAxes: [
{
id: "line",
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM",
},
},
distribution: "linear",
},
{
id: "bar",
offset: true,
type: "category",
distribution: "series",
}
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});

nativescript-couchbase-plugin querying

I'm trying to use nativescript-couchbase-plugin.
Here is my code:
whereArray.push({ property: "type_id", comparison: "equalTo", value: typeId });
return itemsDb.query({
select: [],
where: whereArray,
order: [{property: "rating", direction: "desc"}],
limit: this.PAGE_SIZE,
offset: page * this.PAGE_SIZE
});
Everything works fine: condition in where clause, ordering, limit and offset.
But I want to add something new to my condition and I'm trying to do this:
whereArray.push({ property: "title", comparison: "like", value: "some name"});
or
whereArray.push({ property: "filters", comparison: "in", value: [1,2,3]});
And these cases don't work. Neither of them. The only one that works is the first one with type_id
So the question is - how to use where array to query corresponding data?
Data Sample:
{
"type_id": 2,
"title": "some name",
"regionId": 372,
"uid": 16177,
"filters": [
1,
2,
3
]
},
P.S. There is an issue inside original repository. But it has no activity at all.
I must agree the plugin documentation could be better. But if you go through the TypeScript declaration, you will find the issue with your code.
When you are adding multiple where conditions, you must include a logical operator.
import {
Couchbase,
QueryLogicalOperator,
QueryComparisonOperator
} from "nativescript-couchbase-plugin";
const database = new Couchbase("my-database");
// Insert docs for testing
const documentId = database.createDocument({
type_id: 2,
title: "some name",
regionId: 372,
uid: 16177,
filters: [1, 2, 3]
});
console.log(documentId);
// Query
const results = database.query({
select: [],
where: [
{
property: "type_id",
comparison: "equalTo",
value: 2,
logical: QueryLogicalOperator.AND
},
{
property: "filters",
comparison: "in",
value: [1, 2, 3]
}
],
order: [{ property: "rating", direction: "desc" }],
limit: 10
});
console.log(results);

Kendo UI Radar Chart

Hi I am trying to make a Kendo UI radar chart. I want to know the correct format in order to display the data.
{
new {year = year, thisyear = new {satisfaction = pq1, organisation=pq2, expecations=pq3, teaching=pq3, consistent=pq4} } //cpe
};
Response.Cache.SetCacheability(HttpCacheability.ServerAndPrivate);
Response.Cache.SetMaxAge(new TimeSpan(24 * 31, 0, 0));
return Json(radata, JsonRequestBehavior.AllowGet);ยจ
Is this correct?
Your question is a little short on details, but if I understand correctly you could organize your data like this:
var data = [
{
"Criteria": "satisfaction ",
"Y2015": 5,
"Y2014": 8
},
{
"Criteria": "organisation",
"Y2015": 8,
"Y2014": 7
},
{
"Criteria": "expecations",
"Y2015": 6,
"Y2014": 9
},
{
"Criteria": "teaching",
"Y2015": 7,
"Y2014": 7
},
{
"Criteria": "consistent",
"Y2015": 5,
"Y2014": 9
},
]
$("#chart").kendoChart({
title: {
text: "Survey"
},
dataSource: data,
seriesDefaults: {
type: "radarLine",
style: "smooth"
},
series: [{
name: "2015",
field: "Y2015"
}, {
name: "2014",
field: "Y2014"
}],
categoryAxis: {
field: "Criteria"
},
valueAxis: {
max: 10
},
theme: "Fiori"
});
DEMO

Resources