All Products
Search
Document Center

Simple Log Service:Create a line chart with multiple y-axes

Last Updated:Apr 26, 2024

If you want to display different types of data or different scales of data in a line chart, you can add multiple y-axes to the line chart. This topic describes how to create a line chart with multiple y-axes.

Prerequisites

Resource information and sample data

Company A stores the access logs of their website in a Logstore named website_log.

  • Resource information

    • Project: test-demo

    • Logstore: website_log

    • Dashboard: website

  • Sample data 日志样例

Create a line chart with multiple y-axes for a query statement

In this example, the number of requests that are sent from the China (Shanghai) region per minute and the number of requests that are sent from the China (Hangzhou) region per minute are displayed in a line chart.

  1. Log on to the Simple Log Service console.

  2. Go to the page on which you can create a chart.

    1. In the Projects section, click the project that you want to manage.

    2. In the left-side navigation pane, choose Dashboard > Dashboards.

    3. In the Dashboard list, click the dashboard that you want to manage.

    4. In the upper-right corner of the dashboard page, click Edit.

    5. Choose Add > Add Chart.image

    6. In edit mode, choose General Configurations > 线图pro.

  3. Configure the parameters on the Search & Analysis tab.

    Add the following query statement. For more information, see Query and analysis.

    * | select __time__ - __time__ % 60 as time, count_if(region='cn-shanghai') AS count1, count_if(region='cn-hangzhou') AS count2 GROUP BY time order by time

    多Y轴线图

    In the Query and Analysis Configurations section of the General Configurations tab, set the Axis Y Field parameter to count1 and count2. After you configure the parameters, the line chart displays the number of requests that are sent from the China (Shanghai) region and the number of requests that are sent from the China (Hangzhou) region and the trends of the requests. The blue line indicates the trend of requests that are sent from the China (Shanghai) region and the green line indicates the trend of requests that are sent from the China (Hangzhou) region.

    The following figure shows that the number of requests sent from the China (Shanghai) region and the number of requests sent from the China (Hangzhou) region significantly differ. As a result, the trend of requests that are sent from the China (Shanghai) region is not obvious because the two trends share the same y-axis. In this case, you can configure the parameters on the Field Configuration tab to add a second y-axis to the right of the line chart. The second y-axis indicates the number of requests that are sent from the China (Shanghai) region. 多Y轴线图

  4. Configure the parameters on the Field Configuration tab.

    On the Field Configuration tab, add a y-axis for the count1 column. For more information, see Field Configuration. 多Y轴线图

    After you configure the parameters, the line chart displays two y-axes that have different scales. The left y-axis indicates the number of requests that are sent from the China (Hangzhou) region and the right y-axis indicates the number of requests that are sent from the China (Shanghai) region. 双Y轴线图

  5. Click OK to save the line chart.

  6. Click Save to save the dashboard.

Create a line chart with multiple y-axes for two query statements

In this example, the number of successful requests per minute and the number of failed requests per minute are displayed in a line chart.

  1. Log on to the Simple Log Service console.

  2. Go to the page on which you can create a chart.

    1. In the Projects section, click the project that you want to manage.

    2. In the left-side navigation pane, choose Dashboard > Dashboards.

    3. In the Dashboard list, click the dashboard that you want to manage.

    4. In the upper-right corner of the dashboard page, click Edit.

    5. Choose Add > Add Chart.image

    6. In edit mode, choose General Configurations > 线图pro.

  3. Configure the parameters on the Search & Analysis tab.

    Add the following query statements. For more information, see Query and analysis.

    • Query Statement A

      Count the number of successful requests per minute.

      status in [200 299] | SELECT __time__-__time__ % 60 AS Time, count(1) AS OK GROUP BY Time ORDER BY Time LIMIT 1000
    • Query Statement B

      Count the number of failed requests per minute.

      NOT status in [200 299] | SELECT __time__-__time__ % 60 AS Time, count(1) AS ERROR, status GROUP BY Time, status ORDER BY Time LIMIT 1000

      多Y轴线图

    The system displays the results of the two query statements in a line chart. You can view the trends of successful and failed requests. The blue line indicates the trend of successful requests and the green line indicates the trend of failed requests.

    The following figure shows that the numbers of successful and failed requests significantly differ. As a result, the trend of failed requests is not obvious because the two trends share the same y-axis. In this case, you can configure the parameters on the Field Configuration tab to add a second y-axis to the right of the line chart. The second y-axis indicates the number of failed requests.

    多Y轴线图

  4. Configure the parameters on the Field Configuration tab.

    On the Field Configuration tab, add a y-axis for the results of Query Statement B. For more information, see Field Configuration. 多Y轴线图

    After you configure the parameters, the line chart displays two y-axes that have different scales. The left y-axis indicates the number of successful requests and the right y-axis indicates the number of failed requests. 多Y轴线图

  5. Click OK to save the line chart.

  6. Click Save to save the dashboard.

Create a line chart with multiple y-axes for three query statements

In this example, the numbers of requests by request duration within a minute are displayed in a line chart.

  1. Log on to the Simple Log Service console.

  2. Go to the page on which you can create a chart.

    1. In the Projects section, click the project that you want to manage.

    2. In the left-side navigation pane, choose Dashboard > Dashboards.

    3. In the Dashboard list, click the dashboard that you want to manage.

    4. In the upper-right corner of the dashboard page, click Edit.

    5. Choose Add > Add Chart.image

    6. In edit mode, choose General Configurations > 线图pro.

  3. Configure the parameters on the Search & Analysis tab.

    Add the following query statements. For more information, see Query and analysis.

    • Query Statement A

      Count the number of requests whose duration ranges from 10 to 50 seconds.

      request_time in [10 50) | SELECT __time__-__time__ % 60 AS Time, count(1) AS count1, request_time GROUP BY Time, request_time ORDER BY Time LIMIT 1000
    • Query Statement B

      Count the number of requests whose duration ranges from 50 to 100 seconds.

      request_time in [50 100) | SELECT __time__-__time__ % 60 AS Time, count(1) AS count2, request_time GROUP BY Time, request_time ORDER BY Time LIMIT 1000
    • Query Statement C

      Count the number of requests whose duration is longer than 100 seconds.

      request_time >= 100 | SELECT __time__-__time__ % 60 AS Time, count(1) AS count3, request_time GROUP BY Time, request_time ORDER BY Time LIMIT 1000

    多Y轴线图

    The system displays the results of the three query statements in a line chart. You can view the trends of requests by request duration. The blue line indicates the trend of requests whose duration ranges from 10 to 50 seconds, the green line indicates the trend of requests whose duration ranges from 50 to 100 seconds, and the yellow line indicates the trend of requests whose duration is longer than 100 seconds.

    The following figure shows that the numbers of requests by request duration significantly differ. As a result, the trends of count2 and count3 are not obvious because the three trends share the same y-axis. In this case, you can configure the parameters on the Field Configuration tab to add two y-axes to the right of the line chart.

    多Y轴线图

  4. Configure the parameters on the Field Configuration tab.

    On the Field Configuration tab, configure the parameters to add two y-axes. For more information, see Field Configuration.

    • Add a y-axis for the results of Query Statement B.

    • Add a y-axis for the results of Query Statement C.

    Note

    If you add two or more y-axes on the same side, you must configure an ID for each y-axis.

    多Y轴线图

    After you configure the parameters, the line chart displays three y-axes that have different scales. The three y-axes indicate the numbers of requests by request duration. 多Y轴线图

  5. Click OK to save the line chart.

  6. Click Save to save the dashboard.