I am trying to create a scatterplot using webservice API endpoints provided by my university and Vega-lite visualization library. The goal is to have hour of day plotted on the x-axis and the count of instances on the y axis by using the following.
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "https://zagster-service.herokuapp.com/rides/count/per_hour"},
"mark": "point",
"encoding": {
"x": {"field": "0", "type": "quantitative"},
"y": {"field": "1", "type": "quantitative"}
}
}
I have tried to follow several examples found online and have only able to figure out how to plot one point at a time using the above code or manually input each point on the graph, however doing it manually is not an option for my purposes. My JSON file looks is as follows where the hours of day are represented by 0-23 and count of each instance is right next to it.
{"0":429,"1":231,"2":130,"3":85,"4":42,"5":1,"7":1,"8":17,"9":16,"10":795,"11":425,"12":921,"13":846,"14":1795,"15":1789,"16":2119,"17":1630,"18":1942,"19":1637,"20":1636,"21":1054,"22":843,"23":710}
I have been trying to figure this out for a while and need some help going in the right direction
Data in vega-lite is expected to be specified as a list of records; e.g. rather than
{"0":429,"1":231,"2":130}
it should be
[{"x": "0", "y": 429}, {"x": "1", "y": 231}, {"x": "2", "y": 130}]
If your data source cannot be modified, it is possible to use the fold transform to reshape your data. It would look something like this (view in vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "https://zagster-service.herokuapp.com/rides/count/per_hour"},
"transform": [
{
"fold": ["0", "1", "2", "3", "4", "5", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
"as": ["x", "y"]
}
],
"mark": "point",
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"}
}
}
Unfortunately, there's no way to fold data like this without explicitly listing all the entries to be folded.
Related
I make a graph with NextJs and ChartJs on the stats of the covid (over the last 30 days) that I get with an API that provides me with the date and the stats :
timeline: {
cases: {
'5/13/21': 5902343,
'...' : ...
},
}
I managed to make the graph but I would like to place the date returned for each stats on the X line of my label
I managed to do this code (lineData is't my request) :
labels: [Object.keys(lineData.timeline.cases)],
but it shows me all the dates as one and the same object.
For now my label looks like this
labels: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30",
],
and I would like to replace values with the one provided by the api
Object.keys returns an array. So currently you have an array of array like:
labels: [ ['5/13/21'] ]
You can just do:
labels: Object.keys(lineData.timeline.cases) // labels: ['5/13/21']
I can't find an example of a state/class/flow chart/org chart diagram with Vega. Are there any out there?
It feels like Vega is perfectly suited for this (if a bit overpowered), but without an example to start from it's a rather steep learning curve. There are some examples on a "How Vega Works" page, but no links to how they're built:
There's also the tree layout example, but it's not clear how one would begin converting this into blocks suitable for a flow-chart style diagram.
Here's some examples of the sort of output desired (plus other shapes e.g. diamonds/triangles) from e.g. mermaid.js
Suppose you're able to represent your chart as follows:
"values": [
{"id": "1", "parent": null, "title": "Animal"},
{"id": "2", "parent": "1", "title": "Duck"},
{"id": "3", "parent": "1", "title": "Fish"},
{"id": "4", "parent": "1", "title": "Zebra"}
]
What you can then do is to lay the nodes out in a tree-like shape (stratify does the job):
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": "tidy",
"separation": true,
"size": [{"signal": "width"}, {"signal": "height"}]
}
]
having laid out the nodes, you need to generate connecting lines, treelinks + linkpath combo does exactly that:
{
"name": "links",
"source": "tree", // take datasource "tree" as input
"transform": [
{ "type": "treelinks" }, // apply transform 1
{ "type": "linkpath", // follow up with next transform
"shape": "diagonal"
}
]
}
now that you've got your data sources, you want to draw actual objects. in Vega these are called marks. I guess this is where I'm going to deviate from your desired output as I'm only drawing one rectangle with a title for each data point and some basic lines to connect:
"marks": [
{
"type": "path",
"from": {"data": "links"}, // dataset we defined above
"encode": {
"enter": {
"path": {"field": "path"} // linkpath generated a dataset with "path" field in it - we just grab it here
}
}
},
{
"type": "rect",
"from": {"data": "tree"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "text",
"from": {"data": "tree"}, // use data set we defined earlier
"encode": {
"enter": {
"stroke": {"value": "black"},
"text": {"field": "title"}, // we can use data fields to display actual values
"x": {"field": "x"}, // use data fields to draw values from
"y": {"field": "y"},
"dx": {"value":50}, // offset the mark to appear in rectangle center
"dy": {"value":13},
"align": {"value": "center"}
}
}
}
]
All in all I arrived at a very basic approximation of your target state. It's definitely not an exact match: the rectangles there should probably be replaced with groups and connection paths will need some work too. You will notice I'm not using any signalsto feed dynamic user inputs and update/exit/hover instructions - again, for simplicity.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 800,
"height": 300,
"padding": 5,
"data": [
{
"name": "tree",
"values": [
{"id": "1", "parent": null, "title": "Animal"},
{"id": "2", "parent": "1", "title": "Duck"},
{"id": "3", "parent": "1", "title": "Fish"},
{"id": "4", "parent": "1", "title": "Zebra"}
],
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": "tidy",
"separation": true,
"size": [{"signal": "width"}, {"signal": "height"}]
}
]
},
{
"name": "links",
"source": "tree",
"transform": [
{ "type": "treelinks" },
{ "type": "linkpath",
"shape": "diagonal"
}
]
},
{
"name": "tree-boxes",
"source": "tree",
"transform": [
{
"type": "filter",
"expr": "datum.parent == null"
}
]
},
{
"name": "tree-circles",
"source": "tree",
"transform": [
{
"type": "filter",
"expr": "datum.parent != null"
}
]
}
],
"marks": [
{
"type": "path",
"from": {"data": "links"},
"encode": {
"enter": {
"path": {"field": "path"}
}
}
},
{
"type": "rect",
"from": {"data": "tree-boxes"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "symbol",
"from": {"data": "tree-circles"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "rect",
"from": {"data": "tree"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "text",
"from": {"data": "tree"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"text": {"field": "title"},
"x": {"field": "x"},
"y": {"field": "y"},
"dx": {"value":50},
"dy": {"value":13},
"align": {"value": "center"}
}
}
}
]
}
UPD: suppose, you would like to render different shapes for root and leaf nodes of your chart.
One way to achieve this will be to add two filter transformations based on your tree dataset and filter them accordingly:
{
"name": "tree-boxes",
"source": "tree", // grab the existing data
"transform": [
{
"type": "filter",
"expr": "datum.parent == null" // run it through a filter defined by expression
}
]
},
{
"name": "tree-circles",
"source": "tree",
"transform": [
{
"type": "filter",
"expr": "datum.parent != null"
}
]
}
then instead of rendering all marks as rect you'd want two different shapes for respective transformed datasets:
{
"type": "rect",
"from": {"data": "tree-boxes"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
},
{
"type": "symbol",
"from": {"data": "tree-circles"},
"encode": {
"enter": {
"stroke": {"value": "black"},
"width": {"value": 100},
"height": {"value": 20},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
}
You can refer to this solution - Working with trees which covers
Step 1 - Extracting Nodes from Tabular Data
Step 2 - Extracting Links from Stratified Node Data
Step 3 - How to bring them together
Step 4 - Add labels
Step 5 - Add Color
I have built an example which is the closest so far to what is described in this question. I based my solution on the accepted answer here, thanks to #timur.
Click here to view it in the Vega Editor.
It displays tree nodes as groups with multiple texts inside. It supports expanding & collapsing of nodes as well as switching between horizontal and vertical layout (which you can control by setting the default value of horizontal signal).
There are a few limitations I faced though:
Switching between horizontal & vertical layouts doesn't re-render all marks properly (raised an issue here). It works only if you manually change the default value of horizontal signal in the code
I couldn't find a way to properly collapse the root-node of the tree without manually collapsing nested nodes (posted a relevant question here)
Anyway, it should be useful to anyone looking for a way to build Org Chart kind of visualization with Vega - without having closer examples, I had to spend many hours to figure out all the caveats and fix almost all the issues.
I have the following JSON data:
{
"00100": {
"claim_id": "21",
"reference_no": "00100",
"distributor_name": "Standard Match",
"group_name": "A",
"month": "Jun2017",
"grand_total": "268.532",
"details": [
{
"claim_id": "65",
"product_name": "Lucky Match Type 1",
"price": "102.00",
"quantity": "02",
"net_amount": "179.52"
},
{
"claim_id": "66",
"product_name": "Lucky Match Type 2",
"price": "101.15",
"quantity": "01",
"net_amount": "89.012"
}
]
}
}
I want to get this data in Jquery Datatables, but i want to out put like this showing in below image:
i guess you can't since jquery datatable will not work with table inside table.
Sorry if i am wrong.
please go through this for further reference
https://datatables.net/blog/2011-06-19
May be you can.
I am trying to use water fall chart of fusioncharts API.
I want to disable hovering property of chart. Here you can see the on hovering it shows "Variable Costs, $-156K" on the "Variable Costs" column.
I am using some following configuration-
{
"chart": {
"caption": "Total Profit Calculation",
"subcaption": "Last month",
"yAxisname": "Amount (In USD)",
"numberprefix": "$",
"connectordashed": "1",
"sumlabel": "Total {br} Profit",
"positiveColor": "#6baa01",
"negativeColor": "#e44a00",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineDashed": "1",
"divLineDashLen": "1",
"usePlotGradientColor": "0",
"showplotborder": "0",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"showAlternateHGridColor": "0"
},
"data": [
{
"label": "Online sales",
"value": "420000"
},
{
"label": "Store Sales",
"value": "710000"
},
{
"label": "Total Sales",
"issum": "1"
},
{
"label": "Fixed Costs",
"value": "-250000"
},
{
"label": "Variable Costs",
"value": "-156000"
},
{
"label": "COGS",
"value": "-310000"
},
{
"label": "Promotion Costs",
"value": "-86000"
},
{
"label": "Total Costs",
"issum": "1",
"cumulative": "0"
}
]
}
You can also check the data and configuration at the following link.
Waterfall Chart
Please suggest fusioncharts API way(If possible) to disable on-hover property. Other way solutions are also welcome.
Just disable the hover event by adding css rule to the elements.
Jquery Solution
$('div#chart-container-1 rect').css('pointer-events','none');
CSS solution
div#chart-container-1 rect {
pointer-events: none !important;
}
Note: chart-container-1 was the id of the parent div which wraps the chart in the link you provied, you can change it to match your div.
!important is used in the css because the elements have inline styles for pointer-events and it takes priority in the rule, So override the inline property priority I have used !important
Also note pointer-events:none will remove all the mouse events including click, hover, mousein, mouseout etc..
Please, I need help with scale in FusionCharts.
Instead of (0$, 20$ ...) I want : A B C D where each letter has a significant value (A = 1, B = 2 , ...).
The people at the support told me that it's not supported natively. And I could do it with trendlines.
Anyone has tried with trendlines or any other solution ?
Thank you for your help.
You can consider using annotation feature. Here is fiddle which should help you to achieve what you want.
Hide the yAxis by
"showYAxisValues": "0",
Then create the axis through annotation.
For anyone looking for a solution, I've tried with annotations but it did'nt work for me because I was using a multi series bar chart.
So I've finally gone with Trendlines :
"trendlines": [
{
"line": [
{
"startvalue": "1",
"endvalue": "1",
"color": "#111111",
"displayvalue": "A",
"dashed": "0",
"thickness": "0",
"dashgap": "6",
"alpha": "100",
"showontop": "1"
},
{
"startvalue": "2",
"endvalue": "2",
"color": "#111111",
"displayvalue": "B",
"dashed": "0",
"thickness": "0",
"dashgap": "6",
"alpha": "100",
"showontop": "1"
}
]
}
]