将JSON数据解析为C3.js图表​​的数组

Question

I'm sending a json variable from django to C3.js in this format:

{
   datetime.date(2015, 5, 1): 22792461.479999978, 
   datetime.date(2015, 6, 1): 24807797.38999998, 
   datetime.date(2015, 7, 1): 25261456.609999962
}

I need to extract the values and compile them into an array ready for use by c3.js. Here's my script:

<script>
   {% include "croydon_dashboards/dashboard_includes/gb_locale.html" %}

   var row_value = {{ row_value }};
   var sum_list = [];

   for(var i in row_value)
      sum_list.push(row_value[i])

   sum_list = JSON.stringify(sum_list);

   var chart = c3.generate({
       data: {
          columns: [
              sum_list
          ],
          type: 'bar'
       },
        bar: {
           width: {
              ratio: 0.5
           }
       }
   });
</script>

Hard coding values into the chart works, so I know the c3.js is right, but there's something wrong with the way I'm building the array.

I know that there's an answer here: JSON Data doesn't show on c3.js bar chart

but I'm new to javascript and can't work out how to parse the json that I'm working with.

Answer 1

You do not need to JSON.stringify() your data to use it with c3.
But you may have to JSON.parse() it to make it look like this:

var row_value = {
   "2015-05-01": 22792461.479999978, 
   "2015-06-01": 24807797.38999998, 
   "2015-07-01": 25261456.609999962
};

And don't forget to add text label at the beginning of data array:

// This first value of array if the name of your data
 var sum_list = ['something'];

The rest of your code works.

 for(var i in row_value)
    sum_list.push(row_value[i])


 var chart = c3.generate({
     data: {
        columns: [
            sum_list
        ],
        type: 'bar'
     },
      bar: {
         width: {
            ratio: 0.5
         }
     }
 });

See this fiddle .