How to display correct dates on the X-Axis - kendo-dataviz

tl;dr: when I set the xAxis min and max to, say, 2013-01-01 14:30:00 and 2013-01-01 15:45, I need to see these times on the xAxis and not 14:00 and 15:00, or 01. 01. 2013 and 01. 01. 2013, or whatever automatically generated timestamps that are wrong, like here
I have a question here regarding the Kendo Dataviz Chart. I'm trying to display several scatter line graphs in one chart that depict how some technical indicators change in time. For that I need to display correct date and time to the scale of minuted. And I don't seem to be able to reach this seemingly simple goal, no matter how much I search or try.
Research done so far:
Answer from Telerik did little to help.
All examples and demos use day-granularity at maximum, so no help there.
Here is some example code, that I didn't manage to get advantage of: jsbin.com/AtusAGO/1/edit
The code:
Please try commenting and uncommenting lines 23 to 27 in the JSFiddle to see what happens (mostly nothing, really, and never what I'd like to achieve).
(function () {
$("#chart").kendoChart({
legend: {
visible: true,
position: "bottom"
},
seriesDefaults: {
type: "scatterLine",
markers: {
size: 0
}
},
xAxis: {
"type": "date",
labels: {
format: "hh:mm d. M. yyyy"
},
title: {
text: "Time"
},
min: "2012-02-05 00:35:00",
max: "2012-02-05 01:40:00",
baseUnitStep: "auto",
/*baseUnit: "fit",
maxDateGroups: 10,*/
autoBaseUnitSteps: {
minutes: [5]
}
},
series: [{
"name": "temp",
"yAxis": "temperature",
"data": [
[
"2012-02-05T00:35:00",
3],
[
"2012-02-05T00:55:00",
0],
[
"2012-02-05T01:00:00",
1],
[
"2012-02-05T01:05:00",
2],
[
"2012-02-05T01:10:00",
3],
[
"2012-02-05T01:15:00",
4],
[
"2012-02-05T01:20:00",
5],
[
"2012-02-05T01:40:00",
3]
]
}, {
"name": "hum",
"yAxis": "humidity",
"data": [
[
"2012-02-05T00:00:00",
80],
[
"2012-02-05T00:55:00",
100],
[
"2012-02-05T01:00:00",
10],
[
"2012-02-05T01:05:00",
20],
[
"2012-02-05T01:10:00",
50],
[
"2012-02-05T01:15:00",
40],
[
"2012-02-05T01:20:00",
50],
[
"2012-02-05T01:51:00",
30]
]
}],
yAxes: [{
"name": "humidity",
"title": {
"text": "Humidity [%]"
}
}, {
"name": "temperature",
"title": {
"text": "Temperature [\u00b0C]"
}
}]
});
}());

You can use the following data format:
series:{
data: [
{
date: new Date(2013,0,1,0,0,0),
value: 23
},
{
date: new Date(2013,0,2,0,0,0),
value: 24
}
],
field: "value",
categoryField: "date"
}
And in the labels, you can set it as
template: "#:kendo.toString(value,'dd/MM/yyyy hh:mm:ss')"

Related

How filter features by status

I want to show in my map in a cluster layer filtering by if is opened or not. How can do it? Should I create two layers?
One with filter: filter["has", "opened"] and other with filter: filter["!", ["has", "opened"]]?
export const clusterLayerOpened = {
id: "clusters",
type: "circle",
source: "earthquakes",
filter: ["has", "opened"],
paint: {
"circle-color": [ "step", ["get", "opened"], "#51bbd6",100,"#f1f075",750,"#f28cb1", ],
"circle-radius": ["step", ["get", "opened"], 20, 100, 30, 750, 40],
},
};
export const clusterLayerNoOpened = {
id: "clusters",
type: "circle",
source: "earthquakes",
filter: ["!", ["has", "opened"]],
paint: {
"circle-color": [ "step", ["get", "opened"], "#51bbd6",100,"#f1f075",750,"#f28cb1", ],
"circle-radius": ["step", ["get", "opened"], 20, 100, 30, 750, 40],
},
};
This is my geojson:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": "ak16994521",
"mag": 2.3,
"time": 1507425650893,
"felt": null,
"tsunami": 0,
"opened": true
},
"geometry": {
"type": "Point",
"coordinates": [-151.5129, 63.1016, 0.0]
}
},
{
"type": "Feature",
"properties": {
"id": "ak16994519",
"mag": 1.7,
"time": 1507425289659,
"felt": null,
"tsunami": 0,
"opened": false
},
"geometry": {
"type": "Point",
"coordinates": [-150.4048, 63.1224, 105.5]
}
}
]
}
It's not necessary to create two separate layers to filter by whether the a point has been opened or not. Here is some code showing how to add a layer which displays all points with the property "opened": true, and hides all points with "opened": false:
map.addLayer({
'id': 'opened',
'type': 'circle',
'source': 'points',
'paint': {
'circle-radius': 10,
'circle-opacity': ["match", ["to-string", ["get", "opened"]], 'true', 1 , 'false', 0, 0]
}
});
To instead show all points with the property "opened": false, you can switch the 'circle-opacity' expression to read:
["match", ["to-string", ["get", "opened"]], 'true', 0 , 'false', 1, 0]
This code makes use of a few Mapbox expressions. I've linked the documentation to each relevant expression here: match, to-string, and get.
Here is a JSFiddle where two layers are added to the map: https://jsfiddle.net/hpkzrm4n/. The points with "opened": true are shown in red and the points with "opened": false are shown in blue. Note that you will need to add your own Mapbox access token where indicated in order to view the results. Here is a screenshot, as a preview:

How to set Mapbox heatmap color by data value?

I would like to display a heatmap of Bluetooth scans such that scans with strong signals appear green and scans with weak signal strength appear red. I have tried playing with all of the Mapbox heatmap properties (weight, intensity, radius, color, opacity) and have not been able to achieve this effect. Is there any advice on how to do this?
GeoJSON data format ("rssi" is the signal strength)
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-79.92068447220412,
43.259061411756505
]
},
"properties": {
"name": "heatmap",
"rssi": "55"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-79.92068446786702,
43.25906141184957
]
},
"properties": {
"name": "heatmap",
"rssi": "59"
}
},
...
]
}
Heatmap layer so far
map.addLayer({
id: 'heatmap_heatmap_layer_id',
type: 'heatmap',
source: 'heatmap_source_id',
maxzoom: 24,
paint: {
'heatmap-weight': {
property: 'rssi',
type: 'exponential',
stops: [
[0, 1],
[120, 10]
]
},
'heatmap-intensity': {
stops: [
[currentZoom, 1],
[24, 2]
]
},
'heatmap-color': [
'interpolate',
['linear'],
['heatmap-density'],
0, 'rgba(240,29,29,0)',
0.2, 'rgba(198,0,12,1)',
0.4, 'rgba(32,43,222,1)',
0.7, 'rgba(1,1,1,1)',
1.0, 'rgba(200,144,153,1)'
],
'heatmap-radius': {
stops: [
[currentZoom, 20],
[middleZoom, 30]
]
},
'heatmap-opacity': {
default: 1,
stops: [
[currentZoom, 1],
[24, 1]
]
},
}
});
This one's a bit tricky, as heatmaps automatically blend and add points in close proximity with one another. This means that a single point of strong signal will appear the same color, as many points of weak signal close together.
You may be better off visualizing the points as discrete circles, colored by RSSI.

Scriptcase line chart Y- axis scale issue

Anyone knows how to adjust the y axis in a line chart in scriptcase?
The image below shows the problem:
Instead of starting at 0 and finishing at 1k, I would like Scriptcase to auto adjust the Y axis scale - perhaps going from 840 to 1k.
I have looked for this option but can not find any answer to it.
thanks,
You can explicitly set y-axis min and max value using yAxisMinValue and yAxisMaxValue attribute at the chart object level for example :
"chart": {
"yAxisMinValue":"840",
"yAxisMaxValue":"1000"
}
For details please check this snippet -
FusionCharts.ready(function() {
var visitChart = new FusionCharts({
type: 'line',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"yAxisMinValue":"840",
"yAxisMaxValue":"1000"
},
"data": [{
"label": "Mon",
"value": "899"
},
{
"label": "Tue",
"value": "952"
},
{
"label": "Wed",
"value": "963"
},
{
"label": "Thu",
"value": "874"
},
{
"label": "Fri",
"value": "862"
},
{
"label": "Sat",
"value": "906"
},
{
"label": "Sun",
"value": "999"
}
]
}
});
visitChart.render();
});

Google Column Graph Single Date and value showing as multiple adjucent bars

Data Table structure is as follows
{
"cols": [
{
"id": "",
"label": "Date",
"pattern": "",
"type": "date"
},
{
"id": "Col1",
"label": "Col1 Label",
"pattern": "",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "Date(2017, 5, 27)"
},
{
"v": 213
}
]
}
]
}
H Axis options
hAxis: {
slantedText: true, slantedTextAngle: 35,
titleTextStyle: {bold: false, fontSize: 11, color: '#610B38'},
textStyle: {
bold: true, fontSize: 8, color: '#4d4d4d'
},
maxAlternation: 1,
showTextEvery: 1,
viewWindowMode : 'maximized',
gridlines:
{
count: 31
},
bar: { groupWidth: 40 }
}
But in the column graph it is displaying multiple adjacent bars looks like time instead of a single date
This issue happening only for single date.
I want to display the column chart as single bar instead of big rectangle.
Any feedback appreciated
recommend setting the min / max values on the viewWindow explicitly
keeping within a day should prevent "column overflow"
viewWindow: {
min: new Date(dateRange.min.getTime() - oneDay),
max: new Date(dateRange.max.getTime() + oneDay)
}
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
$(window).on('resize', drawChart);
},
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable({
"cols": [
{
"id": "",
"label": "Date",
"pattern": "",
"type": "date"
},
{
"id": "Col1",
"label": "Col1 Label",
"pattern": "",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "Date(2017, 5, 27)"
},
{
"v": 213
}
]
}
]
});
var oneDay = (1000 * 60 * 60 * 24);
var dateRange = data.getColumnRange(0);
var chart = new google.visualization.ColumnChart($('.chart')[0]);
chart.draw(data, {
hAxis: {
slantedText: true,
slantedTextAngle: 35,
textStyle: {
bold: true,
fontSize: 8,
color: '#4d4d4d'
},
viewWindow: {
min: new Date(dateRange.min.getTime() - oneDay),
max: new Date(dateRange.max.getTime() + oneDay)
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart"></div>
not much you can do for the actual size of the column
the release notes from February, 23 2016 mention...
Added options to specify bar.width, bar.gap, bar.group.width (was bar.groupWidth) and bar.group.gap.
but none have ever worked for me when only one row of data...

I am building a bubble chart in AM-Charts but facing issues in plotting String values on X-axis

I am new to AM-charts, I am building a bubble chart in AM-charts http://www.amcharts.com/demos/bubble-chart/.
I want to plot following data in bubble chart where name should be appear on X-axis and job should be on Y-axis.
[{"name":"abc","jobs":15, "value":63500},{{"name":"pqr","jobs":15, "value":33000}}]
My bubble chart configuration is as follows-
{
"type": "xy",
"theme": "light",
"titles": [
{
"text": title,
"size": 16
}
],
"balloon": {
"fixedPosition": true,
},
"dataProvider": [{"name":"abc","job":15, "value":63500},{{"name":"pqr","job":15, "value":33000}}],
"valueAxes": [
{
"position": "bottom",
"axisAlpha": 0
},
{
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left"
}
],
"startDuration": 1.5,
"graphs": [
{
"balloonText": "Name: <b>[[name]]</b> Jobs: <b>[[job]]</b><br>value: <b>[[value]]</b>",
"bullet": "round",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "name",
"yField": "job",
"maxBulletSize": 50,
"minBulletSize": 20
}
],
"marginLeft": 46,
"marginBottom": 35,
"export": {
"enabled": true
},
"chartScrollbar": {
"offset": 15,
"scrollbarHeight": 5
}
}
I am not able to see bubble chart with this configuration. No error or warning in console.
Can anyone please suggest me some solution to fix this issue?
Thanks in advance.