Skip to content

Using Own Data

To display data into our visuals, is not strictly required to have a set up with one of the Data Providers supported by ChartFactor, or perhaps we do have the set up, but we  need to process the data obtained from a previous query before displaying it  or we just want to use our own data from somewhere else, like an external Rest API, a JSON file or any other. In those cases we can use almost any of the visualizations provided by ChartFactor to inject our own data to it.

Prepare the data

The pre-requisite is to have our data ready to be injected into the visual. The data that we're going to inject will be like this:

 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
var formattedData = [
{
    "group":["Peugeot"],
    "current":{
        "metrics":{
            "Price":8000,
            "Speed": 150
        }
    }
},
{
    "group":["Renault"],
    "current":{
        "metrics":{
        "Price": 9000,
        "Speed": 200
        }
    }
}
];

var data = {
    groups:["Brand Name"],
    metrics:["Price","Speed"],
    data: formattedData
}

formattedData _should be in the format explained here. The important thing here is that the names of the metrics used in the _formattedData array must match with those used in the metrics array in the data variable.

Create an empty visual and inject the data

Since we don't need any providers, we'll create our empty visual and will inject the data like this :

1
2
3
4
5
cf.create()
.bars()
.element('chart')
.data(data)
.execute()

Then we obtain this:

CD1

Custom data replaces queried data

Custom data will always have priority over queried data. This means that if a visual is rendering, or is going to render data from a previous query using .groupby(), metrics(), _etc, and then custom data is injected to that same visual with .data(). _The data from the query will be dropped in favor of the custom.