I am trying to implement Line chart, from API I am getting response in sequence but on Line Chart its not plotting in sequence.
Here is JSFiddle
Your data isn't sorted in timestamp ascending order as documented here. Sorting your data will fix the problem.
chart.data = data.sort((lhs,rhs) => {
return (new Date(rhs.endDate)) - (new Date(lhs.endDate));
});
Related
I would like to use ChartJS to create a "line chart race", i.e. a simple line chart that updates when new data is added in to the data array. Specifically, I want the both sets of axes to update. Note this is different to the "progressive line" chart sample which holds the axes fixed and draws the line from left to right.
At the moment I created something with the code below. However, when the chart reaches > 200-300 data points it starts to slow down and by the time it reaches > 1000 data points it's very slow. Can anybody advise on the pattern / structure I should follow to achieve the desired effect?
myChart = new Chart(ctx, config)
setInterval(updateChart, 100)
function updateChart() {
if (i < labelsData.length) {
myChart.data.labels.push(labelsData[i])
myChart.data.datasets[0].data.push(conData[i])
i = i + 1
myChart.update()
} else {
}
}
This achieves the desired result but the performance is very poor
I'm building a page with a Kendo scatter chart of data over time. The only catch is that the client wants the most recent data to the left. I've sorted the input datasource by date descending, but that seems to be blithely ignored, with the chart stubbornly plotting the data with dates ascending to the right.
Am I missing something, or is this simply unsupported?
You can set the reverse property on the xAxis to true:
xAxis: {
reverse: true
},
API Doc
I'm creating a Line Chart with View Finder in nvd3 and my problem is that even if specify my ticks with the help of an (unsorted) array and .tickValues the result is again sorted.
To be more clear: my array contains numbers like (49,50,51,52,1,2,3,4). I would like to have the x-axis in exactly this order. But the result is a sorted version (1,2,3,4,49,50,51,52).
So I assume that there is some kind of auto sorting, even if I use .tickValues?! How can I disable this sorting?
Here an example code:
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart();
// chart.transitionDuration(500);
chart.xAxis.tickValues(x_labels_array);
chart.x2Axis.tickValues(x_labels_array);
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.y2Axis.tickFormat(d3.format(',.2f'));
d3.select('#chart svg').datum(createData()).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I was able to disable sorting using xDomain[firstVal, lastVal] this will change the sorting of your data, or you can use also lines: {xDomain[firstVal, lastVal]} here is a plunker done with Angular-nvd3
I am using NVD3 to visualise data on economic inequality. The chart for the US is here: http://www.chartbookofeconomicinequality.com/inequality-by-country/USA/
These are two lineCharts on top of each other. The problem I have is that there are quite a lot of missing values and this causes two problems:
If I would not make sure that the missing values are not visualised the line Chart would connect all shown values with the missing values. Therefore I used the following to not have the missing values included in the line chart:
chart = nv.models.lineChart()
.x(function(d) { return d[0] })
.y(function(d) { return d[1]== 0 ? null : d[1]; })
But still if you hover over the x-axis you see that the missing values are shown in the tooltip on mouseover. Can I get rid of them altogether? Possibly using remove in NVD3?
The second problem is directly related to that. Now the line only connects values of the same series when there is no missing values in between. That means there are many gaps in the lines. Is it possible to connect the dots of one series even if there are missing values in between?
Thank you for your help!
As Lars showed, getting the graph to look the way you want is just a matter of removing the missing values from your data arrays.
However, you wouldn't normally want to do that by hand, deleting all the rows with missing values. You need to use an array filter function to remove the missing values from your data arrays.
Once you have the complete data array as an array of series objects, each with an array of values, this code should work:
//to remove the missing values, so that the graph
//will just connect the valid points,
//filter each data array:
data.forEach(function(series) {
series.values = series.values.filter(
function(d){return d.y||(d.y === 0);}
);
//the filter function returns true if the
//data has a valid y value
//(either a "true" value or the number zero,
// but not null or NaN)
});
Updated fiddle here: http://jsfiddle.net/xammamax/8Kk8v/
Of course, when you are constructing the data array from a csv where each series is a separate column, you can do the filtering at the same time as you create the array:
var chartdata = [];//initialize as empty array
d3.csv("top_1_L-shaped.csv", function(error, csv) {
if (error)
return console.log("there was an error loading the csv: " + error);
var columndata = ["Germany", "Switzerland", "Portugal",
"Japan", "Italy", "Spain", "France",
"Finland", "Sweden", "Denmark", "Netherlands"];
for (var i = 0; i < columndata.length; i++) {
chartdata[i].key = columndata[i];
chartdata[i].values = csv.map(function(d) {
return [+d["year"], +d[ columndata[i] ] ];
})
.filter(function(d){
return d[1]||(d[1] === 0);
});
//the filter is applied to the mapped array,
//and the results are assigned to the values array.
}
});
I am trying to display a time based d3 area graph. There is a very strange 'tail' at the start of thie graph and I'm not sure what is causing the issue.
Here is the JSfiddle http://jsfiddle.net/qxkRJ/
I convert the date to the correct format but am wondering if the issue arises because of the data isn't ordered by the datetime value.
data.forEach(function (d) {
var newDate = new Date(d.daterun/1000000);
d.daterun = newDate;
d.intvalue = +d.intvalue;
});
All you need to do is sort the data:
data.sort(function(a, b) { return a.daterun - b.daterun; });
Complete jsfiddle here.