title: Chartist.js Array with data
body: <p>I am creating a chart with Chartist.js. I'm getting json data with the Google embed API. I have a problem with this one. The array works with the values I give. But it does not work for data from json.</p>
  <p>my code :</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 TotalBrowser = [];
  var BrowserSeries = [];
  
  var oxyn = {
      queryAnalytics: function() {
          var id = '164690638';
          var expressions = [{
              expression: 'ga:hits'
          }];
          var dimension = [{
              name: 'ga:browser'
          }];
  
          oxyn.getReportQuery(id, '7daysago', 'today', expressions, dimension).then(function(response) {
              var formattedJson = JSON.stringify(response.result, null, 2);
              var data = JSON.parse(formattedJson);
              var i = 0;
              BrowserTotal = data.reports[0].data.totals[0].values[0];
              jQuery(data.reports[0].data.rows).each(function() {
                  if (i &lt;= 3) {
                      jQuery('#Browsers').append(browsericon[i] + this.dimensions[0]);
                      var percent = (parseInt(this.metrics[0].values[0]) / parseInt(BrowserTotal)) * 100;
                      BrowserSeries.push(Math.round(percent));
                      TotalBrowser.push(Math.round(percent) + '%');
                      i++;
                  }
              });
              demo.initChartist();
  
          });
      }
  }
  
  var demo = {
      initChartist: function() {
  
          var dataPreferences = {
              series: [
                  [BrowserSeries.join()]
              ]
          };
  
          var optionsPreferences = {
              donut: true,
              donutWidth: 40,
              startAngle: 0,
              total: 100,
              showLabel: false,
              axisX: {
                  showGrid: false
              }
          };
  
          Chartist.Pie('#chartPreferences', dataPreferences, optionsPreferences);
  
  
          Chartist.Pie('#chartPreferences', {
              labels: [TotalBrowser.join()],
              series: [BrowserSeries.join()]
          });
  
          console.log(BrowserSeries.join());
      }
  };</code></pre>
  </div>
  </div>
  </p>
  <p>it does not work that way. But if I write the code like this, it works.</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>Chartist.Pie('#chartPreferences', {
     labels: [TotalBrowser.join()],
     series: [30, 70]
   });</code></pre>
  </div>
  </div>
  </p>
  <p>and this is working.</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>Chartist.Pie('#chartPreferences', {
     labels: [TotalBrowser[0], TotalBrowser[1]],
     series: [BrowserSeries[0], BrowserSeries[1]]
  });</code></pre>
  </div>
  </div>
  </p>
  <p>console output</p>
  <blockquote>
  <p>console.log(BrowserSeries.join());</p>
  <p>30,70</p>
  </blockquote>
  <p><a href="http://jsonblob.com/f1d54c73-cca4-11e7-8281-b7ca4ea5fd51" rel="nofollow noreferrer">JSON Source</a></p>
  <p>It's a very silly problem.</p>