We Keep Coding

Issue graphing tan(x) when limiting it by range

For this, I have been using the Vega Editor.
So I initially had the code for showing sin and cos absolutely fine, then when I tried to add tan, I understandably had some issues with scale, as the y values of tan were relatively huge when it approached the points where the function becomes undefined.
In order to tackle this, I added a range filter on the tan element, but it seems to be trying to join the points either side of when it is undefined. For some reason, this has also altered the sin line.
Here is the code I have so far:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Plots three functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
"sequence": {
"start": 0,
"stop": 12.7,
"step": 0.1,
"as": "x"
}
},
"transform": [
{
"calculate": "sin(datum.x)",
"as": "sin(x)"
},
{
"calculate": "cos(datum.x)",
"as": "cos(x)"
},
{
"calculate": "tan(datum.x)",
"as": "tan(x)"
},
{
"filter": {
"field": "tan(x)",
"range": [-1, 1]
}
},
{
"fold": [
"sin(x)",
"cos(x)",
"tan(x)"
]
}
],
"mark": "line",
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "key",
"type": "nominal",
"title": null
}
}
}
How I can I get this data to not try and join up points but it instead let the tan line rise until it is out of the range? I also have very little idea what is happening with sin line, it is fine without the addition of the tan line.
Any help is greatly appreciated.

To avoid drawing a line between adjacent points, you'll need to split each segment into a separate group: the detail encoding is useful for this. Unfortunately, a grouping like this will apply to all the lines affected by the encoding, so to avoid breaks in the sin(x) and cos(x) curves, you'll need to split the tangent into a separate layer.
Here is how you might do this (open in editor):
{
"width": 300,
"height": 150,
"data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
"transform": [
{"calculate": "sin(datum.x)", "as": "sin(x)"},
{"calculate": "cos(datum.x)", "as": "cos(x)"},
{"calculate": "tan(datum.x)", "as": "tan(x)"},
{"calculate": "floor(datum.x / PI - 0.5)", "as": "phase"}
],
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {
"field": "value",
"type": "quantitative",
"scale": {"domain": [-3, 3]}
},
"color": {"field": "key", "type": "nominal", "title": null}
},
"layer": [
{"transform": [{"fold": ["sin(x)", "cos(x)"]}], "mark": "line"},
{
"transform": [{"fold": ["tan(x)"]}],
"mark": {"type": "line", "clip": true},
"encoding": {"detail": {"field": "phase", "type": "ordinal"}}
}
]
}

Highchart spline Chart with no markers and legends markers as circle's

Can anyone help me with this, I need the following legend marker symbol marked in the image as a circle?
I have tried adding marker: circle inside series but it is not working.
I am new to Highcharts. Is there any possible way to fix this?
Thanks in advance.
NOTE: My chart has multiple series.
{
"series": [{
"name": "Test series",
"data": [{
"y": 8,
}, {
"y": 10,
}, {
"y": 15,
}, {
"y": 8,
}],
"type": "spline",
"color": "#dd0014",
marker: {
symbol: 'circle'
}
}],
"xAxis": {
"categories": ["cat-1", "cat-2", "cat-3"],
},
"plotOptions": {
"series": {
"marker": {
"symbol": "circle",
"enabled": false
},
},
},
"legend": {
"align": "right",
"enabled": true,
"y": 35,
"x": 0,
"verticalAlign": "top",
"layout": "vertical",
"itemStyle": {
"fontSize": "12px",
"fontWeight": "light"
},
"reversed": true,
"symbolRadius": 9,
"itemMarginTop": 3,
"itemMarginBottom": 3,
"marker": "circle"
},
"colors": ["#00B19D", "#4E3363", "#3A99D5", "#00AE84", "#49494A", "#318ACA"],
"credits": {
"enabled": false
},
}
JsFiddle Link here

I have found a workaround solution after going through the Highcharts documentation.
chart: {
events: {
load: function() {
$(".highcharts-legend-item path").attr('stroke-width', 10);
$(".highcharts-legend-item path").attr('d', "M 8 14.75 Z 61.25 61.25 99 1 1 33.45 44.00");
$(".highcharts-legend-item path").attr("stroke-linecap", "round");
},
redraw: function() {
$(".highcharts-legend-item path").attr('stroke-width', 10);
$(".highcharts-legend-item path").attr('d', "M 8 14.75 Z 61.25 61.25 99 1 1 33.45 44.00");
$(".highcharts-legend-item path").attr("stroke-linecap", "round");
}
}
},
added this to update legend symbols using JQUERY
DEMO LINK HERE

highcharts stacked column overlaps when toggling the legends visibility

I've created a stacked column chart using highchart it works fine. but when I toggle the visibility of a particular legend the column overlaps each other.
Highcharts.chart('container', {
"chart": {
"type": "column",
"zoomType": "x",
"panning": true,
"panKey": "shift",
"shadow": true,
"style": {
"fontFamily": "RotisSemiSans"
}
},
"title": {
"text": ""
},
"subtitle": {},
"xAxis": {
"type": "datetime"
},
"yAxis": [
{
"title": {
"text": "some value"
},
"opposite": false,
"type": "column"
}
],
"tooltip": {},
"plotOptions": {
"series": {
"stacking": "normal"
},
"line": {
"marker": {
"enabled": false
}
},
"area": {
"marker": {
"enabled": false
}
},
"pointRange": 1
},
"legend": {
"itemWidth": 150,
"maxHeight": 65
},
"credits": {
"enabled": false
},
"series": [
{
}],
});
Tried setting stack name but that too didn't work. setting the pointRange doesn't work either.
see it the JSFiddle

Your idea of using pointRange is a good way of dealing with it, you just misplaced it a bit. You have:
"plotOptions": {
"series": {
"stacking": "normal"
},
// ...
"pointRange": 1
},
Instead do (JSFiddle demonstration):
"plotOptions": {
"series": {
"stacking": "normal"
"pointRange": 5 * 60 * 1000
},
// ...
},
My example above uses 5 minutes, since that appears to be your interval. I am unsure of why it fails in the first place, but this should resolve the overlapping issue.

How to change pie chart colours in a custom TFS widget

I've to change default bar color in a custom tfs widget, how can I do this?
I know there a "color" option but I can't find the correct syntax.
Thanks.
Here's my chart code:
chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};

Try to add your custom colors like below:
chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"colorCustomizationOptions": {
"customColors": ["#FF0000", "#00CC00", "#302772"]
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};

In vss-web-extension-sdk/typings/charts.d.ts I found that customColors is a ColorEntry array. ColorEntry has two string properties: value, backgroundColor. With some trial and error I found out that value should be the label for which you want to set the color.
So I think this should work:
chartOptions = {
"hostOptions": {
"height": "290",
"width": "300"
},
"chartType": "bar",
"series": [{
"data": [myBugs, myVuln, myCodeSm]
}],
"xAxis": {
"labelValues": ["Bugs", "Vulnerabilities", "Code smells"]
},
"colorCustomizationOptions": {
"customColors": [
{backgroundColor: "#FF0000", value: "Bugs"},
{backgroundColor: "#00CC00", value: "Vulnerabilities"},
{backgroundColor: "#302772", value: "Code smells"}
]
},
"specializedOptions": {
"showLabels": "true",
"size": 200
}
};

How to handle different series of data in d3.js

I am using nvd3's multibar chart. The problem is the series I provide to the chart is not symmetrical. Like there will be values for a some series and others won't have.
[
{
"key": "ALL POS",
"color": "#39a5cf",
"values": [
{
"x": "4/01/2012",
"y": 54,
"series": 0
}
]
},
{
"key": "MIX POS",
"color": "#2227f4",
"values": [
{
"x": "4/01/2012",
"y": 34,
"series": 1
}
]
},
{
"key": "PURE POS",
"color": "#9fa9f7",
"values": []
}
]
You can see the pure pos series doesnt have values compared to the other two. Because of this the stacked effect is not working. Can someone help me regarding this?