# Vega lite graph with data from table query **URL:** \ **Category:** Help\ **Tags:** vega-lite\ **Created:** [December 8, 2018, 6:50pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290 "2018-12-08T18:50:43Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [December 8, 2018, 6:50pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/1 "2018-12-08T18:50:43Z")
Is there a good example making a custom graph block with data coming from a table query? I can’t get anything to display other that the x and y axis. ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [December 8, 2018, 7:22pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/2 "2018-12-08T19:22:50Z")
Are you just trying to make a time series graph? Can you provide some simple example data you’d like to display? ---
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [December 8, 2018, 7:40pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/3 "2018-12-08T19:40:34Z")
Can you see my test graph on dashboard Energy ? ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [December 10, 2018, 10:47pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/4 "2018-12-10T22:47:13Z")
I’m not a member of your organization so I can’t see the dashboard. I wouldn’t necessarily recommend adding me to the organization based on your data security needs. If you can paste a couple of example rows with fake data, I can use that to base a graph on. ---
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [December 11, 2018, 1:25am UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/5 "2018-12-11T01:25:33Z")
I have a very simple data table with just 3 records as follows: Record1: Xvalue=1, Yvalue=2 Record2: Xvalue=2, Yvalue=4 Record3: Xvalue=3, Yvalue=6 I can’t even get that to work. so I must be missing something completely. ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [December 11, 2018, 1:47am UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/6 "2018-12-11T01:47:08Z")
I created a Data Table from your example data. I named it “Entries”. ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/f1e4c4b64ea7bffb00b59e118b8023c3ef30584b.png) For the dashboard block data query, I selected the “Entries” data table and left the query fields blank, which means it will return all data from that Data Table. ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/162409fdfe1096e7bcd9c7f4b33f922b0d613c9c.png) Here’s the Vega-Lite configuration that will plot these as bar charts: ```nohighlight { "width": {{block.width}}, "height": {{block.height}}, "autosize": { "type": "fit", "contains": "padding" }, "config": { "axis": { "labelColor": "#888c95", "titleColor": "#888c95", "domain": false }, "legend": { "labelColor": "#888c95", "titleColor": "#888c95" }, "view": { "fill": "#414855", "stroke": "transparent" } }, "data": { "name": "data-table-0" }, "mark": "bar", "encoding": { "x": { "field": "xValue", "type": "quantitative" }, "y": { "field": "yValue", "type": "quantitative" } } } ``` The important sections are the `data.name` property, which should match the Query Name provided in the Queries section. In this example, I left it the default name, which is `data-table-0`. The next important fields are `encoding.x.field` and `encoding.y.field`. These should be set the column names in the Data Table, which are `xValue` and `yValue` in this example. The colors in the `config` section are used to make the graph look better on the dark theme. This configuration results in the following block: ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/8029f282eb6017123d896e7d0a2e261847378dbd.png) I’ve also sent you an invite an application in our Losant Examples organization where this is implemented. So feel free to jump in there and check it out. ---
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [December 11, 2018, 2:07am UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/7 "2018-12-11T02:07:02Z")
Thanks, I think I figured out what I did wrong. My real table had the Xvalue as a string (containing minutes) but the format was nn:nn:nn , so nothing showed up. My current source file I would like to use contains date (as: 12/10/2018) and time (as 21:05:00) as two separate fields. Do I have to combine it in to one date/time field before import to table or can it be combined within Vega? ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [December 11, 2018, 2:10am UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/8 "2018-12-11T02:10:10Z")
That’s a good question. Vega has a concept of transforms that are likely what you’d used to combine the fields, but I don’t have much experience with those. I’ll see if I can figure it out. ---
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [December 11, 2018, 2:22am UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/9 "2018-12-11T02:22:12Z")
If not, how should the time stamp be formatted for a time series data point? ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [December 11, 2018, 2:26am UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/10 "2018-12-11T02:26:13Z")
Vega-Lite will understand dates in [ISO format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse): > **[Time Unit](https://vega.github.io/vega-lite/docs/timeunit.html#input)** > > Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple... Generally I prefer the simplified ISO format, which is also what Losant returns from time-series queries: ```auto 2011-10-10T14:48:00 ``` ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [December 11, 2018, 2:42am UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/11 "2018-12-11T02:42:15Z")
I got it kind of working. Since the date format “MM/DD/YYYY” can’t directly be parse, you can’t coerce it easily into a date, which means you lose some functionality. If you can reformat the date before storing them, things will be much easier. Anyways, here’s a transform that simply combines the date and time columns into a single string and uses that as the X axis. First, here the Data Table: ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/e64114bf3fd2df5d7e3fc9fa2322429f455b8b1c.png) Here’s the config: ```nohighlight { "width": {{block.width}}, "height": {{block.height}}, "autosize": { "type": "fit", "contains": "padding" }, "config": { "axis": { "labelColor": "#888c95", "titleColor": "#888c95", "domain": false }, "legend": { "labelColor": "#888c95", "titleColor": "#888c95" }, "view": { "fill": "#414855", "stroke": "transparent" } }, "data": { "name": "data-table-0" }, "mark": "bar", "transform": [ {"calculate": "datum.date + ' ' + datum.time", "as": "datetime"} ], "encoding": { "x": { "field": "datetime", "type": "ordinal" }, "y": { "field": "value", "type": "quantitative" } } } ``` Here’s the resulting graph: ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/1X/8327790dd6a0bd88c883ece579825b597f9995b4.png) ---
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [December 11, 2018, 10:03am UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/12 "2018-12-11T10:03:32Z")
Thank you so much for your late hour support. I got it show pretty good now. Now to the next hurdle. My imported table data has about 20 values sampled every 2 Seconds. Dashboards graphs is able to show a graph for about 1.5 hours, but forward/rewinding doesn’t seem to work. Do I have control over that? (Time stamps in table are from November) ---
**Author:** ![Brandon\_Cannaday](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/brandon_cannaday/32/14_2.png) [@Brandon\_Cannaday](https://forums.losant.com/u/Brandon_Cannaday)\ **Post date:** [December 11, 2018, 5:13pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/13 "2018-12-11T17:13:09Z")
You can kind of control that. In the Vega configuration, you have access to `{{ block.time }}`, which will be the time the dashboard is set to, so if you use the rewind control, that variable will update. You can combine that with a [filter transform](https://vega.github.io/vega-lite/docs/filter.html) to only show data from that time minus 1.5 hours. ---
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [December 12, 2018, 5:12pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/14 "2018-12-12T17:12:15Z")
ok, so any tim graph by default is limited to 1.5 hours? or number of data points? ---
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [December 27, 2018, 5:32pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/15 "2018-12-27T17:32:16Z")
I just added another field called “yValue2” that would contain a second series of data point. I’m struggling being able to show both lines in the same graph. ---
**Author:** ![Dylan\_Schuster](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/dylan_schuster/32/2850_2.png) [@Dylan\_Schuster](https://forums.losant.com/u/Dylan_Schuster)\ **Post date:** [December 28, 2018, 2:58pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/16 "2018-12-28T14:58:31Z")
[Here is a post](https://forums.losant.com/t/vega-lite-custom-charts/1158/11?u=dylan_schuster) where I helped another user do something similar in the Vega-Lite chart - combining two data sets into one. ---
**Author:** ![Lars\_Andersson](https://avatars.discourse-cdn.com/v4/letter/l/f05b48/32.png) [@Lars\_Andersson](https://forums.losant.com/u/Lars_Andersson)\ **Post date:** [December 28, 2018, 4:01pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/17 "2018-12-28T16:01:53Z")
Thanks. I got it to work using a layered graph. Not sure when I should use layered vs transform? ---
**Author:** ![Dylan\_Schuster](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/dylan_schuster/32/2850_2.png) [@Dylan\_Schuster](https://forums.losant.com/u/Dylan_Schuster)\ **Post date:** [December 28, 2018, 7:02pm UTC](https://forums.losant.com/t/vega-lite-graph-with-data-from-table-query/1290/18 "2018-12-28T19:02:17Z")
I guess the example I sent you would be better for comparing two values from two different data segments; in your case, if you want to display two separate lines / bars / etc. inside one dashboard block, then yes, the layered graph would be the way to go.