It seems that I just cannot get beyond this issue.This is an example of dataset:
[
{ type: "FOO", date: 1396952060722, count: 3 },
{ type: "BAR", date: 1396952060722, count: 2 },
{ type: "FOO", date: 1396952060722, count: 4 },
{ type: "BAZ", date: 1396952060722, count: 1 },
{ type: "FOO", date: 1396952060722, count: 3 },
{ type: "FOO", date: 1396952060722, count: 3 }
]
How can I make stacked column chart where X axis holds dates and columns are stacked by type with count fields summed (Y axis) if they fall under the same date.
I also need a way to regulate date granularity (year/month/day) and the data should distribute accordingly.
Is there a buildin way to do this or I'll have to make complex data transform?
I've found this googling a bit:
KendoUI - DataViz - Grouping and Aggregating a JSON datasource within the chart
I believe this solves your problem.
Related
I am working with my first Vega visualization with Kibana.
{
$schema: https://vega.github.io/schema/vega-lite/v2.json
title: Event counts from all indexes
data: {
url: {
%context%: true
%timefield%: last_submission
index: test_info
body: {
aggs: {
time_buckets: {
date_histogram: {
field: last_submission
interval: {%autointerval%: true}
extended_bounds: {
min: {%timefilter%: "min"}
max: {%timefilter%: "max"}
}
min_doc_count: 0
}
}
}
size: 0
}
}
format: {property: "aggregations.time_buckets.buckets"}
}
mark: line
encoding: {
x: {
field: key
type: temporal
axis: {title: false}
}
y: {
field: doc_count
type: quantitative
axis: {title: "Document count"}
}
}
}
I have two questions here.
1 - As the visualization is linked to the Kibana dashboard, the user can choice different time windows from the main dashboard. As you can see the labels have always the full format. I need to set dynamically the label based on the time windows.
That is, show only hours if the user choose day data, show days if the user choose weekly data and so on.
What I need to do?
2- I need to filter the events basing on a particular value of a field and use the time windows of the main dashboard. Is that possible? I have tried adding the query filter here in the Vega code, but if I also have the context and timefield set I have this error:
url.%context% and url.%timefield% must not be used when url.body.query is set
I'm quite new to Highcharts and the documentation is pretty huge for me to solve my little big problem.
I'm working on app for runners and want to display running pace on chart in minutes:seconds by kilometer or mile, in format like 05:30, which means pace 5 minutes and 30 seconds pre kilometer or mile.
My current (and not working) code is here:
Highcharts.chart('container', {
yAxis: {
type: 'datetime',
categories: ['03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30'],
labels: { format: '{value:%H:%M}'}
},
xAxis: {
categories: ['2018-01-01', '2018-05-01', '2018-10-01']
},
series: [{
data: ['05:00', '06:00' , '06:30'],
dataLabels: { format: '{value:%H:%M}'}
}],
legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle'},
plotOptions: {series: {label: {connectorAllowed: false},pointStart: 0}},
responsive: {rules: [{condition: {maxWidth: 1000},chartOptions: {legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'}}}]}
});
Currently the line in chart is not appearing. Can anybody repair my code to work correctly? Thanks.
Data needs to be numbers, not string values. If you look in console, you will most likely have Error 14 telling you this.
Changing your data to milliseconds (the format needed for highcharts to understand time) will work, like this:
data: [5 * 3600 * 1000, 06 * 3600 * 1000, 6.5 * 3600 * 1000],
Working example: https://jsfiddle.net/ewolden/55bk99ke/2/
If you want to fix the tooltip in the above example, you just need to format it the same way you format the yAxis labels. Like this:
tooltip: {
pointFormat: '{point.y:%H:%M}'
},
https://jsfiddle.net/ewolden/55bk99ke/5/
I want to plot a graph with c3.js library that displays a week interval in x axis as the picture below:
I have a JSON file that has several dates in it that I would like to use:
{
"foo": 1,
"date": "2016-09-20"
},
{
"foo": 2,
"date": "2016-09-21"
},
{
...
}
How do I do that?
I would have made this is a comment, however I cannot, so my recommendation would be to create this line graph using d3.js not c3.js. Here is a really good tutorial Setting up axes in d3.js that will generate the above chart and you can customise the x axis to what ever you want. weekly x axis
I discovered the answer for this question.
My JSON data has a field called "weekDetails", that contains a string with the week interval, like "Sep 22-28" for each register. With this information in mind, i have to call a function like below to load the json and specify the key value for X axis, that is "weekDetails"
chart.load({
json: myJson,
keys: {
x: 'weekDetails',
value: ['value1', 'value2', 'value3']
}
});
After that, you have to change the property x: to 'category' in c3.generate() function, like below:
axis: {
x: {
type: 'category'
}
}
And my json file would be like:
{
"foo": "foo",
"weekDetails": "Sep 1-7"
},
{
"foo": "foo",
"weekDetails": "Sep 8-15"
},
{
"foo": "foo",
"weekDetails": "Sep 16-23"
}...
I have a data source, which gets built from a JSON data string, containing a field called Fruit:
[{
... /other entries
fruit: [{
name: 1
}, {
name: 2
}, {
name: 3
}]
}]
I'm using this field in a KGrid, and would like to do a comma seperated list of links, from the names:
1, 2, 3
Currently, I'm hooking into the dataBound function, and build this up individually for the fruit field, is there an easier way to do this with, let's say, a template? I tried to look up information about something similar in the docs, but couldn't find anything pertaining to splitting arrays?
I wouldn't transform the data at the data source. That job is the responsibility of the UI component. Instead move your logic to the column template function of your grid. [ API reference ]
$('#grid').kendoGrid({
columns: [ {
field: 'fruit',
template: function(dataItem) {
var html = [];
for (var i = 0; i < dataItem.length; i++) {
html.push('' + dataItem[i].name + '');
}
return html.join(', ');
}
}],
dataSource: data
});
Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);