We Keep Coding

Plotting Away and Home Goal Difference for Crystal Palace 2020/21

Using javascript, vega editor and this data: https://github.com/StanWaldron/StanWaldron.github.io/blob/main/final.csv, which I got from SportDataAPI and organised using pandas, I have attempted to make a graph that plots Crystal Palace's home and away goal differences over the course of the 2020/21 season. As you can see though, I can't get a smooth plot.
The issue seems to be that the NaNs in the data are being put in as 0s for home games when they have played away and vice versa. When trying to resolve this by looping through like so:
for c in final['Home_GD']:
if math.isnan(c) == True:
c = 0.0
It doesn't seem to change the data at all. If this worked, I would just be able to simply add it to the previous value and plot it that way, for every game.
In the javascript side I have also used layers, but have struggled to find any way of separating the data completely and then using two different data sources which I can layer on the same graph.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "Home and Away Goal Difference For Crystal Palace 2020/21",
"subtitle":["Exclusively in the Premier League"],
"subtitleFontStyle":"italic",
"subtitleFontSize":10,
"anchor": "start",
"color": "black"},
"data": {
"url":
"https://raw.githubusercontent.com/StanWaldron/StanWaldron.github.io/main/final.csv"
},
"repeat": {"layer": ["Away_GD", "Home_GD"]},
"height": 300,
"width": 300,
"spec": {
"mark": {
"type":"line",
"strokeWidth":2},
"encoding": {
"x": {
"field": "Date",
"type": "temporal",
"title":null,
"axis":{
"grid": false
}},
"y": {
"field": {"repeat": "layer"},
"type": "quantitative",
"title": null},
"color": {
"datum": {"repeat": "layer"},
"scale": {"range": ["blue", "red"]},
"legend": {
"orient":"top-left",
"fillColor":"white"}}
}
}
}

I would probably do this by filtering each value individually within a layer; here's an example (open in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "https://raw.githubusercontent.com/StanWaldron/StanWaldron.github.io/main/final.csv"
},
"transform": [{"fold": ["Home_GD", "Away_GD"], "as": ["key", "Goals"]}],
"encoding": {
"x": {"field": "Date", "type": "temporal"},
"y": {"field": "Goals", "type": "quantitative"},
"color": {"field": "key", "type": "nominal"}
},
"layer": [
{
"transform": [{"filter": "datum.key == 'Home_GD' && datum.Home_GD != ''"}],
"mark": "line"
},
{
"transform": [{"filter": "datum.key == 'Away_GD' && datum.Away_GD != ''"}],
"mark": "line"
}
]
}

Append to tooltips in Amcharts

i have made some charts for spreader beams in Amcharts (Worpress) and want to change the toolstips,
reverse the order of the 2 values.
append "tonnes" and "metres" after the respective values.
I can swap the order they appear in the code to change the order they appear, but how to append in plain text after the digit values so it shows "8 tonnes: 2 metres"?
Code for these is below in the tooltipText:
"series": [{
"type": "LineSeries",
"name": "30° Sling To Vertical Angle",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value1",
"categoryX": "category"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "{name}\n{categoryX}: {valueY}"
}, {
"type": "LineSeries",
"name": "45° Sling To Vertical Angle",
"xAxis": "id-1",
"yAxis": "id-2",
"dataFields": {
"valueY": "value2",
"categoryX": "category"
},
"simplifiedProcessing": true,
"calculatePercent": true,
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "{name}\n{categoryX}: {valueY}"
url is https://applifting.ga/modular-spreader-beams/sectionlift-6/
Thanks

Just swapped the order of the tool tip values and appended in plain text the denominator.

HighChart Drilldown axis automatically show the differences instead of actual label

http://jsfiddle.net/sohxow92/
The y-axis after clicking on drilldown automatically show the short label, try 1-2h, and take a look at y-axis you will see, starting from 68, it shows 8, 12 and so on.
What config of highchart do I need to modify to make this show the original label?
Following is part of the drilldown object.
"drilldown": {
"xAxis": {
"type": "category",
"labels": {
"overflow": "justify"
}
},
"yAxis": {
"labels": {
"overflow": "justify"
},
"title": {
"text": "Visits"
}
},
"activeDataLabelStyle": {
"textDecoration": "none"
},
"activeAxisLabelStyle": {
"textDecoration": "none"
},
}
Thanks in advance.

Highcharts ng heatmap draw line instead of boxes

Highcharts ng heatmap draw line instead of boxes
$scope.chartConfig = {
"chart": {
"type": "heatmap"
},
"credits": {
"enabled": false
},
"size": {
"height": 1000
},
"title": {
"text": ""
},
"xAxis": {
"categories": ["23-02-2005", "24-02-2005", "27-02-2005", "28-02-2005", "01-03-2005", "02-03-2005"]
},
"yAxis": {
"categories": ["Bond2Y", "Bond3Y"],
"title": null
},
"series": [{
"name": "Trades Data",
"borderWidth": 1,
"data": [
[0, 0, 0.7642386249005615],
[0, 1, 0.5010608923969173],
[1, 0, 0.5009742082142428],
[1, 1, 0.9114076033035807]
],
"dataLabels": {
"enabled": false,
"color": "#000000"
}
}]
}
Angular Highcharts
When i place these config with JQuery Its works fi
jQuery Highcharts
Is this is the highcharts-ng issue ?

When I checked your fiddle I had observed that you have not included the heatmap.js library.
Also, You need to move your chart and colorAxis inside the options block.
Check the below working fiddle link in which you can see the square blocks identical to your jQuery example.
Working Fiddle: http://jsfiddle.net/y9wjy0kz/10/
Hope this helps!

Multiple series data on HighCharts column

I'm using HighCharts on a project, and I'm having trouble formatting the data in the way I'd like. I currently have something that works, but it doesn't feel quite right.
What I have is a column chart with everything in one series. I'd rather have each data point be in it's own series & properly labeled in the legend & tooltips. Below are samples of the relevant bits to format the data.
I'm not sure what I'm doing wrong, the changes I've made feel like they should work given their docs & this demo. Also, Do I need the categories if multiple series works?
Working:
"series": [
{
"data": [
{
"y": 92,
"name": "Apples: 92ms for 83,481,430 requests",
"color": "#91cb73"
},
{
"y": 761,
"name": "Bananas: 761ms for 58,050,877 requests",
"color": "#ab7053"
},
{
"y": 774,
"name": "Kiwis: 774ms for 362,294 requests",
"color": "#44719c"
}
]
}
]
Demo: http://jsfiddle.net/b65kp/
Not working:
"series": [
{
"name": "Apples",
"data": {
"y": 92,
"name": "92ms for 83,481,430 requests",
"color": "#91cb73"
}
},
{
"name": "Bananas",
"data": {
"y": 761,
"name": "761ms for 58,050,877 requests",
"color": "#ab7053"
}
},
{
"name": "Kiwis",
"data": {
"y": 774,
"name": "774ms for 362,294 requests",
"color": "#44719c"
}
}
]
Demo: http://jsfiddle.net/u74Qw/1/

The problem is that "data" expects an array, and you are giving it an object. Wrap each object in an array. For example:
"data": [{
"y": 92,
"name": "92ms for 83,481,430 requests",
"color": "#91cb73"
}]
Here is your full fix, but it might not give the result you expect, personally I like your first attempt better

FWIW, alternate approach to setting this up:
http://jsfiddle.net/jlbriggs/zbW4D/
Things to consider:
1) using a legend instead of just directly labeling each bar makes the user do a lot of looking back and forth to see which is which (doing both just adds extra clutter to distract the user)
2) rotating labels always adds more work for the user
3) multiple colors for the bars is not necessary when each bar is labeled appropriately, and again just adds distraction
A horizontal bar chart with no legend and single color for data solves these problems.