saad735 saad735 - 3 months ago 11
JSON Question

how to define json for multi-line graph data

I have been trying to find out how to define the data for a multi-line graph in vega-lite but I can't get it to work. The examples show data for a csv file at a URL endpoint ( https://vega.github.io/vega-editor/?mode=vega-lite&spec=line_color&showEditor=1 ), but I want to view the data I define in a simple json.

Here is what I have for a single line graph:

var LineSpec = {
"description": "variation over time for",

"data": {
"values":
[
{"date": "2012-04-23T18:25:43.511Z","price": 10},
{"date": "2012-04-25T18:25:43.511Z","price": 7},
{"date": "2012-04-27T18:25:43.511Z","price": 4},
{"date": "2012-05-01T18:25:43.511Z","price": 1},
{"date": "2012-05-03T18:25:43.511Z","price": 2},
{"date": "2012-05-05T18:25:43.511Z","price": 6},
{"date": "2012-05-07T18:25:43.511Z","price": 8},
{"date": "2012-05-09T18:25:43.511Z","price": 4},
{"date": "2012-05-11T18:25:43.511Z","price": 7}
]
},
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
};


How do I modify "data" so as display a multiline graph? (and if possible display more useful information that undefined in the symbol table). Here is what I see right now:
Line graph with undefined symbol

Thank you!

Answer

You will have to add the symbol field to your data. I added the symbol field and symbols A and B. This data should render a multi-line graph with the two symbols in the legend:

{
  "description": "variation over time for",
  "data": {
    "values": [
      {"date": "2012-04-23T18:25:43.511Z","price": 10, "symbol": "A"},
      {"date": "2012-04-25T18:25:43.511Z","price": 7, "symbol": "B"},
      {"date": "2012-04-27T18:25:43.511Z","price": 4, "symbol": "A"},
      {"date": "2012-05-01T18:25:43.511Z","price": 1, "symbol": "B"},
      {"date": "2012-05-03T18:25:43.511Z","price": 2, "symbol": "A"},
      {"date": "2012-05-05T18:25:43.511Z","price": 6, "symbol": "B"},
      {"date": "2012-05-07T18:25:43.511Z","price": 8, "symbol": "A"},
      {"date": "2012-05-09T18:25:43.511Z","price": 4, "symbol": "B"},
      {"date": "2012-05-11T18:25:43.511Z","price": 7, "symbol": "A"}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"},
    "color": {"field": "symbol", "type": "nominal"}
  }
}