We Keep Coding

Two chart forming instead of one chart

I am making a doughnut chart using canvas js. I am using a custom js code where I am taking a response from XML and then pointing the data points
Here when I am changing the type of chart to "line" the graph is behaving as it should but when I am changing the chart type to “pie” or “doughnut” so now instead of one chart it is giving me two charts. How it working could someone please through a light?
My code is
$scope.loadChartValue = function (data, scopes) {
scopes.data_id = [];
scopes.legend_text = "";
scopes.inner_chart_data = [];
for (var i = 0; i <= data.length; i++) {
var arrayvalue = data[0].data[i]._attr;
if (existsInArray(scopes.data_id, arrayvalue.label._value) == false) {
scopes.data_id.push(arrayvalue.label._value);
}
}
for (var i = 0; i < scopes.data_id.length; i++) {
scopes.inner_chart_data = [];
for (var j = 0; j <= data.length; j++) {
if (data[0].data[j]._attr.label._value == scopes.data_id[i]) {
scopes.inner_chart_data.push({ label: data[0].data[j]._attr.label._value, y: data[0].data[j]._attr.value._value });
scopes.legend_text = data[0].data[j]._attr.label._value;
}
}
scopes.dataset.push(
{
type: "doughnut",
markerType: "circle",
markerSize: scopes.markersize,
color: scopes.chart_color_value[i],
showInLegend: true,
name: scopes.legend_text,
legendText: scopes.legend_text,
dataPoints: scopes.inner_chart_data
}
);
}
scopes.data_length = data.length / scopes.data_id.length;
}

Line, Column and other chart-types supports multi-series whereas pie/doughnut is single series charts.
You are creating multiple data-series instead of 1 data-series with multiple dataPoints. Creating single series with multiple dataPoints instead of multiple dataSeries will work fine.

C3.js "Uncaught Error: Source data is missing a component at (1,844)!"

I am using C3.js and Electron (Atom Shell) to make a desktop application for data visualization. I am having trouble to feed my data into C3. I have a DataArray that contains all the coordinates: DataAray = [ [x1,y1] , [x2,y2] , [x3,y3],...].
I use the following code to break it into an xData array and a yData array:
xData = [];
yData=[];
xData.push('data1_x');
yData.push('data1');
for (var i = 0; i < DataArray.length ; i++){
xData.push (DataArray[i][0]);
yData.push (DataArray[i][1]);
}
var chart = c3.generate({
bindto: '#chart',
data: {
xs: {
data1: 'data1_x',
},
columns: [
x,
y
],
type: 'scatter'
}
});
but when I run the application, I get this error:
"Uncaught Error: Source data is missing a component at (1,844)!", source: PATH/To/c3-0.4.10/c3.min.js (2)
and the graph is not plotted at all. If I change the for loop to
for (var i = 0; i < 843 ; i++)
however, it does plot the graph.
I was using Plotly before, and I used to run the exact same code to prepare the data for Plotly, and it worked just fine. What is the problem here? Also, is there a way to ask C3 to ignore errors in the data? For example, if there is a null at one of the points, is there a way for C3 to plot the graph anyways?

I don't know if there is a way to configure C3 to ignore null or undefined values. Try ignoring the null/undefined values so that C3 can plot the graph.
for (var i = 0; i < DataArray.length ; i++) {
// if the value is not undefined or null, push to array
if (DataArray[i][0] !== undefined && DataArray[i][0] !== null) {
xData.push (DataArray[i][0]);
} else {
// push 0 to signify no data
xData.push(0);
}
...
}

C3 will ignore null values. But you will get this error when a value is undefined. The answer from TonalLynx will work. Or you could change undefined values to null.
for (var i = 0; i < DataArray.length ; i++) {
// if the value is undefined, push null to array
if (DataArray[i][0] === undefined) {
xData.push (null);
} else {
xData.push (DataArray[i][0]);
}
...
}

c3 has an internal function that can help do that
c3_chart_internal_fn.convertColumnsToData = function (columns) {
var new_rows = [], i, j, key;
for (i = 0; i < columns.length; i++) {
key = columns[i][0];
for (j = 1; j < columns[i].length; j++) {
if (isUndefined(new_rows[j - 1])) {
new_rows[j - 1] = {};
}
if (isUndefined(columns[i][j])) {
throw new Error("Source data is missing a component at (" + i + "," + j + ")!");
}
new_rows[j - 1][key] = columns[i][j];
}
}
return new_rows;
};

How to get the total number of rows with particular value in json file in d3.js

I have a JSON file which I am using for visualization using d3.js. I want to get the count of total rows for a particular code. I am using the following for doing so:
data.keys(d.code).length
But its not working. How can I solve this?
I have found one idea but it is not showing correct values. Whats the wrong with it?
Object.keys(d.code).length
I have a JSON file with following sample data
[
{"name":"a","code":20},
{"name":"b","code":20},
{"name":"c","code":20},
{"name":"d","code":21}
]
My target is to get the count of data with same code. For example for code 20 I should get 3 as output.

You might as well use d3.nest() to group your data based on code and have it return the number of entries per group:
var json = [
{"name":"a","code":20},
{"name":"b","code":20},
{"name":"c","code":20},
{"name":"d","code":21}
];
var nest = d3.nest()
.key(function(d) { return d.code; })
.rollup(function(values) { return values.length; })
.entries(json);

You don't need D3.js for this. Simple JavaScript should do it. Something like:
total = data.reduce(function(count, entry) {
return count + (entry.code === 20 ? 1 : 0);
}, 0);
Obviously, you can convert it to a function to handle arbitrary values other than 20.

var count = 0;
var length = data.length;
for (var x = 0; x < length; x++)
{
if (data[x].code == 20)
count++;
}
console.log('Final count: ' + count);
Probably something like that.
If you want a function you could use this:
var getCount = function(data, val)
{
var count = 0;
var length = data.length;
for (var x = 0; x < length; x++)
{
if (data[x].code == val)
count++;
}
return count;
}
Then call it like this:
var count = getCount(data, 20); // should return 3

How to generate highcharts chart from multiple local json files

I'm trying to construct a highcharts barchart using data from multiple locally held json files and having a bit of trouble. For simplicity's sake I want to loop through all files, do a search for a particular string and use the count as the data for my graph. I've went about it like so:
options.series[0].name = 'Test';
options.series[0].data = [];
//Loop over the different local files and do a search count in each
var localfiles = new Array('localfile1.json', 'localfile2.json');
for (var i=0; i<locfiles.length; i++) {
//do a count here
$.getJSON(localfiles[i], function(data) {
var count = 0;
var index = 0;
var entry;
for (index = 0; index < data.length; ++index) {
entry = data[index];
if (entry.searchkey == "searchstring") {
count ++;
}
options.series[0].data.push(count);
});
});
var chart = new Highcharts.Chart(options);
I realise that I'm not passing the options array around correctly. But I'm not sure what way I should code this. Any advice?
Thanks in advance.

to get 2 bars you need to put the options.series[0].data.push(count); outside the second loop otherwise you gonna end up with lots of bars growing up
options.series[0].name = 'Test';
options.series[0].data = [];
//Loop over the different local files and do a search count in each
var localfiles = new Array('localfile1.json', 'localfile2.json');
for (var i=0; i<locfiles.length; i++) {
//do a count here
$.getJSON(localfiles[i], function(data) {
var count = 0;
var index = 0;
var entry;
for (index = 0; index < data.length; ++index) {
entry = data[index];
if (entry.searchkey == "searchstring") {
count ++;
}
});
options.series[0].data.push(count);
});
var chart = new Highcharts.Chart(options);
this way you'll get 1 bar for each json file
to answer your comment
you can use addSeries
var series1 = {
data: [],
name: ""
}
chart.addSeries(series1);
if you want to remove all previous series you can do that
while(chart.series.length > 0){
chart.series[0].remove(true);
}

Has anybody used HumbleFinance to display Graphs / Charts

I am using Humble Finance to display charts similar to Google Charts.
My sample data is
var jsonData = [
{date:'August 19, 2010',open:100.01,high:104.06,low:95.96,close:100.34,volume:22088000},
{date:'September 20, 2010',open:101.48,high:109.08,low:100.50,close:108.31,volume:11377000}
]
Inside Jquery Ready function I am using my data to load this as :
jQuery(document).ready(function(){
var priceData = [];
for(var i = 0; i<jsonData.length; i++) {
priceData.push([i, jsonData[i].low]);
}
}
I want to print the Dates in X axis labels by using
HumbleFinance.xTickFormatter = function (n) {
var date = jsonData[n].date;
return date;
}
But its not working, and it throws this error on FireBug:
jsonData[n] is undefined
HumbleFinance.xTickFormatter = function (n) {
var date = jsonData[n].date;
date = date.split(' ');
return date;
}

Perhaps jsonData is not in the scope of xTickerFormatter, and you need to store it in another local variable, similar to priceData?

It's because 'n' is a float. Convert it to an integer using Math.floor before indexing the array.
var index = Math.floor(n);
var date = jsonData[index].date;