CODEWITHSUNDEEP
javascriptgoogle-apps-scriptgoogle-sheetschartsgoogle-visualization
Michel Penke
Michel Penke

Reputation: 15

How to make a line chart dashed which gets updated with Google Apps Script?

I have a chart in Google Sheets that gets updated with Google Apps Script when a button is hit. Here for example, the color of the lines change when the script is activated.

function change() {

var spreadsheet = SpreadsheetApp.getActive();
var sheet = spreadsheet.getSheetByName("sheet");

var chart = sheet.getCharts()[0];

chart = chart.modify()
    .setOption('colors', ['#3465a4', '#A2BEE2', '#76a5af', '#B2CCD2'])
          .build();
sheet.updateChart(chart);

}

But I fail to implement a switch to a dashed line - and back again to a non-dashed line. It needs to be done via script, not manually.

I think this might be achieved with the 'security' role and 'uncertainty' attribute as it is documented here: https://developers.google.com/chart/interactive/docs/roles?hl=de#stylerole or with the lineDashStyle documented here: https://developers.google.com/apps-script/chart-configuration-options?hl=de#line-config-options

chart = chart.modify()
     .setOption('lineDashStyle', [4,4]) 
          .build();
sheet.updateChart(chart);

But I fail to make it work.

Upvotes: 1

Views: 584

Answers (1)

Tanaike
Tanaike

Reputation: 201683

I believe your goal is as follows.

  • You want to modify the existing chart as the line colors of ['#3465a4', '#A2BEE2', '#76a5af', '#B2CCD2'] and the dashed lines.

In this case, how about the following modification?

Modified script:

From:

chart = chart.modify()
    .setOption('colors', ['#3465a4', '#A2BEE2', '#76a5af', '#B2CCD2'])
          .build();
sheet.updateChart(chart);

To:

chart = chart.modify()
  .setOption('colors', ['#3465a4', '#A2BEE2', '#76a5af', '#B2CCD2'])
  .setOption('series', {
    0: { lineDashType: 'mediumDash' },
    1: { lineDashType: 'mediumDash' },
    2: { lineDashType: 'mediumDash' },
    3: { lineDashType: 'mediumDash' },
  })
  .build();
sheet.updateChart(chart);

Testing:

When this script is run to a sample chart, the following result is obtained.

From:

enter image description here

To:

enter image description here

Note:

  • By this, 4 lines are changed to the dashed line. In this case, it seems that there are the following 6 patterns.
    • solid, dot, mediumDash, mediumDashDot, longDash, longDashDot
  • Also, you can use .setOption('series.0.lineDashType', 'mediumDash').

Upvotes: 0

Related Questions