trueChart Knowledge Base Live Search

Search

Page tree

trueChart Help

Skip to end of metadata
Go to start of metadata
  1. Place a <div> (or some other container) or your site

  2. Style it with a non-zero width and height

  3. Give it a unique id

  4. Load the trueChart core files

  5. Do some initial configuration

  6. Create an instance, add data

  7. .show()

The code could look like this:

...
<div id='truechartcore' style='width:300px;height:300px'></div>
...
<script src="https://www.truechart.com/core/1.3.2/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>
  • No labels