title: Load chart from JSON - Change format of JSON array
body: <p>I am using an example of a chart that gets the data from a JSON string. I am calculating the final JSON that the chart is going to use (called <code>data2</code>).</p>
  
  <p>The issue is that I cannot use the array (<code>data2</code>) when I build the chart in the javascript section. It works fine as shown below in the snippet. What I need to do is to replace the static JSON after the 23d line of the JS script with the array <code>data2</code>. Here is the basic snippet I started working on :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var json_data= {"headers":["Day","Hobby","Rate"],"rows":[["2017-10-16 00:00:00.0","beer",0.15824918844270675],["2017-10-16 00:00:00.0","push",0.10932372179344997],["2017-10-17 00:00:00.0","beer",0.16243707878321656],["2017-10-17 00:00:00.0","push",0.12342467710200489],["2017-10-18 00:00:00.0","beer",0.1701333117371019],["2017-10-18 00:00:00.0","push",0.13646302215695214],["2017-10-19 00:00:00.0","beer",0.1691911053818885],["2017-10-19 00:00:00.0","push",0.13529176147742863],["2017-10-20 00:00:00.0","push",0.12471145913670185],["2017-10-20 00:00:00.0","beer",0.16660114595720843],["2017-10-21 00:00:00.0","beer",0.1632134150509216],["2017-10-21 00:00:00.0","push",0.12104479125233003],["2017-10-22 00:00:00.0","push",0.11789599576807194],["2017-10-22 00:00:00.0","beer",0.15304531708971758],["2017-10-23 00:00:00.0","push",0.12068839662857922],["2017-10-23 00:00:00.0","beer",0.16865158102680616],["2017-10-24 00:00:00.0","beer",0.16968791058133556],["2017-10-24 00:00:00.0","push",0.12554102534428885],["2017-10-25 00:00:00.0","push",0.1277794674703459],["2017-10-25 00:00:00.0","beer",0.16345087602572633]]};
  
    var platform_data = json_data.rows; 
    var data2 = '[';
    var push_metric = 0;
    var beer_metric = 0;
    for (var i in platform_data)
   {
     var date = platform_data[i][0];
     if(platform_data[i][1] == 'push'){push_metric = (platform_data[i][2]*1000).toFixed(0)};
      if(platform_data[i][1] == 'beer'){beer_metric = (platform_data[i][2]*1000).toFixed(0)};
    data2+='{ day: "'+ date+'", '+ 'pushups: '+ push_metric +', '+ 'beers: '+ beer_metric+'},';
   }
    data2+= ']';      
  
  
  
  new Morris.Line({
    // ID of the element in which to draw the chart.
    element: "pushups",
    // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
    data: [{ day: "2017-10-16 00:00:00.0", pushups: 0, beers: 158},{ day: "2017-10-16 00:00:00.0", pushups: 109, beers: 158},{ day: "2017-10-17 00:00:00.0", pushups: 109, beers: 162},{ day: "2017-10-17 00:00:00.0", pushups: 123, beers: 162},{ day: "2017-10-18 00:00:00.0", pushups: 123, beers: 170},{ day: "2017-10-18 00:00:00.0", pushups: 136, beers: 170},{ day: "2017-10-19 00:00:00.0", pushups: 136, beers: 169},{ day: "2017-10-19 00:00:00.0", pushups: 135, beers: 169},{ day: "2017-10-20 00:00:00.0", pushups: 125, beers: 169},{ day: "2017-10-20 00:00:00.0", pushups: 125, beers: 167},{ day: "2017-10-21 00:00:00.0", pushups: 125, beers: 163},{ day: "2017-10-21 00:00:00.0", pushups: 121, beers: 163},{ day: "2017-10-22 00:00:00.0", pushups: 118, beers: 163},{ day: "2017-10-22 00:00:00.0", pushups: 118, beers: 153},{ day: "2017-10-23 00:00:00.0", pushups: 121, beers: 153},{ day: "2017-10-23 00:00:00.0", pushups: 121, beers: 169},{ day: "2017-10-24 00:00:00.0", pushups: 121, beers: 170},{ day: "2017-10-24 00:00:00.0", pushups: 126, beers: 170},{ day: "2017-10-25 00:00:00.0", pushups: 128, beers: 170},{ day: "2017-10-25 00:00:00.0", pushups: 128, beers: 163},],
    // The name of the data record attribute that contains x-values.
    xkey: "day",
    parseTime: false,
    // A list of names of data record attributes that contain y-values.
    ykeys: ["pushups", "beers"],
    // Labels for the ykeys -- will be displayed when you hover over the
    // chart.
    labels: ["Pushups", "Beers"],
    lineColors: ["#373651", "#E65A26"]
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #E0E2DD;
    font-family: helvetica, open-sans;
  }
  
  .graph-wrapper {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
  }
  
  .graph {
    height: 300px;
    width: 100%;
    max-width: 750px;
    padding: 25px;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://stevenlevithan.com/assets/misc/date.format.js"&gt;&lt;/script&gt;
  &lt;div class='graph-wrapper'&gt;
    &lt;div class='graph' id='pushups'&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I am focusing on the issue which is the format of the JSON array. More specifically, in the snippet below, I have both arrays. I only need to change the syntax (remove the quotes from each object) I guess. Unless there is another easier solution:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var json_data= {"headers":["Day","Hobby","Rate"],"rows":[["2017-10-16 00:00:00.0","beer",158],["2017-10-16 00:00:00.0","pushup",109],["2017-10-17 00:00:00.0","beer",162],["2017-10-17 00:00:00.0","pushup",123],["2017-10-18 00:00:00.0","beer",170],["2017-10-18 00:00:00.0","pushup",136],["2017-10-19 00:00:00.0","beer",169],["2017-10-19 00:00:00.0","pushup",135],]};
  
    var platform_data = json_data.rows; 
    var pushup_metric = 0;
    var beer_metric = 0;
   var data2 = [];
   
    
    for (var i in platform_data)
   {
     var date = platform_data[i][0];
     if(platform_data[i][1] == 'push'){pushup_metric = platform_data[i][1]};
      if(platform_data[i][1] == 'beer'){beer_metric = platform_data[i][2]};
      object = '{ day: "'+ date+'", '+ '"pushups": '+ pushup_metric +', '+ '"beers": '+ beer_metric+'}';
    data2.push(object);
   }
    
  
  var data = [{ day: "2017-10-16 00:00:00.0", pushups: 0, beers: 158},{ day: "2017-10-16 00:00:00.0", pushups: 109, beers: 158},{ day: "2017-10-17 00:00:00.0", pushups: 109, beers: 162},{ day: "2017-10-17 00:00:00.0", pushups: 123, beers: 162},{ day: "2017-10-18 00:00:00.0", pushups: 123, beers: 170},{ day: "2017-10-18 00:00:00.0", pushups: 136, beers: 170},{ day: "2017-10-19 00:00:00.0", pushups: 136, beers: 169},{ day: "2017-10-19 00:00:00.0", pushups: 135, beers: 169},];
  
    console.log(data);
   
  
   console.log(data2);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;div id='data2'&gt;&lt;/div&gt; &lt;br&gt;&lt;br&gt; 
  
  &lt;div id='data1'&gt;&lt;/div&gt; &lt;br&gt;&lt;br&gt;</code></pre>
  </div>
  </div>
  </p>