highcharts positioning and colour - javascript

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

Related

How to modify the 'nodes' behaviour in Zingchart

I plot some series of data with Zingchart. The data is one entry per second, per set. The result is the following graph:
.
I am happy with this result. I get an overview of the plot that is very fast using "exact":false as plot attribute. Afterwards, I want to be able to 'zoom in' to see the detail:
And now I have too much detail. The attributes I have for plot are:
"maxNodes":2000,
"maxTrackers":2000,
I have been trying to play with those numbers but at the end, if I reduce the number I just have to zoom-in more. As I understand I get one node/tracker/information popup per data entry in the current status of the visualization only if there are less nodes than the limit defined.
Would it be possible to indicate Zingchart to place the nodes not in every data point, but with some kind of interval or intention?.
For example, in the second graph I would like to have nodes at the beginning / end and on the jump that the line makes. Or local maximums / minimums.
There are a few options.
1) You could change the "max-nodes" to a lower number. "max-nodes" just determines how many nodes are drawn while "max-trackers" determines how many you can interact with.
2) You could also add the following to your plot object...
marker: {
rules: [
{
rule: '%i%5 > 0',
visible: false
}
]
}
What that does it it checks the index (%i) of each marker. If the index of the marker modulo 5 is greater than 0, we don't display the marker (node). That means that all nodes except those evenly divisible by 5 will be hidden.
I'm on the ZingChart team. Let me know if this helps. Holla if you've got more questions.

Don't connect points with value 0 in highcharts

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/

Remove spaces between axes and columns in Highcharts with only one category

I've a chart generated from a JSON with a lot of data but in only one "x axe" serie. I'm not very clear but an example is better:
My chart
I would like to remove the blank between the columns and the right, in order to zoom in.
I read this post but the solution with
xAxis: {
min: 0,
}
doesn't work on my case (or maybe I'm doing it wrong..) because I have only one item on the X axe, the category "Students"
Here is my fiddle (names are random)
Sebastian's comment should answer the actual question, but I have to question using this set up in the first place.
The category itself serves no purpose if there's only one - the x axis title can fill that role, and eliminate any need for adjusting settings to behave normally.
A separate series for each student is definitely overkill, and results in 5 pages worth of legend entries, which can never hope to be associated with the actual student's column, as there are too many repeats of each color (and you're simply not going to come up with 73 distinctly identifiable colors, nor would it be useful to try...)
I would suggest a few things:
1) use a single series for all of the students. You gain nothing by using 73 different series
2) use each student's name as the category
3) forget about multiple colors - they add nothing useful, and there aren't enough of them even if they did
4) make it a horizontal bar chart instead of a column chart.
The result is a much more user-friendly display.
Example:
http://jsfiddle.net/jlbriggs/nx7z1387/
Also, if the goal is to show the values in a meaningful way, I would strongly consider sorting by value instead of by name. I realize there may be some argument for sorting it alphabetically, but it really shows the data in a much more understandable way when sorted by value.
Example:
http://jsfiddle.net/jlbriggs/nx7z1387/5/
FWIW

Grouped and stacked multiBarChart with NVD3

Possible duplicate question to Bar chart in Javascript: stacked bars + grouped bars
I'm trying to create a stacked bar chart that lets you compare 2 values (dark and mid blue) to last week's data points (the secondary light blues 'behind').
Starting with multiBarChart() with .stacked(true) first I tried merging both weeks into a single array of 14 bars, where the x position could help group the bars. I tried to form my combined array of objects where .x properties' values are 0, 0.3, 1, 1.3, 2, 2.3, etc.
Unfortunately unlike lineChart() it doesn't use the x value for positioning.
Another idea is to exploit the group .stacked(false), providing 4 items (instead of 2) with the same x value. These then appear overlaid on top of each other instead of stacked.
Here the spacing looks good, but how do I stack these 2 by 2?
Hey I just developed grouped+stacked bar chart on d3.js. It is not NVD3 but it may help you.
Source
Demo
Let me just say up front that I am SO not an nvd3 expert. I'm barely past the getting-started stage myself.
That said, it looks like you're making this too hard on yourself.
I think you really want to send nvd3 two sets of data, with the x's matching between the two. (E.g., (1,y1a) corresponding to (1,y2a), then (2,y2a) with (2,y2b), etc.)
You can see this more clearly by the following:
Head to their Live Code page
Select the Group/Stacked Bar Chart.
Select the Data (JSON) tab.
Replace the first function with the following, and observe the resulting x values.:
function() {
return stream_layers(2,10,.1).map(function(data, i) {
alert( 'Stream '+i+': '+JSON.stringify(data));
return {
key: 'Stream' + i,
values: data
};
});
}
Best as I understand it, that's the model you're looking for.

How do you get a y-axis that starts at zero in graphael, if none of your values are zero?

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.

Categories