title: custom chart using google sheets data
body: <p>I'm new to this, so please bear with me :)</p>
  <p>I have a google sheet with columns: 'Name, A-Score,T-Score, R-Score, P-Score'</p>
  <p>Scores are numerical values from 0 to 20. This data needs to be converted to a special, but very simple graph which i don't think is available in the existing sheets charting options. I've tried to write some code (i.e assembled from many stack overflow answers) to construct the graph i need:</p>
  <p><a href="https://i.stack.imgur.com/ZfY34.png" rel="nofollow noreferrer">myLearningStyleDiagram</a></p>
  <p><a href="https://codepen.io/santayans/pen/gOLWGxJ" rel="nofollow noreferrer">myCodePenDraft</a></p>
  <p>Question:</p>
  <ol>
  <li><p>Have i missed something basic in the existing chart options that would let me graph this way?</p>
  <p>...if not, is this possible to do in sheets with google-scripts or extensions?</p>
  </li>
  <li><p>How could i go about efficiently creating individual charts (export to pngs) for a few hundred rows; perhaps by somehow reusing the code i've got so far.</p>
  </li>
  </ol>
  <p>Thanks so much!</p>
  <pre><code>//javascript
  //data from sheets
  var Name = &quot;santayan&quot;;
  var Activist = 12;
  var Theorist = 9;
  var Reflector = 14;
  var Pragmatist = 12;
  
  //set up canvas
  var canvas = document.getElementById(&quot;myCanvas&quot;);
  var ctx = canvas.getContext(&quot;2d&quot;);
  
  //set up click target
  var link = document.getElementById(&quot;link&quot;);
  
  //reset coordinates and white bg
  ctx.translate(200, 200);
  ctx.beginPath();
  ctx.rect(-200, -200, 400, 400);
  ctx.fillStyle = &quot;white&quot;;
  ctx.fill();
  
  //plot main graph
  ctx.lineCap = &quot;round&quot;;
  ctx.lineWidth = 5;
  ctx.strokeStyle = &quot;#806&quot;;
  
  ctx.beginPath();
  ctx.moveTo(Theorist * 10, 0);
  ctx.lineTo(0, Reflector * 10);
  ctx.lineTo(Activist * -10, 0);
  ctx.lineTo(0, Pragmatist * -10);
  ctx.closePath();
  ctx.stroke();
  
  //plot axes and labels
  ctx.strokeStyle = &quot;#d3d3d3&quot;;
  ctx.lineWidth = 1;
  ctx.moveTo(-200, 0);
  ctx.lineTo(200, 0);
  ctx.moveTo(0, -200);
  ctx.lineTo(0, 200);
  ctx.stroke();
  
  ctx.font = &quot;1em Helvetica&quot;;
  ctx.textAlign = &quot;right&quot;;
  ctx.fillStyle = &quot;#806&quot;;
  ctx.fillText(Name, 195, -185);
  ctx.font = &quot;.5em Helvetica&quot;;
  ctx.fillText(&quot;LEARNING STYLE&quot;, 195, -170);
  ctx.fillStyle = &quot;#000&quot;;
  ctx.textAlign = &quot;center&quot;;
  ctx.fillText(&quot;ACTIVIST&quot;, -170, 12);
  ctx.fillText(&quot;THEORIST&quot;, 170, -5);
  ctx.rotate(Math.PI / 2);
  ctx.fillText(&quot;PRAGMATIST&quot;, -165, 12);
  ctx.fillText(&quot;REFLECTOR&quot;, 170, -5);
  
  //click handler
  function downloadImage() {
    link.setAttribute(&quot;download&quot;, Name + &quot; LearningStyle.png&quot;);
    link.setAttribute(
      &quot;href&quot;,
      canvas.toDataURL(&quot;image/png&quot;).replace(&quot;image/png&quot;, &quot;image/octet-stream&quot;)
    );
  }
  
  //html
  &lt;div class=&quot;container&quot;&gt; &lt;a id=&quot;link&quot; OnClick=downloadImage()&gt;&lt;canvas id=&quot;myCanvas&quot; width=&quot;400&quot; height=&quot;400&quot; &lt;/canvas&gt;&lt;/a&gt; click on the image to download&lt;/div&gt;    
  //css
  a{cursor:pointer}body{font-family:Helvetica,Sans;font-size:.8em;text-align:right;background-color:#888;margin:0}.container{width:440px;height:460px;display:block;background-color:#aaa;margin:0 auto;padding:10px}canvas{box-sizing:border-box;background:#fff;padding:20px;margin:0 auto;border:1px solid grey;border-box:inner}
  </code></pre>