Twitter Bootstrap Question posted in

Chart.js building dynamic charts, JSON data parsing issue-Twitter bootstrap

I’m building a dynamically generated graphs using , , , & .

All the data is within the file and I use Mustache as templating engine to display each item.
Building the graphs dynamically from .

The issue I have is that the dataset that’s passed from into the charts object is rendered as one element, basically it’s treated as string.

I’ve further used split function to separate each value but still when I log the data, I see the numbers are wrapped within quotes!

Not sure how I can get rid of the quotes and/or how to pass the correct data.

$.ajax({
  type: 'get',
  url: "/data/portfolio.json",
  dataType: 'json',
  success: function(data) {
    $(data.portfolio).each(function(index, value) {
      addCharts(value);
      renderMyCharts(value.chartLabels, value.chartData, value.order);
    })
  }
});

JSON 

{
  "portfolio": [{
    "title": "MesoDoc 411",
    "description": "",
    "link": "http://www.mesodoc411.com",
    "image": "/images/portfolio/mesodoc.png",
    "url": "/portfolio/",
    "order": "30",
    "chartLabels": "'HTML5', 'CSS' ",
    "chartData": "30 99"
  }]
}

JavaScript

function renderMyCharts(chartLabels, chartData, order) {
  // This function grabs the parameters from the JSON File
  // parses the chart data per Project
  var ctx = document.getElementById("myChart" + order);
  console.log(ctx);
  var kChart = "myChart" + order;

  console.log(kChart);

  console.log("passed chartLabels " + chartLabels);
  console.log("passed chartData " + chartData);
  console.log("Data type is : " + typeof chartData);

  var res = chartData.split(" ");

  console.log("string splitted  " + res);
  console.log("Data type is : " + typeof res);
  var kChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: [chartLabels],
      datasets: [{
        label: 'Techs  ',
        data: [res],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      legend: {
        display: true,
        labels: {
          fontColor: 'rgb(255, 99, 132)'
        }
      }

    }
  });
  console.log(kChart.data);
}

In this code if I pass 2 values manually to data like data: [76, 12] the chart displays properly, but .data: [res] does NOT, in console I see: 

data:Array(1)
0:Array(2)
0:"30"
1:"99"
length:2

But it should: 

data:Array(1)
    0:Array(2)
    0:30
    1:99
    length:2

Any suggestions?

Thanks in advance.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 
    data: res.map(function(x) {return x * 1;})

    did the trick ! Thanks Danny !


  2. 0

    You could use Array#map.

    var chartData = "30 99";
var res = chartData.split(" ");
console.log("Before:");
console.log(res);

console.log("After:");
console.log(res.map(function(x) {return x * 1;}));
    .as-console-wrapper {
  position: relative;
  top: 0!important;
}
    var chartData = "30, 99";
var res = chartData.split(", ");
console.log("Before:");
console.log(res);

console.log("After:");
console.log(res.map(function(x) {return x * 1;}));
    .as-console-wrapper {
  position: relative;
  top: 0!important;
}

    You need to use:

    var kChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: [chartLabels],
      datasets: [{
        label: 'Techs  ',
        data: data: res.map(function(x) {return x * 1;}),
    Login or Signup to reply.
  3. 0

    The point of data formats such as JSON, XML, etc is that you don’t have to write so much custom code for parsing/serialising data. In that sense you’re not using JSON fully. I don’t know exactly what your situation is and whether you have control of the JSON structure. If not, you’ll just have to use Danny’s answer or something equivalent. If you do, change it to this:

    "chartData": [30, 99]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search