draw a line chart using big array in highchart - javascript

I am trying to draw a line chart using big array list of objects with id,named values but something is going wrong. I can see following warnings in firebug window :
Unexpected value NaN parsing y attribute.
elem[setAttribute](prop, value);
http://jsfiddle.net/stGXM/19/
Why do those warnings are coming? Currently chart is not getting drawn even though I have mentioned all the necessary values.
Please help...

You should specify each point in your series in the form [x, y, ID].
I've modified your code: http://jsfiddle.net/Ut5C3/
Here's the Highcharts reference: http://api.highcharts.com/highcharts#series.type

Related

D3 multiline chart on update crosses axis

I am trying to plot a multiline d3 chart. I have created a method which should take a new dataset and try to plot it in the same d3 frame for new data update changes (possibly filters).
The first draw works fine but the next draw (mocked data: which is a slice of the previous data and few manipulated values) is not showing correct is crossing the x axis.
[See Image below]
Also the starting origin is missing a tick which should also be 2010 in this example
I also want to create few more lines if there is more datapoints in the future which should be dynamic. Current model is {date, actual, projected}, More expected is mean or difference which will only be shown on trigger.
Any help would be appreciated.
Here is a Stackblitz https://stackblitz.com/edit/angular-rhr39p
References:
Animated line chart: http://bl.ocks.org/atmccann/8966400
Multiline chart: https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91
Dataset updates: https://bl.ocks.org/d3noob/7030f35b72de721622b8
Please keep just one problem per question here at Stack Overflow. This answer will deal with problem #1, consider asking separate questions for the other problems.
The issue here is just your enter/update methodology, that is not correct and. Stick with the idiomatic D3, which is along these lines:
const update = this.svg.selectAll('.records')
.data(records);
const enter = update.enter().append('g')
.attr('class', 'records');
Then, you append new paths using enter and update those paths using update.
You can also ditch the groups and create enter/update/exit selections for the paths directly. That will make your code simpler.
Here is the forked code: https://stackblitz.com/edit/angular-lyd79t?file=src%2Fapp%2Flinechart%2Flinechart.component.ts

dc/d3 line chart crashing down to 0 on the y axis after filtering

When I apply a dimension filter to a dc.js graph, there are ugly lines where the line plummets
towards the y axis.
Is it possible in dc/d3 to not do this, i.e I would expect the graph to more resemble the following;
You can call defined directly on the dc created chart.
chart
.chart((c) ->
dc.lineChart(c)
.interpolate('linear')
.defined((d) ->
return !isNaN(d.y)
)
)
The condition !isNan(d.y) can be anything you like that evaluates to true/false.
Note that the d passed by defined is a d3 object and is worth inspecting.
Two possible solutions, depending whether you want the line connected or in sections:
Pre-filter the data so that instead of having groups that sum to zero, there aren't groups there at all. This will connect the points with a line segment over the missing data. https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted
Use lineChart.defined to put gaps/breaks in the line where there is no data. https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#definedvalue

Error parsing data when drawing d3 line chart

I'm trying to draw a difference chart (like this one) but using a more modular style.
So far, I've got as far as reading in two dummy CSV files, combining the data, generating a chart, and am now trying to just draw a single line from one part of the data, but I keep getting an error. The full code is available on bl.ocks.org.
The error is:
Error: Problem parsing d="M0,221.73913043478262LNaN,182.60869565217394LNaN,195.6521739130435LNaN,156.52173913043478L500,91.30434782608697L500,91.30434782608697LNaN,156.52173913043478LNaN,195.6521739130435LNaN,182.60869565217394L0,221.73913043478262Z"
which occurs when doing this:
g.select('.line').attr('d', line);
At that point (as seen in the console), data is:
[{"year":1999,"imports":15,"exports":19},{"year":2000,"imports":18,"exports":20},{"year":2001,"imports":17,"exports":30},{"year":2002,"imports":20,"exports":32},{"year":2003,"imports":25,"exports":9}]
xScale.range() is:
[0, 500]
xScale.domain() is:
[1999, 2003]
yScale.range() is:
[300, 0]
and yScale.domain() is:
[9, 32]
I'm guessing there's a simple error somewhere in there, meaning the wrong data is being used to draw the line, but after several hours trying to fix this, I can't see what I've done wrong.
You are using an ordinal scale, which doesn't interpolate between values. The domain of that scale consists of two elements, and it will map those to the two elements in the output range. That is, 1999 is mapped to 0 and 2003 is mapped to 500. For any other inputs, the scale will return NaN as the value isn't in its input domain.
You can fix this by specifying all the years you want mapped in the domain and the corresponding output values in the range. In your case, the easiest would be to use a linear scale though as that seems to be what you're assuming will happen with your current scale. You would simply need to replace the definition of the scale and how the range is set. This is what I have done here.
Alternatively, you could use a time scale as that would give you potentially better labels.

NVD3 Sparkline not rendering correctly from CSV file

I'm trying to use NVD3 with d3.js to make a simple sparkline. I've successfully created several sparklines with .csv data, but when I tried to use a different data set, it gave a very strange looking sparkline. See here. If I change the first data value from 92 to 0, it successfully shows the sparkline.
Is this a bug in NVD3 or am I doing something wrong?
The problem was that the y values were strings. I changed
monthlyData.push({x: data[i].Month, y: data[i].Data});
to
monthlyData.push({x: data[i].Month, y: +data[i].Data});
so that the y value becomes a number. Here's the updated version.

Drawing non-continuous lines with d3

I'm using d3.js to make a simple line graph. I want to know if there's a way to create "holes" in the graph, that is, if the line can be interrupted or cut when there is no data available.
I'm looking into either delete the places I don't need from the domain, or setting the line weight to 0 in specific segments, but I can't find a way to do either of these.
Thanks for your help!
The D3 line generator has a built in function to do just this, line.defined. You can use this function to control where your line is defined and where it is not (like where you have missing data.) If you wanted to make your line undefined whenever the second value in the point array is a javascript NaN value, you could say:
line.defined(function(d) { return !isNaN(d[1]); });
Here is a good example of this in action.

Categories