Configure a donut chart

Updated at:

A donut chart is a pie chart with a hollow center that displays a total value or other key information.

Prerequisites

Overview

image

  1. Query and analyze: Retrieve, aggregate, and generate statistics from logs in the console.

  2. Configure a donut chart: Select the donut chart type, configure chart settings, and add the chart to your dashboard.

Step 1: Query and analyze

  1. Log on to the Simple Log Service console. In the Projects section, click the project you want.

    image

  2. In the navigation pane on the left, click Log Storage. In the Logstores list, click the target Logstore.

  3. Enter the following query statement to calculate page views (PVs) by browser type, and click Search & Analyze.

    * | select count(1) as pv, case when http_user_agent like '%Chrome%' then 'Chrome' when http_user_agent like '%Firefox%' then 'Firefox' when http_user_agent like '%Safari%' then 'Safari' else 'unKnown' end as http_user_agent  group by case when http_user_agent like '%Chrome%' then 'Chrome' when http_user_agent like '%Firefox%' then 'Firefox' when http_user_agent like '%Safari%' then 'Safari' else 'unKnown' end order by pv desc limit 10

Step 2: Configure a donut chart

  1. In the navigation pane on the left, choose Dashboard > Dashboards. In the Dashboard list, click the target dashboard. In the upper-right corner of the dashboard, click Edit and then choose Add > Add Chart.

  2. On the right side of the page, choose General Configurations > Chart Type > image. On the left side, configure the time range, Logstore, and query statement. Then, click Apply at the top of the page to preview the chart.

    • General Configurations > Pie Chart Configurations > Pie Chart Type: Select Donut Chart.

    • General Configurations > Pie Chart Configurations > Scale Text Format: Select Percentage to display values as a percentage, such as 1.98%.

    • General Configurations > Pie Chart Configurations > Show Scale Text: Enable this option to display value labels on the chart.

    This query uses CASE WHEN to classify http_user_agent into browser types (Chrome, Safari, Firefox) and counts PVs for each. Select website_log from Logstore (SQL) as the data source and set the time range to Last 15 Minutes.