im currently struggling to create a trend line to a line chart. found some old solutions and those things didn't work for me.
Current code:
{
"key": "003",
"title": "Detections",
"type": "chart",
"chartData": {
"chart": {
"type": "line",
"renderTo": "container"
},
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"xAxis": {
"categories": ["Jan 7", "Jan 14", "Jan 21", "Jan 28",
"Feb 4","Feb 11","Feb 18","Feb 25",
"Mar 4","Mar 11","Mar 18","Mar 28",
"Apr 1","Apr 8","Apr 15","Apr 22","Apr 29",
"May 6","May 13","May 20","May 27"
]
},
"colors": [ "#f89c1b"],
"yAxis": {
"title": {
"text": "Number of Exits"
}
},
"plotOptions": {
"line": {
"dataLabels": {
"enabled": true
},
"enableMouseTracking": false
}
},
"series": [{
"name": "Week",
"data": [60,12,29,48,
24,31,15,37,
32,16,22,29,
21,13,9,14,15,
10,12,13,7]
}
]
},
"index": 2,
"defaultWidth": "100%"
}
Current chart:
enter image description here
How do i add trend line to this line chart? is there any built in parameter to add trend line?
First, load and initialize indicators and trendline modules. Then add new trendline series. For example:
series: [{
id: "mainSeries",
name: "Week",
data: [...]
}, {
type: 'trendline',
linkedTo: "mainSeries"
}]
Live demo: https://codesandbox.io/s/highcharts-react-demo-fork-wubgnd?file=/demo.jsx
API Reference: https://api.highcharts.com/highstock/series.trendline
I'd like to remove / hide the axis lines from the vega-lite chart below. I've tried changing the colour to null (as below) or other colours and that doesn't work.
https://vega.github.io/editor/#/gist/fc799bc9f7a8f28b8f1f2ec84673e965/VL with axis lines.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"responseType": "Yes", "proportion": 28},
{"responseType": "No", "proportion": 7}
]
},
"mark": "bar",
"encoding": {
"y": {
"field": "responseType",
"type": "nominal",
"title": null,
"axis": {"axisColor": null, "grid": false, "ticks": false}
},
"x": {
"field": "proportion",
"type": "quantitative",
"title": "% of Responses",
"axis": {"axisWidth": "100", "grid": false, "ticks": false}
}
}
}
domain hides the axis lines, so setting "axis": {"domain": false, "grid": false, "ticks": false} for both x and y produces this chart:
If you also add "config": {"view": {"stroke": null}} as a top level property, you get rid of the grey outline:
Open the Chart in the Vega Editor
In this VegaLite spec the y-axis order of the bottom-most barplot is updated as the data of that plot is filtered based on the selection in the scatter plot. How can I achieve the same resorting behavior for both the blue and orange bars in the top-most bar plot where I have layered the same barplot together with another chart?
I have tried toggling the axis between shared and independent and switching the order of the layer, but that didn't do it. Conceptually I can imagine using a calculate transform to define a new field that is based on the selection and used as the sort order key, but I can't figure out how to write this vega expression string.
Here is that Altair code if anyone prefers to solve it that way:
import altair as alt
import pandas as pd
data={
'Term': ['algorithm','learning','learning','algorithm','algorithm','learning'],
'Freq_x': [1330,1153,504.42,296.69,177.59,140.35],
'Total': [1330, 1353,1353.7,1330.47,1330.47,1353.7],
'Category': ['Default', 'Default', 'Topic1', 'Topic1', 'Topic2', 'Topic2'],
'logprob': [30.0, 27.0, -5.116, -5.1418, -5.4112, -5.5271],
'loglift': [30.0, 27.0, 0.0975, 0.0891, -0.1803, -0.3135],
'saliency_ind': [0, 3, 76, 77, 181, 186],
'x': [None,None,-0.0080,-0.0080,-0.0053,-0.0053],
'y': [None,None,-0.0056,-0.0056, 0.0003,0.0003],
'topics': [None,None, 1.0, 1.0, 2.0, 2.0],
'cluster': [None,None, 1.0, 1.0, 1.0, 1.0],
'Freq_y': [None,None,20.39,20.39,14.18,14.18]}
df=pd.DataFrame(data)
pts = alt.selection(type="single", fields=['Category'], empty='none')
points = alt.Chart(df).mark_circle().encode(
x='mean(x)',
y='mean(y)',
size='Freq_y',
detail='Category',
color=alt.condition(pts, alt.value('#F28E2B'), alt.value('#4E79A7'))
).add_selection(pts)
bars = alt.Chart(df).mark_bar().encode(
x='Freq_x',
y=alt.Y('Term'),
)
bars2 = alt.Chart(df).mark_bar(color='#F28E2B').encode(
x='Freq_x',
y=alt.Y('Term', sort='-x'),
).transform_filter(
pts
)
(points | (bars + bars2) & bars2)
The issue with your spec was that in layers you performed filter transform which created a separate data for each layers. Sorting was working at each level of layer but since both the layers data were separate so each layer was getting sorted inpendently.
So instead of having a filter transform, I tried to manual filter using calculate transform and created a filtered_freq_x field which is later used on 2nd layer and performed sorting using this on window. So with this my data becomes same for both layers, just few fields were added and used.
Let me know if this works for you not. Below is the spec config and editor:
{
"config": {"view": {"continuousWidth": 200, "continuousHeight": 300}},
"hconcat": [
{
"mark": "circle",
"encoding": {
"color": {
"condition": {"value": "#F28E2B", "selection": "selector046"},
"value": "#4E79A7"
},
"detail": {"type": "nominal", "field": "Category"},
"size": {"type": "quantitative", "field": "Freq_y"},
"x": {"type": "quantitative", "aggregate": "mean", "field": "x"},
"y": {"type": "quantitative", "aggregate": "mean", "field": "y"}
},
"selection": {
"selector046": {
"type": "single",
"fields": ["Category"],
"empty": "none"
}
}
},
{
"vconcat": [
{
"transform": [
{
"joinaggregate": [
{"field": "Freq_x", "op": "max", "as": "max_Fx"}
]
},
{
"calculate": "selector046['Category'] ? selector046['Category'] : []",
"as": "filterCategory"
},
{
"calculate": "indexof(datum.filterCategory,datum['Category']) > -1 ? datum['Freq_x'] : null",
"as": "filtered_Freq_x"
},
{
"sort": [{"field": "filtered_Freq_x", "order": "descending"}],
"window": [{"op": "rank", "as": "Sorted"}]
}
],
"height": 50,
"layer": [
{
"mark": "bar",
"encoding": {
"x": {"type": "quantitative", "field": "Freq_x"},
"y": {
"type": "nominal",
"field": "Term",
"sort": {"field": "Sorted"}
}
}
},
{
"mark": {"type": "bar", "color": "#F28E2B"},
"encoding": {
"x": {"type": "quantitative", "field": "filtered_Freq_x"},
"y": {
"type": "nominal",
"field": "Term",
"sort": {"field": "Sorted"}
}
}
}
]
},
{
"mark": {"type": "bar", "color": "#F28E2B"},
"encoding": {
"x": {"type": "quantitative", "field": "Freq_x"},
"y": {"type": "nominal", "field": "Term", "sort": "-x"}
},
"transform": [{"filter": {"selection": "selector046"}}]
}
]
}
],
"data": {"name": "data-d807cd22b94d04d6f1543201cfe5f45e"},
"$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
"datasets": {
"data-d807cd22b94d04d6f1543201cfe5f45e": [
{
"Term": "algorithm",
"Freq_x": 1330,
"Total": 1330,
"Category": "Default",
"logprob": 30,
"loglift": 30,
"saliency_ind": 0,
"x": null,
"y": null,
"topics": null,
"cluster": null,
"Freq_y": null
},
{
"Term": "learning",
"Freq_x": 1153,
"Total": 1353,
"Category": "Default",
"logprob": 27,
"loglift": 27,
"saliency_ind": 3,
"x": null,
"y": null,
"topics": null,
"cluster": null,
"Freq_y": null
},
{
"Term": "learning",
"Freq_x": 504.42,
"Total": 1353.7,
"Category": "Topic1",
"logprob": -5.116,
"loglift": 0.0975,
"saliency_ind": 76,
"x": -0.008,
"y": -0.0056,
"topics": 1,
"cluster": 1,
"Freq_y": 20.39
},
{
"Term": "algorithm",
"Freq_x": 296.69,
"Total": 1330.47,
"Category": "Topic1",
"logprob": -5.1418,
"loglift": 0.0891,
"saliency_ind": 77,
"x": -0.008,
"y": -0.0056,
"topics": 1,
"cluster": 1,
"Freq_y": 20.39
},
{
"Term": "algorithm",
"Freq_x": 177.59,
"Total": 1330.47,
"Category": "Topic2",
"logprob": -5.4112,
"loglift": -0.1803,
"saliency_ind": 181,
"x": -0.0053,
"y": 0.0003,
"topics": 2,
"cluster": 1,
"Freq_y": 14.18
},
{
"Term": "learning",
"Freq_x": 140.35,
"Total": 1353.7,
"Category": "Topic2",
"logprob": -5.5271,
"loglift": -0.3135,
"saliency_ind": 186,
"x": -0.0053,
"y": 0.0003,
"topics": 2,
"cluster": 1,
"Freq_y": 14.18
}
]
}
}
I am using Highcharts library to draw a network graph. But I have a layout problem when the data makes two or more disconnected networks. Then the bigest one is centered and pushes to the edges the other networks to the point where they are barely readable.
Example:
Highcharts.chart('container', {
chart: {
type: 'networkgraph',
height: '60%'
},
title: {
text: ''
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
}
},
series: [{
dataLabels: {
enabled: true,
linkFormat: ''
},
id: 'demo-tree',
data: [["demo001", "demo002"], ["demo003", "demo004"], ["demo005", "demo002"], ["demo006", "demo007"], ["demo008", "demo009"], ["demo003", "demo010"], ["demo011", "demo009"], ["demo001", "demo008"], ["demo005", "demo001"], ["demo011", "demo008"], ["demo005", "demo006"], ["demo005", "demo007"], ["demo005", "demo011"], ["demo005", "demo009"], ["demo012", "demo004"], ["demo005", "demo008"], ["demo001", "demo006"], ["demo001", "demo007"]],
nodes: [{ "id": "demo001", "marker": { "radius": 119 }, "color": "#dc3545" }, { "id": "demo002", "marker": { "radius": 7 }, "color": "#ffc107" }, { "id": "demo003", "marker": { "radius": 9 }, "color": "#ffc107" }, { "id": "demo004", "marker": { "radius": 8 }, "color": "#ffc107" }, { "id": "demo005", "marker": { "radius": 100 }, "color": "#dc3545" }, { "id": "demo006", "marker": { "radius": 77 }, "color": "#dc3545" }, { "id": "demo007", "marker": { "radius": 76 }, "color": "#dc3545" }, { "id": "demo009", "marker": { "radius": 40 }, "color": "#dc3545" }, { "id": "demo008", "marker": { "radius": 33 }, "color": "#dc3545" }, { "id": "demo010", "marker": { "radius": 5 }, "color": "#28a745" }, { "id": "demo011", "marker": { "radius": 40 }, "color": "#dc3545" }, { "id": "demo012", "marker": { "radius": 4 }, "color": "#28a745" }]
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
https://jsfiddle.net/jrb471kc/1/
What I want, is to make better use of the space. Rather then having this:
Have something like this:
I toyed around with the node.mass attribute to no avail.
Does somebody have a solution for this?
EDIT 1: To better explain my question, this is an example of what I got right now. What I want is the graph to not center the big network in the center. Align it left to have room for the 2 small ones.
So i am attempting create a horizontal bar chart that has a horizontal line showing average.
So far i have attempted the following:
First added my barChart series (it comes from the following array):
"series": [
{
"value": 100, "label": "F1"
},
{
"value": 25, "label": "F2"
},
{
"value": 30, "label": "Jedi Jeremiah 555"
},
{
"value": 40, "label": "F4"
},
{
"value": 55, "label": "F5"
},
{
"value": 60, "label": "F6"
},
{
"value": 71, "label": "F7"
},
{
"value": 15, "label": "F8"
},
{
"value": 88, "label": "F9"
},
{
"value": 90, "label": "F10"
}
]
Which converts to an array of the following objects:
{name: 'F1', orientation: "h", x: [100], y: ["F1"]}
Then afterwards i add the following series:
{
name: 'average organization',
type: 'scatter',
x: [60],
orientation: 'h'
}
This creates the following chart:
As you can see there is only a blue dot indicating the average which is not the result im looking for.
I know that there are shapes however i wish to have it as a part of the chart so that you can either select or deselect it.
Does anyone know how you might achieve this?
It would help if you would provide a jsFiddle or codePen or other example to execute it directly:-)
I think the problem is, that you want to have a vertical line but set orientation: 'h' to the last "average-organisation"-object instead using orientation: 'v'.
I reproduced your example in a jsFiddle and add the desired behaviour:
https://jsfiddle.net/vepycde0/
Hope it helps:-)
Edit: For hiding the "0" on yAxis use y: [""] as seen in that jsFiddle: https://jsfiddle.net/vepycde0/1/