GET STARTED

Adding charts to your application is as easy as creating a Chart control and connecting it to a data source. This demo shows the line and pie chart types. Also available: bar and scatter plots, with more coming soon.

Charts are rendered client-side and can be updated dynamically from new data with one line of code.

The Code

Line chart:

var chart = new ChartControl({
  id: "Chart1",
  width: 800,
  height: 800,
  dataSource: database.getTable("bankdata"),
  title: "Factors Affecting Reserve Balances, 1986 - 2011",
  subtitle: "Source: Federal Reserve Bank of St. Louis",
  series: [{
    valueField: "TOTBORR"
  },{
    valueField: "WCURCIR"
  },{
    valueField: "WRESBAL"
  }],
  chartType: Springbase.Charts.ChartType.LINE
});
page.detail[0].addControl(chart);

Pie chart:

var chart = new ChartControl({
  id: "Chart2",
  width: 800,
  height: 800,
  left: 900,
  dataSource: database.getQuery("qryBrowserData"),
  title: "Browser Market Share, 2011 vs. 2008",
  subtitle: "Source: StatCounter",
  chartType: Springbase.Charts.ChartType.PIE
});
page.detail[0].addControl(chart);

qryBrowserData:

select Browser, "July 2011", "July 2008" from BrowserData