Using Own Data

To display data into our visuals, it is not 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 are going to inject should follow the structure below:

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 structure explained here. The important thing 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 :

cf.create()
.bars()
.element('chart')
.data(data)
.execute()

Then we obtain this:

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.