DataBind Vimeo Data to the DevExpress Data Grid

Jerod Johnson
Jerod Johnson
Director, Technology Evangelism
Use the CData API Driver for ADO.NET with the DevExpress Windows Forms and Web controls to provide Vimeo data to a chart.

The CData API Driver for ADO.NET incorporates conventional ADO.NET data access components compatible with third-party controls. You can adhere to the standard ADO.NET data binding procedures to establish two-way access to real-time data through UI controls. This article will demonstrate the utilization of CData components for data binding with DevExpress UI Controls (Windows Forms and Web controls), specifically binding to a chart that visualizes live data.

Vimeo is a professional video hosting platform. The Vimeo API uses personal access tokens (bearer tokens) to enable secure access to video metadata, user information, channels, groups, categories, and related resources.

Using API Key Authentication

To authenticate to the Vimeo API, you will need to provide a personal access token. To obtain your access token:

  1. Log in to your Vimeo account at https://vimeo.com
  2. Navigate to https://developer.vimeo.com/apps
  3. Create a new app or select an existing app
  4. Under "Personal Access Tokens", click "Generate" to create a new token
  5. Select the required scopes: public and private for read access
  6. Copy the generated token

After obtaining your access token, set the following connection properties:

  • AuthScheme: Set this to APIKey.
  • APIKey: Set this to your Vimeo personal access token.

Example connection string

Profile=C:\profiles\Vimeo.apip;ProfileSettings='APIKey=your_personal_access_token';

Windows Forms Controls

The code below shows how to populate a DevExpress chart with Vimeo data. The APIDataAdapter binds to the Series property of the chart control. The Diagram property of the control defines the x- and y-axes as the column names.

using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\Vimeo.apip;ProfileSettings='APIKey=your_personal_access_token';")) {
  APIDataAdapter dataAdapter = new APIDataAdapter(
  "SELECT ,  FROM Videos WHERE UserUri = '/users/12345678'", connection);
  
  DataTable table = new DataTable();
  dataAdapter.Fill(table);
  DevExpress.XtraCharts.Series series = new DevExpress.XtraCharts.Series();
  chartControl1.Series.Add(series);
  series.DataSource = table;
  series.ValueDataMembers.AddRange(new string[] { "" });
  series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;
  series.ArgumentDataMember = "";
  series.ValueScaleType = DevExpress.XtraCharts.ScaleType.Numerical;
  chartControl1.Legend.Visibility = DevExpress.Utils.DefaultBoolean.False;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;                              
}

Web Controls

The code below shows how to populate a DevExpress Web control with Vimeo data. The APIDataAdapter binds to the Series property of the chart; the Diagram property defines the x- and y-axes as the column names.

using DevExpress.XtraCharts;

using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\Vimeo.apip;ProfileSettings='APIKey=your_personal_access_token';"))
{
  APIDataAdapter APIDataAdapter1 = new APIDataAdapter("SELECT ,  FROM Videos WHERE UserUri = '/users/12345678'", connection);
  DataTable table = new DataTable();
  APIDataAdapter1.Fill(table);
  DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar);
  WebChartControl1.Series.Add(series);
  series.DataSource = table;
  series.ValueDataMembers.AddRange(new string[] { "" });
  series.ArgumentScaleType = ScaleType.Qualitative;
  series.ArgumentDataMember = "";
  series.ValueScaleType = ScaleType.Numerical;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}

Ready to get started?

Connect to live data from Vimeo with the API Driver

Connect to Vimeo