I've been working on a d3.js time series line chart.
I am using d3.nest and then looping through the nested groups to create each line.
The complete code Here
What I would like to do is have each line's label (the country name) show up on the y-axis at the position of the last observation (given by credit). To find this position I use:
dataNest.forEach(function(d) {
var position = d.values[6].credit;
console.log("Selected Value", position);
Then later pass position to .attr("y", y(position)) when I append the text.
The issue I'm having is that the position returned from d.values[6].credit is correct as logged in the console. But I get an
Uncaught TypeError: Cannot read property 'credit' of undefined
error. This leads to the axes not being plotted.
(Eventually I want the labels to appear on mouseover, but that is for another day).
Slovak Republic only has 2 data points:
Slovak Republic,SK,Jan 2007,100
Slovak Republic,SK,Jan 2008,105.2
Instead of the hard-coded 6, just use:
var position = d.values[d.values.length-1].credit;
Example here.
Related
I have this (SOLVED) chart where i want to find the x coordinates for the corresponding max/min value on the y axis.(and display em on the line chart as I've already started to do)
I've managed to find the coordinates for the y axis and it updates accordingly, but I'm not sure how I would find the corresponding date to the max/min value.
I tried using the d3.nest function and associate the max/min value to it's date and tried to assign it to a single key but wasn't sure how to go about it or whether it was the right approach to begin with.
An easier approach is simply finding the object with the highest value:
var maximumObj = data.filter(e => e[city] === maximum)[0];
And using it to plot a circle or anything you want.
Check the bl.ocks: https://bl.ocks.org/anonymous/b388c8557f4210b66f8eae25b436f4f3
In JavaScript, I am unable to figure out how to use the data object in the function below to get the position of the clicked-on data point (e.g. third data point in the series).
Using chartsNew.js, a popular fork of charts.js, this code shows the value of the datapoint at the mouse click:
function fnMouseDownLeft(event,ctx,config,data,other){
if(other != null){
window.alert("["+ data.labels[other.v12]+", "+data.datasets[other.v11].data[other.v12] +"]");
}else{
window.alert("You click Left but not on a data");
}
}
How do I display the clicked element's position in the data series?
jsFiddle Example
This seems the most promising but I don't understand the relationship between data.datasets, data.datasets[other] and data.datasets[other].data[other]
window.alert("Position: " + data.datasets[other.v11].data[other.v3] );
Here is documentation:
https://github.com/FVANCOP/ChartNew.js/wiki/100_095_Mouse_Actions
https://github.com/FVANCOP/ChartNew.js/wiki/120_Template_variables#inGraphDataTmpl-annotateLabel
My confusion: v12 (for a line chart) should display the position of data in the series (which is what I want) but instead it displays the x-axis value for that datapoint.
other.v12 seems to do the trick
alert(other.v12);
http://jsfiddle.net/wesn0xm5/1/
Not sure why it's not giving you the series, it does for me.
I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},
I have a scatter series with two points that have the same coordinates. Each point has different data associated with it (for example weight and height of different people - two different people can have exactly the same height and weight):
series: [ {
data: [{x:193.5, y:80.7, name:'danny'},
{x:193.7, y:90.7, name:'oren'},
{x:193.7, y:90.7, name:'josef'},
{x:195.5, y:80.3, name:'thomas'}]
}]
Full example at jsfiddle.
When viewing the tooltips of the chart, the tooltip of the second point shows:
Oren: 193.7,90.7
Making the data of josef inaccessible.
I would like to make the data of both josef and oren accessible, for example by putting them inside of the same tooltip.
Oren: 193.7,90.7
Josef: 193.7,90.7
How would you achieve this effect?
assume a very large data set - iteration over the entire series each time is not an option.
You could use the Tooltip formatter ( http://api.highcharts.com/highcharts#tooltip ) to manually format your tooltips.
In the formatter compare x and y value of all other points in the series(this.series) If the values are the same, add the name of these points to the tooltip.
I am trying to use the setFormattedValue() function from the DataTable class to modify the look of the labels across the horizontal axis on a line chart, but the values are not being formatted. The labels remain in their default values created by setValue().
For example, the following code does not produce 00:36:45 on the axis, but rather, just 2205.
var table = new google.visualization.DataTable();
table.addRows(1);
table.addColumn('number', 'time');
table.addColumn('number', 'altitude');
table.setValue(0, 0, 2205);
table.setFormattedValue(0, 0, '00:36:45');
table.setValue(0, 1, 35);
var chart = new google.visualization.LineChart($('chartdiv'));
chart.draw(table);
I don't understand what I'm doing wrong. Shouldn't setFormattedValue() cause the label to be shown as 00:36:45 instead of 2205?
If this isn't the right way to change the look of the axis labels, then how should it be done? I can't change the column type to string because the plotted line is based on numerical x/y coordinates.
You said you can't change the column type to string but, can you change it to Date? The axis is showing a number because you declared both columns as number type.
I can't see the relation between 00:36:45 and 2205. Is 2205 a value you get at that time? If you drawed more points in your line chart, you could check if their labels are the formatted value you are setting.
Partial solution:
replace chart.draw(table); with:
chart.draw(table, {
hAxis: {
ticks: [
{v:2205, f:'00:36:45'},
{v:35, f:35}
]
}
});
ticks allows you to map any value and its representation on the axis, but i think you have to list values for all labels you want. (But this could be automated by custom script)