So my dateFormat is "yyyy-MM-dd HH:mm:ss" which I think causes my data points to be rounded to the day.
var chart = am4core.createFromConfig({
// Category axis
"xAxes": [{
"type": "DateAxis",
"renderer": {
"labels": {
"location": 0.0001
}
},
"dateFormats": {
"dateFormat": "yyyy-MM-dd HH:mm:ss"
}
}],
Image that shows the issue I have
Timestamp format: 2016-12-08 14:00:43
[1]: https://i.stack.imgur.com/yhhbn.png
You need to set the inputDateFormat to parse your date+timestamp format. By default it is set to parse daily data (yyyy-MM-dd), which is why your data is clustered together.
am4core.createFromConfig({
// ...
dateFormatter: {
inputDateFormat: 'yyyy-MM-dd HH:mm:ss',
// ...
},
// ...
Related
I am creating a heatmap from 201 data fields coming from an Influx-DB. Currently, the result looks like this:
Is it possible to hide the y-axis tick-labels in this visualization? In the JSON I set show to false:
"yAxis": {
"decimals": null,
"format": "short",
"logBase": 1,
"max": null,
"min": null,
"show": false,
"splitFactor": null
},
But this does not have the desired effect. If possible, I would like to switch off the grid lines too...
You can hide the Y-Axis Labels using the Alias by JSON field , writing a space into that field.
"targets": [
{
"alias": "",
default Result
"targets": [
{
"alias": " ",
result
How can I change the title of a loaded chart using javascript? The following doesn't work with external data
https://codepen.io/abdfahim/pen/zYOPvPx
var chart = am4core.createFromConfig({
"titles": [
{
"text": "ABCD",
"fontSize": 25,
"marginBottom": 10
}
],
"dataSource": {
"url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/sample_data_serial.json"
},
"xAxes": [
{
"type": "CategoryAxis",
"dataFields": {
"category": "year"
}
}
],
"yAxes": [
{
"type": "ValueAxis"
}
],
"series": [
{
"type": "ColumnSeries",
"name": "Cars",
"dataFields": {
"categoryX": "year",
"valueY": "cars"
}
}
]
}, "chartdiv", am4charts.XYChart);
function changeTitle()
{
chart.titles[0].text = "New Title";
}
AmCharts v4 uses lists for the majority of its array-like objects, so using subscripts will not work. It's recommended to use the accessor methods provided by the list to get at the object you want to change, such as getIndex:
chart.titles.getIndex(0).title = "New title"
Updated codepen
Just in case some one will hit my same issue, I found this solution working for me
chart.titles.getIndex(0).text = "new title";
this is particularly handy if you are going to refresh the chart each x seconds
I'm trying to remove Antarctica from this Vega-lite world map. Example in vega-editor here. Wondering how I can get hold of specific data w.r.t country or continent
Use filter transnform:
{
"name": "world", // <---- Your map
"url": "https://vega.github.io/editor/data/world-110m.json",
"format": {
"type": "topojson",
"feature": "countries"
},
"transform": [
{
"type": "filter",
"expr":"datum.id!=10" //<---- Antarctica has id 10
}
]
},
See on your example
I have this DateTime column in my grid:
column.Bound(c => c.PaymentMonth).ClientTemplate("#= PaymentMonthString #")
.Filterable(filterable => filterable
.Operators(op => op.ForDate(d => d.Clear().IsEqualTo("Equals")))
.Extra(false).UI("dateFilter"));
The PaymentMonthString is a read-only string property that returns the PaymentMonth in "MMMM yyyy" format.
Here's the dateFilter function for the custom filter UI:
<script>
function dateFilter(e) {
e.kendoDatePicker({
format: "MMMM yyyy",
depth: "year",
start: "year"
});
}
</script>
But, the filter never works, because when you select a date from the filter menu, the current day is used by default as the day part of the date. For example, if you choose March 2016 on 3/14/2016, the date will be 3/14/2016. But, when I filter on a "MMMM yyyy" column, I don't care about the day. All the dates in March 2016 should be included. How do I make that work?
I figured how to get this to work. In the change event of the date-picker in the filter UI, we can filter the grid's data-source for all the dates that are greater than or equal to the first day of the selected month and are less than or equal to the last they of that month. Here's the updated code for the dateFilter function:
<script>
function dateFilter(e) {
e.removeAttr("data-bind");
e.kendoDatePicker({
format: "MMMM yyyy",
depth: "year",
start: "year",
change: function () {
var ds = $("#grid").data().kendoGrid.dataSource;
var filter = {
"logic": "and",
"filters": [
{
"field": "PaymentMonth",
"operator": "gte",
"value": new Date(this.value().getFullYear(), this.value().getMonth(), 0)
},
{
"field": "PaymentMonth",
"operator": "lte",
"value": new Date(this.value().getFullYear(), this.value().getMonth() + 1, 0)
}
]
};
ds.filter(filter);
this.element.closest("form").data().kendoPopup.close();
}
});
}
</script>
I'm trying to filter some data for a chart with date-sensitive information
if I select a date range, with no date, that would return an empty array of results, the application doesn't crash, but as soon as there is data withing the range of the FilterDate and gte (hence, there are points made after the filterDate), then the application crashes on that line.
axisChange : function(){
//set date from period
var filterDate = new Date();
switch(this.get('selectedPeriod'))
{
case 'week':
filterDate.setMonth(filterDate.getMonth()-1);
break;
case 'day':
filterDate.setDate(filterDate.getDate()-7);
break;
case 'hour':
filterDate.setDate(filterDate.getDate()-1);
break;
}
/*var chart = jQuery("#chart").data("kendoChart");
chart.setOptions({ categoryAxis: { baseUnit: this.get('selectedCategory') }});*/
dataSource.filter({
"field": "CreatedAt",
"operator": "gt",
"value": filterDate
});
}
EDIT
ON closer inspection this is an issue with dataSource.filter, specific to the date, if I try to use another filter like:
dataSource.filter({
"field": "Note",
"operator": "contains",
"value": 'e'
});
everything is updated okay according to the filter.
FOR DETAILED CODE, PLEASE VISIT GITHUB REPO
https://github.com/Danelund/NeuroHelper/blob/master/NeuroHelper/scripts/app.js
My first thought about this problem is about date format. Place a breakpoint before dataSource.filter line and check what is the date format. Probably you should also convert this date object to string using some kind of date.toString() function.
dataSource.filter({
"field": "CreatedAt",
"operator": "gt",
"value": filterDate.toString()
});
Have you specified the type of the field that you want to filter (i.e. CreatedAt) to be of type "date" ?
How to do so is demonstrated here.
schema: {
model: {
id: "ProductID",
fields: {
CreatedAt: {
type: "date"
},