Is it possible to connect a line graph while passing over the values that are 0? Here is a fiddle:
standard highcharts code in fiddle.
http://jsfiddle.net/utnz2b9e/15/
What I would like to have happen is that rather than dipping all the way down to 0 in March and then all the way back up in April, I'd like it to just connect straight from February to April. However, I want to allow them to drag the point up from 0 and refresh the graph so I can't just skip over those points, and since I'm using dates I couldn't have gaps there anyways.
Any help with this would be much appreciated, thank you so much!
It is indeed possible.
Assuming the data you are presenting has unwanted 0 values in it, you can easily null them, and order highcharts to connect those null points with non nulls.
This is done by adding the property connectNulls:true which is added to the series object.
After that, you can go through your series data, and null the points. In your example Iv'e done that after the chart was rednered:
var chart = $('.actualPlansPlot').highcharts();
$.each(chart.series[0].data, function(i, point){
if(point.y == 0)
{
chart.series[0].data[i].update(null);
}
});
As you can see, Iv'e iterated through the series points and nulled any zero point, using the generic update method.
You can see this yourself:
http://jsfiddle.net/utnz2b9e/24/
Related
I have a few things I can't see to fix with my chart in highcharts-ng, see this http://jsfiddle.net/mcneela86/DJVP2/ for reference:
As a background, the chart will display a comparison of before and after values for horse power and torque in cars, after parts have been added.
1: I have grouped the data into 'before' and 'after', can I have the 'before' gourp coloured differently than the 'after' group. the colour of the 'after' group is correct, the 'before group' needs to be shades of grey?
2: I need to make the columns wider (while keeping them responsive). I thought the way to do this would be reducing the padding around the columns (see below) - but this won't work for me?
groupPadding: 0,
3; The third button (Stage 4 (new engine)) contains data with zero/null values, is it possible to have the data that remain spread across the whole graph? (so it doesn't look like there is something missing)
{
"after_hp":1000,
"after_torque":900,
"before_hp": null,
"before_torque":null,
"name":"Stage 4 (new engine)"
}
the 'null' values above can be null or '0' - I can control the data.
I have spent days trying to fix these issues and would really appreciate any help.
EDIT:
I found a solution for the first question above:
See this jsfiddle - http://jsfiddle.net/mcneela86/6caPj/ I used a workaround of targeting the data with css, while this works for my case it me not be ideal for larger data sets.
Hope this helps someone.
2) You can manipulate only groupPadding/pointPadding/pointWidth, but you have also ability to catch $(window).resize() or load.redraw() and update serie with new paraemters, described abo
3) You can try to call setExtremes() skipping 0, i.e as 1,1. or set min value as 1, on xAxis.
http://api.highcharts.com/highcharts#Axis.setExtremes
I have a nvd3 line chart which displays a time series and can't get the ticks on the x axis right.
For longer time spans, it works as expected. But for shorter time spans (here: 12/31/05 to 01/01/06), the same date is displayed for multiple ticks:
Please have a look at the code for this chart on JSFiddle
I want the chart to only display ticks at data points, and not in between. Is that possible with a line chart? From my understanding, it is possible with d3, but I can't figure out if this functionality is exposed by nvd3.
I've tried explicitly setting the number of ticks with chart.xAxis.ticks() without success. The only thing that has any effect is explicitly setting the tick values with chart.xAxis.tickValues([...]), but I would prefer not having to calculate them myself.
The way to solve this in general is with custom multi-scale time formats. Note that this example itself will not work with NVD3 because it uses an older version of D3, the examples below will though.
The problem in your case is that the ticks aren't "clean" divisions of time and if you apply a multi-scale format, you get something like this. It always shows the more fine-grained format because anything else would involve a loss of precision.
You can however use a simple heuristic to show the date instead of the time if the hour is less than 3, which works reasonably well in your case. See here for an example. The proper way to do this would be to make your ticks clean divisions.
Which brings us to your actual question. There's no other way than to explicitly set .tickValues() for what you want to do, but you can compute the x positions in your data quite easily:
var xvalues = [],
tmp = data.map(function(e) {
return e.values.map(function(d) { return d[0]; });
});
xvalues.concat.apply(xvalues, tmp);
The code is not the prettiest because it's a nested structure, but fairly straightforward. Using this, you can set your tick values explicitly, full example here.
I am using Shield UI JavaScript chart to show some monthly data to my visitors. However the available data doesn’t always equal 12 months. On the other hand I have categorical values on my X axis;
January, February and so on.
I am using a line chart type and for months where there are no adjacent values I do get a point which makes my chart to look some messy.
I tried to adjust the
seriesSettings: {
line: {
drawNullValues: true
}
}
property, however the look remains. Any ideas?
Since you have categorical values – the names of the 12 months, it wouldn’t make much sense using the drawNullValues. This is because once there is a values (even null) for a point, it takes it’s place on the X axis.
Your chart will look much better, if you use the appropriate type- let’s say bar so that data is easy to see and months with and without data will be easy to distinguish.
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.
I wish to create a graph whose y-axis starts at 0. None of my values are 0 though. How do i go about doing that in graphael ?
As an extension, how can I create a graph with a y-axis whose maximum value is, lets say, twice the maximum value in the provided data ?
I don't know if this is too late but I've been struggling with gRaphael myself and came across a solution that might work for you. There's no obvious or clean way to do this but I've found a decent hack for it.
You can add in another array of y values (the first being 0 and last being 2x your max value) and specify the color for this line to be transparent using the colors option.
I've created a fiddle so you can see what I mean: jsFiddle example
The first chart is what you currently have and the second shows the addition of the second set of y values.