DataBind Spotify Data to the DevExpress Data Grid

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.

Using OAuth Authentication

Spotify uses OAuth 2.0 for authentication. You will need to create an application in the Spotify Developer Dashboard to obtain your client credentials.

Setting Up Your Spotify Application

1. Visit the Spotify Developer Dashboard.
2. Log in with your Spotify account and click Create app.
3. Provide an app name, description, and set a Redirect URI (e.g.,

   http://localhost:33333

   for desktop applications).
4. Copy your Client ID and Client Secret from the app settings.

Connection Properties

After setting the following connection properties, you are ready to connect:

• AuthScheme: Set this to OAuth.
• InitiateOAuth: Set this to GETANDREFRESH. You can use InitiateOAuth to manage the process to obtain the OAuthAccessToken.
• OAuthClientId: Set this to your Spotify application's Client ID.
• OAuthClientSecret: Set this to your Spotify application's Client Secret.
• Scope: Set this to the required OAuth scopes (space-separated). The default includes all read scopes needed for the tables in this profile.
• CallbackURL: Set this to the Redirect URI configured in your Spotify application (e.g., http://localhost:33333).

Example Connection String

Profile=C:\profiles\Spotify.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackURL=http://localhost:33333;

Available OAuth Scopes

• user-read-private: Read access to user's subscription details and explicit content settings.
• user-read-email: Read access to user's email address.
• user-library-read: Read access to a user's saved tracks, albums, episodes, shows, and audiobooks.
• playlist-read-private: Read access to user's private playlists.
• playlist-read-collaborative: Read access to collaborative playlists the user follows.
• user-follow-read: Read access to the list of artists the current user follows.
• user-read-playback-state: Read access to a user's player state (device, current track, progress).
• user-read-currently-playing: Read access to a user's currently playing content.
• user-read-playback-history: Read access to a user's recently played tracks.
• user-top-read: Read access to a user's top artists and tracks.

Windows Forms Controls

The code below shows how to populate a DevExpress chart with Spotify 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\Spotify.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackURL=http://localhost:33333;")) {
  APIDataAdapter dataAdapter = new APIDataAdapter(
  "SELECT ,  FROM Albums WHERE Id = '4aawyAB9vmqN3uQ7FjRGTy'", 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 Spotify 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\Spotify.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackURL=http://localhost:33333;"))
{
  APIDataAdapter APIDataAdapter1 = new APIDataAdapter("SELECT ,  FROM Albums WHERE Id = '4aawyAB9vmqN3uQ7FjRGTy'", 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;
}