Using Custom Data (external data)

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

1. Prepare the data

The data that you 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
}

The main data object should have the following properties:

groups: The names or full definition of the groups present in the formatted data

metrics: The names or full definition of the metrics present in the formatted data

data: The data following the ChartFactor data format. In the example above we assign the formattedData variable to this property. formattedData should be in the structure explained in the Data Format document. It is important that the names of the groups and metrics used in the formattedData array must match with those defined in the groups and metrics properties.

To control precisely how groups and metric values are rendered, you can define groups and metrics in more detail as specified in the Custom Metadata document. Example below:

const data = {
        groups: [
            {
                name: "Time",
                label: "Time",
                func: "MONTH",
                type: "TIME"
            },
        ],
        metrics: [
            {
                name: "volume",
                label: "ETF volume",
                type: "Number",
                displayFormat: "$ 0[.]0",
            },
            {
                name: "OECD - Total",
                label: "Consumer confidence index",
                func: "avg",
                hideFunction: true,
                type: "Number",
                displayFormat: "$ 0[.]0",
                position: "right"
            }
        ],
        data: newData
    };

2. 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:

Note

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() then the data from the query will be dropped in favor of the custom.