nvd3 multibarchart xAxis sorted by key - sorting

I can't set a NVD3 multibarchart able to sort the bars by dates in the xAxis.
I'm aware the input data must be grouped by key before displaying it into a multibarchart.
Here a jsfiddle illustrating what I'm talking about: http://jsfiddle.net/fontanon/z4aZ4/54/
As you can see in the data variable, I've added three groups of bars (key1, key2 and key3). Each group has the x values sorted ascendently. The first bar of key2 should be the first (as for having the minimum x value), then the first bar of key1 followed by the second bar of key2, etc. But this is not how the bars are being displayed.
What is exactly happening?
Below the data.
var data = [
{
"key": "Key1",
"values": [
{
"x": 2393337532000,
"y": 1401431
},
{
"x": 4394337660000,
"y": 26188
},
{
"x": 7395510769000,
"y": 865575
},
]
},
{
"key": "Key2",
"values": [
{
"x": 1396337532000,
"y": 1401431
},
{
"x": 3397337660000,
"y": 26188
},
{
"x": 6398510769000,
"y": 865575
}
]
},
{
"key": "Key3",
"values": [
{
"x": 5399337532000,
"y": 1401431
},
{
"x": 8400337660000,
"y": 26188
},
{
"x": 9401510769000,
"y": 865575
}
]
}
]

Your data should be look like this
var data = [
{
"key": "Key1",
"values": [
{
"x": 7393337532000,
"y": 1401431
},
{
"x": 8394337660000,
"y": 26188
},
{
"x": 3398510769000,
"y": 865575
}
]
},
{
"key": "Key2",
"values": [
{
"x": 7393337532000,
"y": 1401431
},
{
"x": 8394337660000,
"y": 26188
},
{
"x": 3398510769000,
"y": 865575
}
]
},
{
"key": "Key3",
"values": [
{
"x": 7393337532000,
"y": 1401431
},
{
"x": 8394337660000,
"y": 26188
},
{
"x": 3398510769000,
"y": 865575
}
]
}
]

Related

Vega Lite / Kibana - Area Mark shows no values

I have a pretty straightforward problem but I'm totally new to Vega/Vega-Lite and the tutorials examples don't help me much to resolve my issue.
When I try to display my floating point values only Mark: Point/Bar seems to work. Everything else that demands a connection between neighboring points seems to fail, like "Area" or "Line".
What have I missed in order to connect my values to a Area-Chart?
Aggregation? Layer? Is the timestamp values calculation wrong?
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"url": {
"%context%": true,
"%timefield%": "#timestamp",
"index": "default-*",
"body": {"size": 10000, "_source": ["#timestamp", "numericData"]}
},
"format": {"property": "hits.hits"}
},
"transform": [
{"calculate": "toDate(datum._source['#timestamp'])", "as": "time"}
],
"vconcat": [
{
"width": 1200,
"mark": {"type": "area", "line": true, "point": true},
"encoding": {
"x": {
"field": "time",
"scale": {"domain": {"selection": "brush"}},
"type": "temporal",
"axis": {"title": ""}
},
"y": {
"field": "_source.numericData",
"type": "quantitative",
"scale": {"domain": [0, 10]}
}
}
},
{
"width": 1200,
"height": 60,
"mark": {"type": "area", "line": true, "point": true}, // <-- only points are rendered :(
"selection": {"brush": {"type": "interval", "encodings": ["x"]}},
"encoding": {
"x": {"field": "time", "type": "temporal"},
"y": {
"field": "_source.numericData",
"type": "quantitative",
"formatType": "String",
"axis": {"tickCount": 3, "grid": false}
}
}
}
]
}
Points are visible - the values are there but the Area doesn't get rendered because, I suspect, I need to tell Vega Lite to interpret the numerical float values on Y to be interpreted over the whole timefield.
You didn't share your data, so I can only guess why this is happening. But one reason you might see this result is if there are null values interspersed in your data. Here is a simple example of this (open in editor):
{
"data": {
"values": [
{"x": 1, "y": 1},
{"x": 2, "y": null},
{"x": 3, "y": 2},
{"x": 4, "y": null},
{"x": 5, "y": 3},
{"x": 6, "y": null}
]
},
"mark": {"type": "area", "point": true, "line": true},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
}
Unlike ponts, lines and areas are defined not via single values, but via adjacent values. Because there are no pairs of adjacent non-null values, there is no place where a line or area will be drawn.
If this is the case, you can remove the null points with an appropriate filter transform (open in editor):
{
"data": {
"values": [
{"x": 1, "y": 1},
{"x": 2, "y": null},
{"x": 3, "y": 2},
{"x": 4, "y": null},
{"x": 5, "y": 3},
{"x": 6, "y": null}
]
},
"transform": [{"filter": "isValid(datum.y)"}],
"mark": {"type": "area", "point": true, "line": true},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
}

Vega-lite heat map change the color, location, test

Good time of day!
formerly = Vega-lite heat map text properties
1)How to build a new X2-axis in this scheme, which takes into account the original X-axis
{"window": [{"op": "count", "field": "x", "as": "x2"}], "groupby": ["y"]}
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json",
"config": {"view": {"height": 300, "width": 400}},
"data": {
"values": [
{"x": "X1", "y": "Y1", "z": 1,"Name":"Name3"}
{"x": "X3", "y": "Y1", "z": 9,"Name":"Name2"}
{"x": "X3", "y": "Y1", "z": 25,"Name":"Name1"}
{"x": "X0", "y": "Y2", "z": 1,"Name":"Name1"}
{"x": "X1", "y": "Y2", "z": 2,"Name":"Name1"}
{"x": "X4", "y": "Y2", "z": 20,"Name":"Name1"}
{"x": "X5", "y": "Y2", "z": 40,"Name":"Name1"}
]
},
"transform": [
{"window": [{"op": "count", "field": "x", "as": "x2"}], "groupby": ["y"]}
{"window": [{"op": "count", "field": "Name", "as": "x7"}], "groupby": ["x","y"]}
{
"calculate": "'https://google.com/search?q='+datum.y",
"as": "web"
}
],
"encoding": {
"x": {"field": "x2", "type": "ordinal", "title": "X"},
"y": {"field": "y", "type": "ordinal", "title": "Y"}
},
"layer": [
{
"mark": "rect",
"encoding": {
"color": {
"field": "z",
"scale": {"scheme": "redyellowgreen"},
"type": "quantitative"
}
"tooltip": [
{"field": "x", "type": "ordinal", title: "text"}
{"field": "y", "type": "ordinal", title: "text1"}
{"field": "z", "type": "ordinal", title: "text2"}
]
"href": {"field": "web"}
}
},
{
"mark": {"type": "text", "fontSize": 10, "dy": -20},
"encoding": {
"text": {"field": "x"},
"color": {"value": "black"}
}
},
{
"mark": {"type": "text", "fontSize": 20, "dy": 40},
"encoding": {
"text": {"field": "x7"},
"color": {"value": "black"}
}
},
{
"mark": {"type": "text", "fontSize": 20, "dy": 20},
"encoding": {
"text": {"field": "z", "type": "quantitative"},
"color": {"value": "black"}
}
}
]
}
2)how to make clear color boundaries? like here:
I use it:
"color": {"aggregate": "average","field": "z", "type": "quantitative","format": ".0f", "scale": { "domain": [0,20,25,35],"range": ["#6ce165", "#E0ED15", "#ED9715", "#CE4334"]}}
3) how to add text here:
{
"mark": {"type": "text", "fontSize": 20, "dy": 40},
"encoding": {
"text": {"field": "x7"},+ Text????
"color": {"value": "black"}
}
},
Please only ask one question per post. I do not understand what you are asking in the first or third part of your question, so I will answer the second.
You can make the color scale discrete using a binned encoding:
"encoding": {
"color": {
"field": "z",
"scale": {"scheme": "redyellowgreen"},
"type": "ordinal",
"bin": true
}
}
Here is the result (Vega Editor):

Can the Google Vision API be directed to detect single characters only, or non-English strings?

For example, I'd like to detect a coded string like "A5b1x" written in handwriting. So I'd either split it up manually so that I have an image of each character, or try to have Vision recognize it immediately. Neither is working for now, as I'm not sure how to specify that it's not a language (or specify that it's singular characters). This is what I typed in a Google compute instance:
gcloud ml vision detect-document "weblink to image"
No result for image of "g":
g
No result for image of "e": e
Result for image of "fxb3":fxb3
{
"responses": [
{
"fullTextAnnotation": {
"pages": [
{
"blocks": [
{
"blockType": "TEXT",
"boundingBox": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 2403,
"y": 691
}
]
},
"confidence": 0.56,
"paragraphs": [
{
"boundingBox": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 2403,
"y": 691
}
]
},
"confidence": 0.56,
"words": [
{
"boundingBox": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 2403,
"y": 691
}
]
},
"confidence": 0.56,
"symbols": [
{
"boundingBox": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 2135,
"y": 1304
},
{
"x": 2105,
"y": 706
},
{
"x": 2403,
"y": 691
}
]
},
"confidence": 0.4,
"text": "\u0967"
},
{
"boundingBox": {
"vertices": [
{
"x": 2063,
"y": 1308
},
{
"x": 1788,
"y": 1322
},
{
"x": 1758,
"y": 723
},
{
"x": 2033,
"y": 710
}
]
},
"confidence": 0.62,
"text": "\u0967"
},
{
"boundingBox": {
"vertices": [
{
"x": 1750,
"y": 1323
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 1720,
"y": 725
}
]
},
"confidence": 0.67,
"property": {
"detectedBreak": {
"type": "LINE_BREAK"
}
},
"text": "X"
}
]
}
]
}
]
}
],
"height": 2112,
"width": 4608
}
],
"text": "\u0967\u0967X\n"
},
"textAnnotations": [
{
"boundingPoly": {
"vertices": [
{
"x": 1467,
"y": 690
},
{
"x": 2432,
"y": 690
},
{
"x": 2432,
"y": 1335
},
{
"x": 1467,
"y": 1335
}
]
},
"description": "\u0967\u0967X\n",
"locale": "und"
},
{
"boundingPoly": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 2403,
"y": 691
}
]
},
"description": "\u0967\u0967X"
}
]
}
]
}
The Google Cloud Vision API is not able to recognise single characters at this point. There is a feature request submitted with regard to character recognition here. Please star it so that you could receive updates about this feature request and do not hesitate to add additional comments to provide details of the desired implementation.
With respect to your question about recognising "coded" strings, the Vision API is able to do that. I have successfully tried to pass an image with fxb3 to the API and the results were good (here is image1 and image2). The response you are getting from the API is two consecutive unicode characters and "x". The quality of the writing is what is causing the response to be quite poor. The model for OCR is constantly being improved, but at this point it cannot properly detect what might be considered rather unclear handwriting.

Multichart krispo showing curved lines instead of straight lines

In my angular application I have used Krispo Multichart graph. Where I am getting some weird graph points.
See below screen shot:
UPDATE
Screen shot 1 :
Screen shot 2:
Screen shot 3:
In above screen shots, the data are coming in every minutes (i;e expected). Data seems correct.
Here is my Options:
$scope.options_line = {
chart: {
type: 'multiChart',
yDomain1: [0, 250],
yDomain2: [0, 0],
height: 260,
width: 550,
margin: {
top: 10,
right: 50,
bottom: 50,
left: 60
},
x: function (d) {
return d.x;
},
y: function (d) {
return d.y;
},
text: function (d) {
return d.x;
},
color: d3.scale.category10().range(),
showValues: true,
valueFormat: function (d) {
return d3.format('f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'Time',
tickFormat: function (d) {
return d3.time.format('%H:%M')(new Date(d));
}
},
yAxis1: {
axisLabelDistance: 0,
axisLabel: 'Voltage [ V ]',
tickFormat: function (d) {
return d3.format('f')(d);
}
},
yAxis2: {
axisLabelDistance: 0,
axisLabel: 'Current [ A ]',
tickFormat: function (d) {
return d3.format('f')(d);
},
width: 50,
},
interactive: true,
tooltip: {
contentGenerator: function (e) {
//return html content
//console.log(e);
//console.log($scope.tooltip_format);
var data = e;
console.log(data.point.y);
var series = e.series[0];
if($scope.set_offset_val) { $scope.xtime = data.point.x - $scope.set_offset_val} else {
$scope.xtime = data.point.x;
}
return '<h3>' + series.key + '</h3>' +
'<p>' + parseFloat(data.point.y).toFixed(2) + ' at ' + $filter('date')($scope.xtime, $scope.tooltip_format) + '</p>'
}
}
}
};
And JSON data:
[{
"yAxis": 1,
"values": [{
"x": "1487939640000",
"y": "150"
}, {
"x": "1487939700000",
"y": "150"
}, {
"x": "1487939760000",
"y": "150"
}, {
"x": "1487939820000",
"y": "151"
}, {
"x": "1487939880000",
"y": "151"
}, {
"x": "1487939940000",
"y": "151"
}, {
"x": "1487940000000",
"y": "151"
}, {
"x": "1487940060000",
"y": "151"
}, {
"x": "1487940660000",
"y": "168"
}, {
"x": "1487940720000",
"y": "169"
}, {
"x": "1487940840000",
"y": "165"
}, {
"x": "1487942100000",
"y": "165"
}, {
"x": "1487942160000",
"y": "165"
}, {
"x": "1487942220000",
"y": "154"
}, {
"x": "1487942280000",
"y": "165"
}, {
"x": "1487942340000",
"y": "165"
}, {
"x": "1487942400000",
"y": "165"
}, {
"x": "1487942460000",
"y": "165"
}, {
"x": "1487942520000",
"y": "165"
}, {
"x": "1487942580000",
"y": "165"
}, {
"x": "1487942640000",
"y": "165"
}, {
"x": "1487942700000",
"y": "165"
}],
"type": "line",
"key": "PVVoltage"
}, {
"yAxis": 2,
"values": [{
"x": "1487939640000",
"y": "4"
}, {
"x": "1487939700000",
"y": "4"
}, {
"x": "1487939760000",
"y": "2.3"
}, {
"x": "1487939820000",
"y": "2.1"
}, {
"x": "1487939880000",
"y": "1.6"
}, {
"x": "1487939940000",
"y": "1"
}, {
"x": "1487940000000",
"y": "1.5"
}, {
"x": "1487940060000",
"y": "0.1"
}, {
"x": "1487940660000",
"y": "3.5"
}, {
"x": "1487940720000",
"y": "0.1"
}, {
"x": "1487940840000",
"y": "0.5"
}, {
"x": "1487942100000",
"y": "2"
}, {
"x": "1487942160000",
"y": "0.2"
}, {
"x": "1487942220000",
"y": "3.2"
}, {
"x": "1487942280000",
"y": "0"
}, {
"x": "1487942340000",
"y": "0"
}, {
"x": "1487942400000",
"y": "0"
}, {
"x": "1487942460000",
"y": "0"
}, {
"x": "1487942520000",
"y": "0.1"
}, {
"x": "1487942580000",
"y": "0.1"
}, {
"x": "1487942640000",
"y": "0"
}, {
"x": "1487942700000",
"y": "0"
}],
"type": "line",
"key": "PVCurrent"
}]
Expected graph should not have the curve in it as this is a line graph. I my case point has went right and again left and then up.
Anyone have any idea why this is happening? and how can I fix this.

D3.js stacked layout - for repeated X values

Currently d3.layout.stack calculates the stacked-Y value based on the layers or series given.
Now I would like to generate stacked layout by both "X" value and by series. Anyway I am having 2-dimensional array of equal size.
For eg if my given data is,
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290},
{ "x": 1, "y": 190},
{ "x": null, "y": null}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49},
{ "x": 1, "y": 50},
{ "x": 2, "y": 220}
]
}
];
Here I have two layers ("apple","oranges"). My "x" values are [0,1,2];But If "X " values in the same layers looks same, then Y coordinate should be calculated based on the previous X value and series. Currently Y coordinate was calculated mapped by index.
Actual output for previous data:
var stacked_actual= [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91,"y0":0},
{ "x": 1, "y": 290, ,"y0":0},
{ "x": 1, "y": 190, ,"y0":0},
{ "x": null, "y": null, ,"y0":0}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9,"y0":91},
{ "x": 1, "y": 49,"y0":290},
{ "x": 1, "y": 50,"y0":190},
{ "x": 2, "y": 220,"y0":0}
]
}
];
Expected output for previous data:
var stacked_expected= [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91,"y0":0},
{ "x": 1, "y": 290 ,"y0":0},
{ "x": 1, "y": 190,"y0":190},
{ "x": null, "y": null ,"y0":0}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9,"y0":91},
{ "x": 1, "y": 49,"y0":480},
{ "x": 1, "y": 50,"y0":520},
{ "x": 2, "y": 220,"y0":0}
]
}
];
Is there any way to achieve this model?
Pls check the reference image
enter link description here

Resources