Agfdhyk

To visualize your data in Data Studio you can use Java Script (beta): https://codelabs.developers.google.com/codelabs/community-visualization/#0

There is a how to which works, you need the following files to create diagrams:

myViz is created by command, which put together the myVizSource.js and the visualization helper library (dscc.min.js)

To create a simple bar chart you put in the myVizSource.js the following code:

// create and add the canvas

var canvasElement = document.createElement('canvas');

var ctx = canvasElement.getContext('2d');

canvasElement.id = 'myViz';

document.body.appendChild(canvasElement);



function transformStyleById(vizData){

  // parse the style object

  var styleById = {};



  for (let styleSection of vizData.config.style) {

    for (let styleElement of styleSection.elements) {

      styleById[styleElement.id] = {

        value: styleElement.value,

        defaultValue: styleElement.defaultValue

      };

    }

  }

  return styleById;

}



function drawViz(vizData) {

  // parse the data into a row of rows format

  var data = dscc.rowsByConfigId(vizData).DEFAULT;

  var ctx = canvasElement.getContext('2d');



  // clear the canvas.

  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);



  // set the canvas width and height

  ctx.canvas.width = dscc.getWidth() - 20;

  ctx.canvas.height = dscc.getHeight() - 100;



  var styleById = transformStyleById(vizData);



  // scale the bar width and max bar height to the canvas

  var barWidth = ctx.canvas.width / (data.length * 2);

  var maxBarHeight = ctx.canvas.height - 20;



  // vertical offset for bar text

  var textYOffset = 20;



  // fill the bars using the user-selected bar color or the default

  ctx.fillStyle = styleById.barColor.value.color || styleById.barColor.defaultValue;



  // obtain the maximum bar metric value for scaling purposes

  var metricMax = 0;

  data.forEach(function(row){

    metricMax = Math.max(metricMax, row['barMetric'][0]);

  })



  // draw bars

  // add dimension labels below bars

  // 'barDimension' and 'barMetric' come from the id defined in myViz.json

  data.forEach(function(row, i) {



    // calculates the height of the bar using the row value, maximum bar

    // height, and the maximum metric value calculated earlier

    var barHeight = Math.round(

      -1 * ((row['barMetric'][0] * maxBarHeight) / metricMax)

    );



    // calculates the x coordinate of the bar based on the width of the convas

    // and the width of the bar

    var barX = (ctx.canvas.width / data.length) * i + barWidth / 2;



    ctx.fillRect(barX, maxBarHeight, barWidth, barHeight);



    var barText = row['barDimension'][0];

    var textX = barX + barWidth / 4;

    var textY = maxBarHeight + textYOffset;



    ctx.fillText(barText, textX, textY);

  });

}



// subscribe to data and style changes.

dscc.subscribeToData(drawViz);

What I would like to do is to use Java Script examples of diagrams, sun burst diagrams e.g. Unfortunately i have no experience in Java Script. Is it possible to implement code like this: https://github.com/vasturiano/sunburst-chart/blob/master/src/sunburst.js into my myVizSource.js in a easy way?

It is possible to implement a wide variety of charts, including sunburst charts, using community visualizations. However, the feature as it stands right now is intended to help those who are familiar with JavaScript and visualization code to integrate that code into a Data Studio dashboard. The ease of implementing the visualization will depend a lot on the visualization library you choose to use.