Amchart X axis position and fill to axis - graph

I am using AmChartXY to draw graph areas, here is the fiddle:
https://jsfiddle.net/ap60fhsu/1/
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"autoMarginOffset": 20,
"dataProvider": [{
"ax": 0,
"ay": 0,
"bx": 0,
"by": 0,
}, {
"ax": 8,
"ay": 1,
"bx": 12,
"by": -2,
},
{
"ax": 32,
"ay": 9,
"bx": 35,
"by": -1,
},
{
"ax": 45,
"ay": 6,
"bx": 45,
"by": -2,
},
{
"ax": 60,
"ay": 2,
"bx": 60,
"by": -2,
},
{
"ax": 70,
"ay": 0,
"bx": 70,
"by": 0,
},
{
"ax": 75,
"ay": 0,
"bx": 72,
"by": 0,
},
{
"ax": 85,
"ay": 6,
"bx": 80,
"by": -1,
},
{
"ax": 90,
"ay": 0,
"bx": 90,
"by": 0,
}],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"dashLength": 1,
"id": "x",
"title": "X Axis"
}, {
"axisAlpha": 0,
"dashLength": 1,
"position": "left",
"id": "y",
"title": "Y Axis"
}],
"plotAreaBorderAlpha": 1,
"startDuration": 1,
"graphs": [ {
"balloonText": "x:[[x]] y:[[y]]",
"fillAlphas": 0.3,
"fillToAxis": "x",
"lineAlpha": 1,
"xField": "ax",
"yField": "ay",
"lineColor": "#FF6600"
}, {
"balloonText": "x:[[x]] y:[[y]]",
"lineAlpha": 1,
"fillToAxis": "x",
"fillAlphas": 0.3,
"xField": "bx",
"yField": "by",
"lineColor": "#FCD202"
}],
"marginLeft": 64,
"marginBottom": 60,
"chartScrollbar": {},
"chartCursor": {},
"export": {
"enabled": true,
"position": "bottom-right"
}
});
As you see I have negative values for Y axis, this makes the X axis fall down from Y=0 to Y=-4 and when I use fillToAxis: x, expecting that the graph fill areas will be areas bounded with graphs and X axis corresponding to the value Y=0, I get another result. How can I move the X axis to the Y=0, or at least get the fill area result as I expect?
Thanks in advance

Related

CosmosDB Upsert gives status code 449 even when there is no conflict

A .NET 6 application Upserts documents to CosmosDB.
I get many debug messages (not all writes)
DocDBTrace Error: 0 : DocumentClientException with status code 449, message: Message: {"Errors":["Conflicting request to resource has been attempted. Retry to avoid conflicts."]}
the ids of the documents are Guid instances and there are no unique keys in the container (so no conflicts).
What could it be?
EDIT
partitionKey = id
//F#
let write database container items =
let container = client.GetContainer(database, container)
items
|> Seq.map (fun item -> container.UpsertItemAsync(item))
|> Seq.toArray
|> Task.WhenAll
Data sample
{
"RESPONSE": [
{
"IntradayTickResponse": {
"CorrelationID": "ESM2 Index:intraday",
"TimeReceived": "2022-05-05T01:19:38.338794Z",
"tickData": {
"eidData": null,
"tickData": [
{
"time": {
"DayOfMonth": 5,
"Hour": 0,
"MicroSecond": 0,
"MilliSecond": 0,
"Minute": 37,
"Month": 5,
"NanoSecond": 0,
"Parts": 2046,
"PicoSecond": 0,
"Second": 7,
"TimezoneOffsetMinutes": 0,
"Year": 2022
},
"type": "TRADE",
"value": 4292.5,
"size": 2,
"conditionCodes": "TSUM"
},
{
"time": {
"DayOfMonth": 5,
"Hour": 0,
"MicroSecond": 0,
"MilliSecond": 0,
"Minute": 37,
"Month": 5,
"NanoSecond": 0,
"Parts": 2046,
"PicoSecond": 0,
"Second": 19,
"TimezoneOffsetMinutes": 0,
"Year": 2022
},
"type": "TRADE",
"value": 4292.75,
"size": 2,
"conditionCodes": "TSUM"
},
{
"time": {
"DayOfMonth": 5,
"Hour": 0,
"MicroSecond": 0,
"MilliSecond": 0,
"Minute": 37,
"Month": 5,
"NanoSecond": 0,
"Parts": 2046,
"PicoSecond": 0,
"Second": 19,
"TimezoneOffsetMinutes": 0,
"Year": 2022
},
"type": "TRADE",
"value": 4292.75,
"size": 1,
"conditionCodes": "TSUM"
},
{
"time": {
"DayOfMonth": 5,
"Hour": 0,
"MicroSecond": 0,
"MilliSecond": 0,
"Minute": 37,
"Month": 5,
"NanoSecond": 0,
"Parts": 2046,
"PicoSecond": 0,
"Second": 19,
"TimezoneOffsetMinutes": 0,
"Year": 2022
},
"type": "TRADE",
"value": 4292.75,
"size": 1,
"conditionCodes": "TSUM"
},
{
"time": {
"DayOfMonth": 5,
"Hour": 0,
"MicroSecond": 0,
"MilliSecond": 0,
"Minute": 37,
"Month": 5,
"NanoSecond": 0,
"Parts": 2046,
"PicoSecond": 0,
"Second": 19,
"TimezoneOffsetMinutes": 0,
"Year": 2022
},
"type": "TRADE",
"value": 4292.75,
"size": 1,
"conditionCodes": "TSUM"
},
...
"id": "87fdc18a-61f2-4c43-a7a8-2904b14e6596",
"_rid": "maszAOGSZkYwAgAAAAAAAA==",
"_self": "dbs/maszAA==/colls/maszAOGSZkY=/docs/maszAOGSZkYwAgAAAAAAAA==/",
"_etag": "\"00000000-0000-0000-601e-3057eca901d8\"",
"_attachments": "attachments/",
"_ts": 1651713578
}

Adding multiple values in multiple entries via jq

Suppose I have some json formatted something like this (I've removed the bits I'm not interested in, I can filter those out):
{
"name": "db1",
"size": 40000,
"items": 500,
"mutations": 2,
"tombstones": 4,
"views_count": 8,
"fts_count": 0,
"index_count": 0,
"analytics_count": 0
}
{
"name": "db2",
"size": 11,
"items": 900,
"mutations": 3,
"tombstones": 0,
"views_count": 0,
"fts_count": 0,
"index_count": 0,
"analytics_count": 0
}
{
"name": "db1",
"size": 10,
"items": 6,
"mutations": 5,
"tombstones": 0,
"views_count": 0,
"fts_count": 0,
"index_count": 1,
"analytics_count": 0
}
How can I get a summary of all the elements of the entry, but only for each name (here we can see db1 mentioned twice so I'd like something like this):
{
"name": "db1",
"size": 40010,
"items": 506,
"mutations": 8,
"tombstones": 4,
"views_count": 8,
"fts_count": 0,
"index_count": 1,
"analytics_count": 0
}
{
"name": "db2",
"size": 11,
"items": 900,
"mutations": 3,
"tombstones": 0,
"views_count": 0,
"fts_count": 0,
"index_count": 0,
"analytics_count": 0
}
This is a subset of the complete json which has around 18000 lines (but there's only 11 names).
--slurp the input to get an array and then use group_by to make groups (arrays) according to any criteria (.name in your case). If you want just one for each name, take one (e.g. the first) of each such group. Finally, apply [] to disassemble the surrounding array.
jq --slurp 'group_by(.name) | map(first)[]'
{
"name": "db1",
"size": 40000,
"items": 500,
"mutations": 2,
"tombstones": 4,
"views_count": 8,
"fts_count": 0,
"index_count": 0,
"analytics_count": 0
}
{
"name": "db2",
"size": 11,
"items": 900,
"mutations": 3,
"tombstones": 0,
"views_count": 0,
"fts_count": 0,
"index_count": 0,
"analytics_count": 0
}
Demo
Note: With a little bit of more effort, you could also --stream (and then reduce) the input (instead of using --slurp) but 18000 lines isn't that big for memories nowadays, so I thought this would be the more reasonable approach.

How to prevent first/last bars from being cut off in a chart with time scale

How do I prevent the first and last bars from being cut off (showing half)?
I need to show the short month names on the x-axis. I've tried playing around with various min/max settings, but I can't seem to get it right.
var graphData = {
dates: [
'2016-06-01',
'2016-07-01',
'2016-08-01',
'2016-09-01',
'2016-10-01',
'2016-11-01',
'2016-12-01',
'2017-01-01',
'2017-02-01',
'2017-03-01',
'2017-04-01',
'2017-05-01'
],
wins: [23, 5, 13, 24, 8, 11, 23, 5, 13, 24, 8, 11],
draws: [2, 1, 2, 0, 2, 2, 3, 1, 2, 4, 0, 1],
losses: [3, 1, 2, 10, 8, 8, 3, 1, 2, 10, 8, 8],
winRates: [50, 40, 72, 30, 46, 80, 50, 40, 72, 30, 46, 80]
};
var winsMax = Math.max.apply(Math, graphData.wins);
var lossesMax = Math.max.apply(Math, graphData.losses);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: graphData.dates.map((date) => moment(date)),
datasets: [
{
type: "bar",
backgroundColor: "green",
hoverBackgroundColor: "green",
data: graphData.wins,
yAxisID: "winsAndLosses"
},
{
type: "bar",
backgroundColor: "red",
hoverBackgroundColor: "red",
data: graphData.losses.map((i) => -i),
yAxisID: "winsAndLosses"
},
{
type: "line",
data: graphData.winRates,
fill: true,
backgroundColor: "gray",
pointRadius: 0,
pointHoverRadius: 0,
yAxisID: "winRate"
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM"
}
},
stacked: true,
gridLines: {
display: false
},
ticks: {
callback: (label) => label.toUpperCase(),
fontSize: 10
}
}],
yAxes: [
{
id: "winsAndLosses",
stacked: true,
ticks: {
min: (lossesMax + 10) * -1,
max: winsMax + 10,
callback: (label) => Math.abs(label) // TODO: Localization (number formatting).
},
display: false
},
{
id: "winRate",
ticks: {
min: 0,
max: 100,
stepSize: 10,
callback: (label) => label + "%", // TODO: Localization (number formatting).
fontSize: 10
}
}
]
}
}
});
.myChartDiv {
max-width: 800px;
max-height: 400px;
}
<script src="https://npmcdn.com/chart.js#latest/dist/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="800" height="400"></canvas>
</div>
</body>
</html>
There's a setting called offset which seems to work for me:
xAxes: [{
offset: true
}]
var graphData = {
dates: [
'2016-06-01',
'2016-07-01',
'2016-08-01',
'2016-09-01',
'2016-10-01',
'2016-11-01',
'2016-12-01',
'2017-01-01',
'2017-02-01',
'2017-03-01',
'2017-04-01',
'2017-05-01'
],
wins: [23, 5, 13, 24, 8, 11, 23, 5, 13, 24, 8, 11],
draws: [2, 1, 2, 0, 2, 2, 3, 1, 2, 4, 0, 1],
losses: [3, 1, 2, 10, 8, 8, 3, 1, 2, 10, 8, 8],
winRates: [50, 40, 72, 30, 46, 80, 50, 40, 72, 30, 46, 80]
};
var winsMax = Math.max.apply(Math, graphData.wins);
var lossesMax = Math.max.apply(Math, graphData.losses);
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: graphData.dates.map((date) => moment(date)),
datasets: [
{
type: "bar",
backgroundColor: "green",
hoverBackgroundColor: "green",
data: graphData.wins,
yAxisID: "winsAndLosses"
},
{
type: "bar",
backgroundColor: "red",
hoverBackgroundColor: "red",
data: graphData.losses.map((i) => -i),
yAxisID: "winsAndLosses"
},
{
type: "line",
data: graphData.winRates,
fill: true,
backgroundColor: "gray",
pointRadius: 0,
pointHoverRadius: 0,
yAxisID: "winRate"
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM"
}
},
stacked: true,
gridLines: {
display: false
},
ticks: {
callback: (label) => label.toUpperCase(),
fontSize: 10
},
offset:true
}],
yAxes: [
{
id: "winsAndLosses",
stacked: true,
ticks: {
min: (lossesMax + 10) * -1,
max: winsMax + 10,
callback: (label) => Math.abs(label) // TODO: Localization (number formatting).
},
display: false
},
{
id: "winRate",
ticks: {
min: 0,
max: 100,
stepSize: 10,
callback: (label) => label + "%", // TODO: Localization (number formatting).
fontSize: 10
}
}
]
}
}
});
.myChartDiv {
max-width: 800px;
max-height: 400px;
}
<script src="https://npmcdn.com/chart.js#latest/dist/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="800" height="400"></canvas>
</div>
</body>
</html>

Getting Object's name in stdClass

I have a string like this.
{
"type": "item",
"version": "3.10.3",
"basic": {
"name": "",
"rune": {
"isrune": false,
"tier": 1,
"type": "red"
},
"gold": {
"base": 0,
"total": 0,
"sell": 0,
"purchasable": false
},
"group": "",
"description": "",
"colloq": ";",
"plaintext": "",
"consumeable": false,
"stacks": 1,
"depth": 1,
"consumed": false,
"consumeOnFull": false,
"from": [],
"into": [],
"specialRecipe": 0,
"inStore": true,
"hideFromAll": false,
"requiredChampion": "",
"stats": {
"FlatHPPoolMod": 0,
"rFlatHPModPerLevel": 0,
"FlatMPPoolMod": 0,
"rFlatMPModPerLevel": 0,
"PercentHPPoolMod": 0,
"PercentMPPoolMod": 0,
"FlatHPRegenMod": 0,
"rFlatHPRegenModPerLevel": 0,
"PercentHPRegenMod": 0,
"FlatMPRegenMod": 0,
"rFlatMPRegenModPerLevel": 0,
"PercentMPRegenMod": 0,
"FlatArmorMod": 0,
"rFlatArmorModPerLevel": 0,
"PercentArmorMod": 0,
"rFlatArmorPenetrationMod": 0,
"rFlatArmorPenetrationModPerLevel": 0,
"rPercentArmorPenetrationMod": 0,
"rPercentArmorPenetrationModPerLevel": 0,
"FlatPhysicalDamageMod": 0,
"rFlatPhysicalDamageModPerLevel": 0,
"PercentPhysicalDamageMod": 0,
"FlatMagicDamageMod": 0,
"rFlatMagicDamageModPerLevel": 0,
"PercentMagicDamageMod": 0,
"FlatMovementSpeedMod": 0,
"rFlatMovementSpeedModPerLevel": 0,
"PercentMovementSpeedMod": 0,
"rPercentMovementSpeedModPerLevel": 0,
"FlatAttackSpeedMod": 0,
"PercentAttackSpeedMod": 0,
"rPercentAttackSpeedModPerLevel": 0,
"rFlatDodgeMod": 0,
"rFlatDodgeModPerLevel": 0,
"PercentDodgeMod": 0,
"FlatCritChanceMod": 0,
"rFlatCritChanceModPerLevel": 0,
"PercentCritChanceMod": 0,
"FlatCritDamageMod": 0,
"rFlatCritDamageModPerLevel": 0,
"PercentCritDamageMod": 0,
"FlatBlockMod": 0,
"PercentBlockMod": 0,
"FlatSpellBlockMod": 0,
"rFlatSpellBlockModPerLevel": 0,
"PercentSpellBlockMod": 0,
"FlatEXPBonus": 0,
"PercentEXPBonus": 0,
"rPercentCooldownMod": 0,
"rPercentCooldownModPerLevel": 0,
"rFlatTimeDeadMod": 0,
"rFlatTimeDeadModPerLevel": 0,
"rPercentTimeDeadMod": 0,
"rPercentTimeDeadModPerLevel": 0,
"rFlatGoldPer10Mod": 0,
"rFlatMagicPenetrationMod": 0,
"rFlatMagicPenetrationModPerLevel": 0,
"rPercentMagicPenetrationMod": 0,
"rPercentMagicPenetrationModPerLevel": 0
},
"tags": [],
"maps": {
"1": true,
"8": true,
"10": true,
"12": true
}
},
"data": {
"1001": {
"name": "Boots of Speed",
"group": "BootsNormal",
"description": "<groupLimit>Limited to 1.</groupLimit><br><br><unique>UNIQUE Passive - Enhanced Movement:</unique> +25 Movement Speed<br><br><i>(Unique Passives with the same name don't stack.)</i>",
"colloq": ";",
"plaintext": "Slightly increases Movement Speed",
"into": [
"3006",
"3047",
"3020",
"3158",
"3111",
"3117",
"3009"
],
"image": {
"full": "1001.png",
"sprite": "item0.png",
"group": "item",
"x": 0,
"y": 0,
"w": 48,
"h": 48
},
"gold": {
"base": 325,
"purchasable": true,
"total": 325,
"sell": 227
},
"tags": [
"MOVEMENT",
"BOOTS"
],
"stats": {
"FlatMovementSpeedMod": 25
}
},
"1004": {
"name": "Faerie Charm",
"description": "<stats>+3 Mana Regen per 5 seconds</stats>",
"colloq": ";",
"plaintext": "Slightly increases Mana Regen",
"into": [
"3037",
"3096",
"3028",
"3070",
"3073",
"1080",
"3165"
],
"image": {
"full": "1004.png",
"sprite": "item0.png",
"group": "item",
"x": 48,
"y": 0,
"w": 48,
"h": 48
},
"gold": {
"base": 180,
"purchasable": true,
"total": 180,
"sell": 126
},
"tags": [
"MANAREGEN"
],
"stats": {
"FlatMPRegenMod": 0.6
}
},
"1006": {
its going like this I'm trying to get 1006 from "1006: { but i cant
$iveri = $iresponse->body;
foreach($iveri->data as $esya)
{
print($esya);
}
Because it's object, but i want it's name but i cant find a way to get that can you help me, I'm building database from that like getting values insade it and they will their id's they are id's of items so they cant be auto assing they had to be like in array.
1006 in your example is a key value, you need to slightly modify your loop syntax:
foreach($ivery->data as $key=>$esya) {
print $key; // This will be '1006'
print $esya;
}

Issue with datetime values and printing a spline plot between the data points

Anyone able to help with the following problem:
Trying to draw a chart with four data series, two of which are scatter and one is spline. Purpose of the spline is just to draw a line between specific spots on the chart, not joining all of them together. The following is my code so far:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
ordinal: false,
labels: {
formatter: function() {
return Highcharts.dateFormat('%H', this.value);
}
}
},
yAxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
gridLineWidth: 0,
step: 1,
title: '',
labels: {
style: {
color: '#6D869F',
fontSize: '9px',
}
},
},
tooltip: {
formatter: function() {
return ''+
this.x +' cm, '+ this.y +' kg';
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'sleep time',
marker: {
symbol: 'circle',
},
color: '#81c65b',
data: [[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 1, 20, 30), 3],
[Date.UTC(2012, 1, 1, 21, 45), 5],
[Date.UTC(2012, 1, 1, 22, 00), 6]]
},
{
name: 'wakeup time',
marker: {
symbol: 'circle',
fillColor: '#76a4fb',
},
data: [[Date.UTC(2012, 1, 2, 08, 15), 0],
[Date.UTC(2012, 1, 2, 07, 10), 1],
[Date.UTC(2012, 1, 2, 09, 20), 2],
[Date.UTC(2012, 1, 2, 07, 40), 3],
[Date.UTC(2012, 1, 2, 07, 30), 4],
[Date.UTC(2012, 1, 2, 08, 20), 5],
[Date.UTC(2012, 1, 2, 09, 30), 6]],
},
{
name: 'sleep time over average',
color: 'rgba(119, 152, 191, .5)',
marker: {
symbol: 'square',
fillColor: '#000',
},
data: [[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 1, 23, 40), 2],
[Date.UTC(2012, 1, 1, 21, 20), 4]]
},
{
name: '',
legend: {
enabled: false,
},
color: '#d62a9c',
type: 'spline',
marker: {
enabled: false,
},
data: [[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), 0],
[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 2, 07, 10), 1],
[Date.UTC(2012, 1, 1, 23, 40), 2],
[Date.UTC(2012, 1, 2, 09, 20), 2],
[Date.UTC(2012, 1, 1, 20, 30), 3],
[Date.UTC(2012, 1, 2, 07, 40), 3],
[Date.UTC(2012, 1, 1, 21, 20), 4],
[Date.UTC(2012, 1, 2, 07, 30), 4],
[Date.UTC(2012, 1, 1, 21, 45), 5],
[Date.UTC(2012, 1, 2, 08, 20), 5],
[Date.UTC(2012, 1, 1, 22, 00), 6],
[Date.UTC(2012, 1, 2, 09, 30), 6]]
}]
});
});
});
My problem now is, in the spline series, if I add a null between elements to prevent plotting the line between two points, the whole plot goes mayhem. The idea is to draw lines only so that points which are vertically on the same line get joined, eg. in this case "sleep time" and "wakeup time". For example,
data: [
[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), 0], null,
[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 2, 07, 10), 1], null,
[Date.UTC(2012, 1, 1, 23, 40), 2],
...
You may try out the code at this jsfiddle.
Try the following.
data: [
[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), null],
[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 2, 07, 10), 1],
[Date.UTC(2012, 1, 2, 08, 15), null],
[Date.UTC(2012, 1, 1, 23, 40), 2],
[Date.UTC(2012, 1, 2, 09, 20), 2],
[Date.UTC(2012, 1, 2, 08, 15), null],
...
]
As you can see you have to pass an array which the first value have to be any date.
Demo

Resources