Converting a JSON Object array to string array for use with C3.js chart library

Question

I am currently in the middle of a personal project which involves creating a small site to display statistics on my music listening habits using the LastFM API.

I am trying to create a simple bar graph using C3.js (http://c3js.org/) which will display the play counts for my top 10 Most Listened To Artists.

Below is a JSFiddle of the function which creates the Bar Chart and shows the issue I am having:

http://jsfiddle.net/decodedcreative/pr18wkz6/

var lastfm = {};

lastfm.tracker = (function(){

	//Set up an object for DOM elements and data source
	var config = {
		getMostPopularArtistsURL: "http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json",
		user: "jimmersjukebox",
	};


	var setupLastFM = function(){
		createPopularArtistsChart();
	};


	var createPopularArtistsChart = function(){
		$.getJSON(config.getMostPopularArtistsURL,function(data){
			var artistData = data.topartists.artist,
			artists = $.map(artistData, function(artist) {
				return [[artist.name]];
			}),

			playcounts = $.map(artistData, function(playcount) {
				return [[playcount.playcount]];
			});

			playcountsArray = playcounts.slice(0,10);
			artistsArray = artists.slice(0,10);


			var popularArtists = c3.generate({
				bindto: '#popularArtists',
				data: {
					x: 'x',
					columns: [
						['playcount', playcountsArray],
						['x', artistsArray]
					],
					axes: {
						data: 'artists' // ADD
					},
					types: {
						playcount: 'bar'
					}
				},
				axis: {
					x: {
						type: 'category'
					},
				}
			});


		});
	};

	return{
		config: config,
		init: function(){
			setupLastFM();
		}
	};
})();
$(window).load(lastfm.tracker.init);

/*-- Chart --*/

.c3 svg {
  font: 10px sans-serif;
}
.c3 path, .c3 line {
  fill: none;
  stroke: #000;
}
.c3 text {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
  shape-rendering: crispEdges;
}

.c3-chart-arc path {
  stroke: #fff;

}
.c3-chart-arc text {
  fill: #fff;
  font-size: 13px;
}

/*-- Axis --*/

.c3-axis-x .tick {
}
.c3-axis-x-label {
}

.c3-axis-y .tick {
}
.c3-axis-y-label {
}

.c3-axis-y2 .tick {
}
.c3-axis-y2-label {
}

/*-- Grid --*/

.c3-grid line {
  stroke: #aaa;
}
.c3-grid text {
  fill: #aaa;
}
.c3-xgrid, .c3-ygrid {
  stroke-dasharray: 3 3;
}
.c3-xgrid-focus {
}

/*-- Text on Chart --*/

.c3-text {
}

.c3-text.c3-empty {
  fill: #808080;
  font-size: 2em;
}

/*-- Line --*/

.c3-line {
  stroke-width: 1px;
}
/*-- Point --*/

.c3-circle._expanded_ {
  stroke-width: 1px;
  stroke: white;
}
.c3-selected-circle {
  fill: white;
  stroke-width: 2px;
}

/*-- Bar --*/

.c3-bar {
  stroke-width: 0;
}
.c3-bar._expanded_ {
  fill-opacity: 0.75;
}

/*-- Arc --*/

.c3-chart-arcs-title {
  font-size: 1.3em;
}

/*-- Focus --*/

.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
  stroke-width: 2px;
}

/*-- Region --*/

.c3-region {
  fill: steelblue;
  fill-opacity: .1;
}

/*-- Brush --*/

.c3-brush .extent {
  fill-opacity: .1;
}

/*-- Select - Drag --*/

.c3-dragarea {
}

/*-- Legend --*/

.c3-legend-item {
  font-size: 12px;
}

.c3-legend-background {
  opacity: 0.75;
  fill: white;
  stroke: lightgray;
  stroke-width: 1
}

/*-- Tooltip --*/

.c3-tooltip {
  border-collapse:collapse;
  border-spacing:0;
  background-color:#fff;
  empty-cells:show;
  -webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
     -moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
          box-shadow: 7px 7px 12px -9px rgb(119,119,119);
  opacity: 0.9;
}
.c3-tooltip tr {
  border:1px solid #CCC;
}
.c3-tooltip th {
  background-color: #aaa;
  font-size:14px;
  padding:2px 5px;
  text-align:left;
  color:#FFF;
}
.c3-tooltip td {
  font-size:13px;
  padding: 3px 6px;
  background-color:#fff;
  border-left:1px dotted #999;
}
.c3-tooltip td > span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
}
.c3-tooltip td.value{
  text-align: right;
}

.c3-area {
  stroke-width: 0;
  opacity: 0.2;
}

.c3-chart-arcs .c3-chart-arcs-background {
  fill: #e0e0e0;
  stroke: none;
}
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
  fill: #000;
  font-size: 16px;
}
.c3-chart-arcs .c3-chart-arcs-gauge-max {
  fill: #777;
}
.c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #777;
}

.c3-chart-arc .c3-gauge-value {
  fill: #000;
  font-size: 28px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">       
            <div class="chart-container">
                <div id="popularArtists"></div>
            </div>
        </div>

The bar chart is not currently rendering as expected. I believe this is because the arrays of data used for the labels on the x axis and the bar heights themselves, are JSON object arrays rather than string arrays.

If anyone knows how I could convert the JSON object arrays into string arrays or could just give an example of using C3 with JSON data that would be great.

Thanks

James

Can you post up an example of the JSON data? As you should be able to render charts with C3 just using JSON data. Also, have you included the D3 library? — RemarkLima
– RemarkLima, Commented Oct 13, 2014 at 13:18
Hi RemarkLima. I've edited the original question to show the format of the data. Each array is basically an array of JSON objects with one attribute - value pair within each object. And yeah D3 library is included. — James Howell
– James Howell, Commented Oct 13, 2014 at 20:11

gramblestown · Accepted Answer · 2014-12-08 20:56:19Z

Updated JSFiddle here.

I just had the same issue! The problem lies with the fact that you're actually using nested arrays to try to populate the graph, and C3 (possibly D3 as well?) doesn't like that -- it wants just a single array with no sub-arrays. artistsArray is already an array, and the column declaration ['data1', artistsArray] is also an array as shown by the brackets, so that becomes ['data1', [3, 5, 4]]. Your datapoints become a second array within your declaration, and C3 doesn't know what to do with it.

To get around this, your creation of playcountsArray and artistsArray needs an extra step:

// Create the initial array of our datapoints.
    playcountsArray = playcounts.slice(0,10);
    artistsArray = artists.slice(0,10);

// Add the name of the column to the front of the array.
    playcountsArray.unshift('playcount');
    artistsArray.unshift('x');

So now, instead of an array with all of your datapoints and categories and no column name ([3, 5, 4]), you've got the column name at the front like a normal C3 column declaration would want (['data1', 3, 5, 4]). Then, in your graph creation, you just pass in your array:

columns: [
    playcountsArray,
    artistsArray
],

Note that we're not wrapping our individual column declarations in brackets like we usually would. We're just passing in the name of our array. If we did use brackets, we'd basically be saying [['x', 3, 5, 4]], nesting our array within another array, which, as we now know, C3 will chew us out on, haha.

Collectives™ on Stack Overflow

Converting a JSON Object array to string array for use with C3.js chart library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related