Develop Reference

Display Categories on x-axis for Highcharts spline with x and y data

My data needs to have an x and a y value, because I want to show the x value when the user hovers over the chart.
I only want to show a limited amount of labels on the x-axis though, which is why I am using categories. I keep getting Highcharts error #19 though, because the chart apparently tries to use the x-values provided in the data array.
I've played around with using type: 'datetime', since I am working with timestamps but I can't position the labels properly in this case and want to use categories instead.
I've created a jsfiddle to explain my problem: http://jsfiddle.net/kf6wrj37/
Instead of just the first and last x-value being display, I want my categories array
categories: [
'1453417200000',
'1456873200000',
'1460325600000',
'1463781600000',
'1467237600000',
'1470693600000',
'1474149600000',
'1477605600000',
'1481065200000',
'1484521200000',
'1487977200000'
],
to be displayed as labels on the x-axis.
How should I go about this? Is it even possible to use categories when my chart's data has x and y values?

Custom D3 `tickValue` on x axis -- horizontal bar chart

I am trying to create custom tick values on X axis.
Chart is generated from data.csv file. There are 144 data points. Each data value represent 10 minutes cycle, so first tick should appear on 6th tick representing 1 hour.
If I use .domain([new Date('2014-03-08T12:00:00'), new Date('2014-03-9T00:00:00')]) for example, I will get X axis right, but my chart would be gone.
I can't use tickValues([]) in this case either.
What I should see on X axis is something like this 00:00 AM...(6 tick values)...1:00 AM...(6 tick values)...2:00 AM etc. Or it could be 00:00 AM...(12 tick values)...2:00 AM...(12 tick values)...3:00 AM etc. Just to be able to customize it.
Not sure if this is even possible. I tried following this simple example http://bl.ocks.org/phoebebright/3059392, but again, I get X axis right, but my chart is gone.
This would be the code: https://plnkr.co/edit/kc4E43Bgo4bNMB9hKX2j?p=preview
Thank you in advance!

Since your data doesn't contain actual date values, this is my solution:
You want to show one tick out of 6, since each tick represents 10 minutes and you want to show only the "hourly" tick. So, define the tick values using your x scale domain:
.tickValues(d3.range(x.domain()[0], x.domain()[1]).filter(function(d) {
return d % 6 === 0;
}))
And then, format the ticks to add a :00 to each one:
.tickFormat(function(d) {
return d/6 + ":00";
});
Here is your updated plunker: https://plnkr.co/edit/8EOGt8UvYq1J8qpIdArN?p=preview
Edit: As discussed in the comments, here is the solution with "am" and "pm": https://plnkr.co/edit/OvtVlgT4I6Y19hgoMKIK?p=preview

Pareto 2d Dual y axis graph, secondary Y axis data incorrectly plotted

Im trying to create a pareto2d dual y axis Fusion chart. The primary y axis and x axis data are getting plotted fine. But the values that are being passed for the secondary y axis (cumulative percentage line graph ) is not getting plotted properly. It plots incorrect values for the cumilative percentage. Although the data that is being passed for generating the graph is correct. But while its plotted, it shows incorrect values.
code
function(response) {
var myChart = new FusionCharts("FusionCharts/Pareto2D.swf",
chart1Id", "500", "230","0");
myChart.setChartData(response, "xml");
myChart.render("VisifireChart55");
In the above code, the setChartData() parameters contains the right values.Even after plotting the graph, the tool tip specifies the right cumilative % values. But the actual values plotted in the graph are incorrect. When I right click and select the option copy to clipboard, and paste it in a notepad, it contains incorrect data for Cumilative percentage. I have also checked the fusion charts faq and verified whether any duplicate attributes are there in the chartxml data . But there is no redundancy. Any help on this is much appreciated.

Does d3.js offer a method to extend my dataset to the origin of my graph?

Take this scenario from a graph I'm working on at the moment:
The problem I'm having is in the bottom left. My dataset's first coordinate is defined at approximately (60,5), yet the domain I'm looking to cover extends right down to 0. Is there any way I can get d3 to extrapolate this data to my origin? I've browsed the API but nothing clearly stands out.
I'm well aware I could just .push a new object with coordinates (0,0) onto my dataset array, but I would prefer not to as I may need to do manipulation with my data later, making this an undesirable option.

Since you have not provided a fiddle i chose to put up a small fiddle to explain this:
My Data set is like this:
data = [{
xval: 10,
yval: 100
}, {
xval: 40,
yval: 90
}, {
xval: 50,
yval: 12
}, {
xval: 90,
yval: 70
}]
You can see the values of x and y value varies from 0 to 100.
So you will define the range like:
x.domain([0, 100]);//this will show x axis start from 0
y.domain([0,100]);//this will show y axis start from 0
example here:
as per your requirement you want the y axis to start from 10 so you do
x.domain([0, 100]);//this will show x axis start from 0
y.domain([10,100]);//this will show y axis start from 10
example here
Hope this solves your problem. ..:)

You can also adjust your data domain to the maximum and the minimum using the extent function that d3 provides.
var x_domain = d3.extent(data,function(d){return d.xval});
var y_domain = d3.extent(data,function(d){return d.yval});
x.domain(x_domain);
y.domain(y_domain);
That way the graph will always be adjusted to the data domain in both coordinates whatever data comes.
Watch this working.

Well, I found an answer to my own question here.
d3 will never extend a line beyond the final data point.
The solution is the following:
If your really must have the line start and end at the very end of your range, then you have two options:
Create a custom interpolation function; or,
Add an "end-value" data point when you pass your data array to d3.svg.line.
For me, it looks like I'm going to have to include a "start value" datapoint. Disappointing.

Map X-values to a Date in d3.time.scale()

I have a d3 chart that draws out a number of rectangles over an x-axis.
The x-axis represents a timeline and I currently use d3.time.scale in order to map the dates of each datapoint to a point on the x-axis. This is all straight forward.
var xAxis = d3.time.scale();
data.forEach(function(d){
d.xValue = xAxis(d.startDate);
});
Then drawing it out using that specific xValue in a css transform.
Now, if I would like to get the date based on a given x-value (say for instance when a user clicks on the graph I want to check which date that x-value corresponds to) I have not found how to do this using the xAxis variable that I have created.
How can I achieve this? Would I have to use the xAxis.domain() and the width of the element to calculate the chosen date?

Taking the answer from Lars Kotthoff in the comments;
d3.time.scale().invert() was the answer to this.