How to display Dynamic Object Arrays into chart using Anychart.js - javascript

What i am trying to do is i want to display a chart based on my dynamic data i used Angular ForEach to loop through all my objects array see my code below:
var parse = JSON.parse(jsondata);
angular.forEach(parse, function (value, key) {
var dataSet = anychart.data.set(value);
var chart = anychart.column();
var series = chart.column(value);
chart.title("Data Sets: Array of Objects");
chart.container("container");
chart.draw();
});
it correctly display the count of my chart but the data of each object array is not showing up see picture below
but if put a static data like this :
var data = [
{x:"January", value: 12000},
{x:"February", value: 15000},
{x:"March", value: 16000},
{x:"April", value: 14000},
{x:"May", value: 10000}
];
the chart displays correctly.
can anyone help me with this ? any help will greatly appreciated.

Everything depends on the value content inside the loop. You are applying the value to the series and dataSet as well.
If you are using dataSet, you should apply the value to the dataSet, map the data, then apply the mapping to the series. Like this:
var dataSet = anychart.data.set(value);
var mapping = dataSet.mapAs({'x': 0, 'value': 1}); // for example
var chart = anychart.column();
var series = chart.column(dataSet);
The mapping depends on your data. If the value includes ready-to-use data that matches the default mapping you can apply it directly to the series.
Can you share the value content?

The chart can work with dynamic data. All you need is to apply new data to the existing dataSet, like this:
dataSet.data(newData);
And that's it! There's no need to recreate chart/series/dataSet.

Related

Highcharts (Highstock): Get data from external CSV, doesn't display date correctly

I'm trying for days now to get Highstock working with an external CSV file. The issue was first that the imported file was sorted in "descending" order whereas Highcharts requires the data to be sorted in "ascending" order. Once I found a JSFiddle/Codepen close to my problem, I managed to display the data correctly.
Now the problem is that on the x-axis the dates are displayed as something like 00:00:00.500 whereas it should be looking like this 2016-03-11.
I have created a codepen since it may be easier for you to respond to it than copy/pasting here a lot of code: http://codepen.io/bauhausweb/pen/aNpbxg
Thanks for looking into my issue!
For your example, there seems to at least be the problem of 2016-03-11 simply being a string and not a timestamp in milliseconds, which causes it to chose the defaults of 0, 1, 2, ... as x-values instead.
Below I've provided an example of how you can use the data modules csv attribute to achieve a similar result, with the help of the complete function:
$(function () {
$.get("https://www.example.com/my.csv", function (csv) {
$('#container').highcharts('StockChart', {
data: {
complete: function(o) {
o.series[0].data.reverse();
},
csv: csv
}
});
});
});
Or look at this JSFiddle demonstration.
Try to do something like this:
$.each(lines, function (lineNo, line) {
if (lineNo > 0 && lineNo < 557) {
var items = line.split(',');
// var seriesname = String(items[0]); // this is the area name
var seriesname = "Gold"; // this is the area name
var price = parseFloat(items[1]);
var f_date = items[0];
var format = String(f_date.replace(/-/g,','));
var date_items = format.split(',');
var d = Date.UTC(date_items[0],date_items[1],date_items[2]);
console.log(d);
var date = d;
// this will be the id of the drilldown
// var shift_one_value = parseFloat(items[3]); // drilldown shift1 value
// var shift_two_value = parseFloat(items[4]); // drilldown shift2 value
series.data.push({
name: seriesname,
y: price,
x: date
});
}
});
The problem is the date it would be formated in UTC
Your code has a lot of oddities. Your xAxis is set to datetime which is good. With a point interval of one day - also good. But, if you look at your series.data you are sending in data formatted like:
{
name: "Gold",
x: "1233.6",
y: 1233.6
}
You are setting the y here:
var date = String(items[1]);
You should be using items[0]. Now, you also have to parse this string into javascript time. Something like this can work:
var arr = String(items[0]).split("-");
var date = Date.UTC(arr[0], arr[1], arr[2]);
However, now your chart throws error that date is not sorted. See updated pen here.

d3.js convert data using nest

I'm trying out d3.js for the first time and trying the stacked to grouped bars example.
My data is in the following format:
var data = [
{"year":2015, values:[1,2,3]},
{"year":2016, values:[10,20,30]},
{"year":2017, values:[100,200,300]}
];
I would like the x-axis to be year and the y-axis to be the values.
I am having trouble determining which parts of the api to use. Do I use nest, map, or both?
I need the data to be graphed as value1 (1,10,100), value2 (2,20,200), and value3 (3,30,300)
Thanks
Your data is like this
var data = [
{"year":2015, values:[1,2,3]},
{"year":2016, values:[10,20,30]},
{"year":2017, values:[100,200,300]}
];
Need a paser to parse your date
parse = d3.time.format("%Y").parse;
next group the data
//[0,1,2] index of the array so that the y can be calculated as d.values[grp]..here grp will be group which will have value 0 1 2
var newData = d3.layout.stack()([0,1,2].map(function(grp) {
return data.map(function(d) {
return {x: parse("" +d.year), y: +d.values[grp]};
});
}));
This will make the newData in the format you wish:
[[{"x":"2014-12-31T18:30:00.000Z","y":1,"y0":0},
{"x":"2015-12-31T18:30:00.000Z","y":10,"y0":0},
{"x":"2016-12-31T18:30:00.000Z","y":100,"y0":0}],
[{"x":"2014-12-31T18:30:00.000Z","y":2,"y0":1},
{"x":"2015-12-31T18:30:00.000Z","y":20,"y0":10},
{"x":"2016-12-31T18:30:00.000Z","y":200,"y0":100}],
[{"x":"2014-12-31T18:30:00.000Z","y":3,"y0":3},
{"x":"2015-12-31T18:30:00.000Z","y":30,"y0":30},
{"x":"2016-12-31T18:30:00.000Z","y":300,"y0":300}]]
Hope this helps!
Working sample here

jQuery pushing additional calculated data points to HighChart series

I am trying to push data points to a data series array for HighCharts. I have started with the standard pie template. I have then added additional $.get statements to calculate the number of lines in the files.
The alert statement on each additional $.get returns the correct number of lines, but the data point is not pushed to the series.
Can anyone help me, I am new to JQuery. Thanks.
$.get('piechart.csv', function(data) {
// Split the lines
var buttons
var lines = data.split('\n');
var series = {
data: []
};
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo,line) {
var items = line.split(',');
series.data.push({
name: items[0],
y:parseFloat(items[1])
});
});
$.get('button0.txt', function(data) {
// Split the lines
var lines = data.split('\n');
series.data.push({
name: 'Power off',
y: (lines.length-1)
});
alert (lines.length-1);
});
$.get('button1.txt', function(data) {
// Split the lines
var lines = data.split('\n');
series.data.push({
name: 'Power on',
y: (lines.length-1)
});
alert (lines.length-1);
});
options.series.push(series);
// Create the chart
var chart = new Highcharts.Chart(options);
});
The data point is, I would assume, being pushed to the series, but the problem lies in the fact that this doesn't happen until after you have already created and rendered your chart instance.
Leaving aside the fact that I don't see a declaration of the options variable in your code, which would suggest that there might be another bug lurking (but I'm assuming that's just a typo?), the problem lies in the fact that HighCharts doesn't do anything to track the initial series that you pass it, so modifying that series isn't going to affect the chart.
You'll need to update the chart yourself - using, for example, the addPoint method of the HighCharts series object. So, in the success callback for your Ajax calls, you'll need to do something along the lines of:
$.get('button0.txt', function(data) {
// Split the lines
var lines = data.split('\n'),
chart = $('#container').highcharts();
chart.series[0].addPoint({
name: 'Power off',
y: lines.length-1
});
});

dc.js: extending line and area to end of chart

I'm trying to draw an area chart using dc.js, and the end date (i.e. far right) of the chart is based on the current date, not the last date in the dataset. In cases where there's a date gap between data points, I want the area to extend from one point to the next, not draw at 0.
Given this data:
var data = [
{domain: "foo.com", project: "pdp", repo: "myrepo", commit_date: "6/1/2014", lines_added: 100, lines_deleted: 50},
{domain: "foo.com", project: "pdp", repo: "myrepo", commit_date: "7/1/2014", lines_added: 100, lines_deleted: 50}
];
var ndx = crossfilter(data);
The chart's line/area currently ends at the "7/1/2014" data point, but I want it to stretch the entire length of the chart.
The relevant code for drawing the chart is:
var dateDim = ndx.dimension(function(d) {return d.commit_date;});
var minDate = dateDim.bottom(1)[0].commit_date;
var maxDate = new Date();
var domainGroup = dateDim.group().reduceSum(function(d) {return d.cumulative_lines;});
unshippedlineChart
.width(500).height(200)
.dimension(dateDim)
.group(domainGroup)
.renderArea(true)
.x(d3.time.scale().domain([minDate,maxDate]))
.brushOn(false)
.interpolate('step-after')
.yAxisLabel("Unshipped Value");
Full example is at http://jsfiddle.net/xayhkcvn/1/
You didn't actually ask a question :-), but I think you may be looking for ways to prefilter your data so that it gets extended to today, and to remove any zeros.
This stuff isn't built into dc.js, but there is some example code in the FAQ which may help. Specifically, there is a function remove_empty_bins which adapts a group to remove any zeros.
You could similarly define a function to add a final point (untested):
function duplicate_final_bin(source_group, key) {
return {
all:function () {
var ret = Array.prototype.slice.call(source_group.all()); // copy array
if(!ret.length) return ret;
ret.push({key: key, value: ret[ret.length-1].value});
return ret;
}
};
}
You can compose this with remove_empty_bins:
var super_group = duplicate_final_bin(remove_empty_bins(domainGroup), maxDate);
The idea is to create a wrapper object which dynamically adds or remove stuff from the (always changing) source_group.all() on demand. dc.js will call group.all() whenever it is redrawing, and these wrappers intercept that call and adapt the data the crossfilter group returns.

Highcharts use series labels as x-axis categories

I have a simple 1-series highchart bar chart where I load the data using json. In my fiddle I just defined the json data as a static variable for simplicity but the premise is the same.
The json data forms the basis for all the series properties, including the name and is formatted like so, which is consistent to many examples I have seen:
var json = [{
"name": "Currency Allocation",
"data": [
["gbp", 0.7053985],
["usd", 0.17856322],
["eur", 0.06901525],
["chf", 0.00135777],
["jpy", 0.00815169],
["em_asia", 0.02821377],
["other", 0.00982446]
]
}];
I would like the label, which is the first element in each data sub-array to be the x-axis category for the chart. However, I seem to have to define the x-axis categories separately under cht.xAxis.categories. Is there a way to avoid doing this and just use the categories in my data?
If I exclude the xAxis.categories property the chart is plotted with just numbers on the x-axis
You can do this on a chart.events.load call and looping through the series[0].data values. Since you say you only have one series per chart I am also assuming you only have one xAxis as well. You would loop through your data like so:
var seriesData = this.series[0].data;
var tCategories = [];
for (i = 0; i < seriesData.length; i++) {
tCategories.push(seriesData[i].name);
}
this.xAxis[0].setCategories(tCategories);
Live demo.
Less complex method is to define your xAxis.type as 'category':
"xAxis": {
"type": "category"
},
Live demo.

Categories