Contents
In praxis, you don’t want to define the data inside your chart tag in the website but load it from dynamic datasource, e.g. from a file on your webserver or let it be generated by a script.
You can use the “data” attribute of the chart tag to load data dynamically from your server. The following example loads the file /charts/data1.json from this server and displays it as line chart:
<chart data="/charts/data1.json"><!--{
type: line, width: 450, height: 250
}--></chart>
Like the data itself, you may also want to load the chart definition from your server. The “chart” attribute of the chart tag allows to define an URL for loading the chart JSON file. The next example loads the chart configuration from the file bar1.json and the data from the file data1.json and displays both as chart:
<chart data="/charts/data1.json" config="/charts/bar1.json"/>
Until now, each chart defined its own datasource. As an alternative, you can define one or more central datasources and use them in multiple charts simultaneously.
As central must be created with the <cube> tag. A cube tag contains a data definition as described before and a name defined by the name attribute. This example creates a shared datasource named “cube1” with the data from the upper example:
<cube name="cube1"><!--{
dimensions: [
[Mon, Tue, Wed, Thu, Fri, Sat, Sun],
[Product 1, Product 2, Product 3]
],
values: [
[10,20,30,80,70,50,35],
[5,10,15,20,25,30,35],
[1,2,3,4,5,6,7]
]
}--></cube>
After you defined the datasource, you can use it in any chart on the same web page.
<chart datasource="cube1"><!--{
type: line, width: 450, height: 250
}--></chart>
And like charts, cubes can also load the data from the server instead of defining it locally. This example loads the file data2 and creates a local datasource named “cube2” from it:
<cube name="cube2" data="/charts/data2.json"></cube>
This is, what the new cube looks like as bar-chart:
<chart datasource="cube2"><!--{
type: bar, width: 450, height: 250
}--></chart>
