title: For loop to create Scatter chart with CanvasJs using Django data as input
body: <p>I found that I can create nice scatter plot with CanvasJS into my HTML templates (see the link: <a href="http://canvasjs.com/docs/charts/chart-types/html5-scatter-chart/" rel="nofollow noreferrer">http://canvasjs.com/docs/charts/chart-types/html5-scatter-chart/</a>)</p>
  
  <p>I am creating a website using Django and a MySQL database.
  In one of my tables (models) I have 3 fields VARCHAR containing different values:
   - the 1st field contains values for X axis.
   - The 2nd field contains values for Y axis.
   - The 3rd field contains one letter labels.</p>
  
  <p>Here is an example for one entry if it is not clear:</p>
  
  <p>1st field:</p>
  
  <pre><code>999.99;-89.01;-60.29;-145.83;-140.76;-148.24;-88.70;56.92;69.08;-121.37
  </code></pre>
  
  <p>2nd field:</p>
  
  <pre><code>143.12;146.51;143.73;177.58;121.68;116.45;-14.05;20.77;15.82;168.20
  </code></pre>
  
  <p>3rd field:</p>
  
  <pre><code>CPPEEECTTE
  </code></pre>
  
  <p>As you can see, values are separated by ";" in fields 1 and 2.
  there are 10 values in field 1, 10 values in field 2, and 10 corresponding  letter labels.
  All fields are 1 long string. </p>
  
  <p>So my question is simple, I don't know how to make a for loop in javascript so that those coordinates will be taken in the scatter chart. </p>
  
  <p>Here is the example of the canvasjs for scatter chart I want to obtain:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript"&gt;
    window.onload = function () {
      var chart = new CanvasJS.Chart("chartContainer",
      {
       title:{
        text: "Title of my scatter chart"
      },
  
      data: [
      {
       type: "scatter",
       dataPoints: [
  
       { x: 999.99, y: 143.12 },
       { x: -89.01, y: 146.51 },
       { x: -60.29, y: 143.73 },
       { x: -145.83, y: 177.58 },
       { x: -140.76, y: 121.68 },
       { x: -148.24, y: 116.45 }
       ]
     }
     ]
   });
  
  chart.render();
  }
  &lt;/script&gt;
  &lt;script type="text/javascript" src="/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="chartContainer" style="height: 300px; width: 100%;"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>All I want is to generate coordinates in dataPoints with a for loop. 
  The 3 fields will be 3 rows in a HTML table.
  The 3rd field will be used to associate a color to a letter. (Example: C = blue, P = green, E = yellow, T = red).</p>
  
  <p>I have absolutely no idea how to make that in javascript. 
  If someone is experienced in JS, I would really appreciate some help.</p>