Build an app with TRUECHART Core
Place a
<div>(or some other container) or your siteStyle it with a non-zero
widthandheightGive it a unique
idLoad the TRUECHART Core files
Do some initial configuration
Create an instance, add data
.show()
The code could look like this:
...
<div id='truechartcore' style='width:300px;height:300px'></div>
...
<script src="https://www.truechart.com/core/2.3.0/index.js"></script>
<script>
// referencing the API in a local variable for quicker access
var TC_API = window['TrueChartCore_API'];
// setting config
TC_API.ConfigManager.setConfig({
documentLocation: "localhost",
documentName: "example",
documentTitle: document.title,
getServerId: sourceObject => sourceObject.element.id,
user: { username: "Me" }
});
// creating an trueChart instance inside an existing DIV
var tc = TC_API.createTrueChart(document.getElementById("truechartcore"));
// adding data
var data = tc.DataManager.addDataSource("My Data");
data.addDimension({
name: "Region",
type: "text"
}, ["Region 1", "Region 2", "Region 3"]);
data.addMeasure({
name: "Population",
type: "number"
}, [5600, 6800, 4200]);
// trigger show
tc.show();
</script>