We Keep Coding

Dynamic colours in chartJS based on entries in the array

I have an issue trying to color my bar chart dynamically based on a JSON response.
I know this has been asked a number of times before but none of the answers I've found or tried to work thorugh have got me any closer to a solution.
I've created a quick JSfiddle to show the issue.
I have a number of other charts which are all generated from different JSON strings so have cut this down a lot to try and isolate the issue. I don't have the same problem with the other charts as the number of entries in the Label array in consistent with the number of colours. The offending piece of code is this;
DT_Labels.forEach(function(DT_LABELS, x) {
data.datasets.push({
label: DT_LABELS,
backgroundColor: backgroundColor[x],
data: JSON.parse(DT_Values[x]).map(Number)
});
});
DT_Labels only contains a single entry as the chart is a summarised list - In theory, this would work if I counted the number of DT_Values but if I do that, I can't get the correct data in the chart.
Any ideas how I can reformat this to generate the colours counter based on the number of Values instead of Labels?

Change:
backgroundColor: backgroundColor[x],
to:
backgroundColor: backgroundColor,
Result:
Why does this work?
The backgroundColor property can be specified in a number of ways. Typically it's set to a string, e.g. #abcdef but it can also be set to an array. In this case Chart.js itself will pick the colour from the array based on the index of the data point it is drawing.

Error parsing data when drawing d3 line chart

I'm trying to draw a difference chart (like this one) but using a more modular style.
So far, I've got as far as reading in two dummy CSV files, combining the data, generating a chart, and am now trying to just draw a single line from one part of the data, but I keep getting an error. The full code is available on bl.ocks.org.
The error is:
Error: Problem parsing d="M0,221.73913043478262LNaN,182.60869565217394LNaN,195.6521739130435LNaN,156.52173913043478L500,91.30434782608697L500,91.30434782608697LNaN,156.52173913043478LNaN,195.6521739130435LNaN,182.60869565217394L0,221.73913043478262Z"
which occurs when doing this:
g.select('.line').attr('d', line);
At that point (as seen in the console), data is:
[{"year":1999,"imports":15,"exports":19},{"year":2000,"imports":18,"exports":20},{"year":2001,"imports":17,"exports":30},{"year":2002,"imports":20,"exports":32},{"year":2003,"imports":25,"exports":9}]
xScale.range() is:
[0, 500]
xScale.domain() is:
[1999, 2003]
yScale.range() is:
[300, 0]
and yScale.domain() is:
[9, 32]
I'm guessing there's a simple error somewhere in there, meaning the wrong data is being used to draw the line, but after several hours trying to fix this, I can't see what I've done wrong.

You are using an ordinal scale, which doesn't interpolate between values. The domain of that scale consists of two elements, and it will map those to the two elements in the output range. That is, 1999 is mapped to 0 and 2003 is mapped to 500. For any other inputs, the scale will return NaN as the value isn't in its input domain.
You can fix this by specifying all the years you want mapped in the domain and the corresponding output values in the range. In your case, the easiest would be to use a linear scale though as that seems to be what you're assuming will happen with your current scale. You would simply need to replace the definition of the scale and how the range is set. This is what I have done here.
Alternatively, you could use a time scale as that would give you potentially better labels.

Rounding y-value labels with Morris.js charts

I have plotted some JSON data using Morris.js. The graph works fine, however I'm trying to tweak the labels along the y-axis in a line chart.
Currently, the yLabels are being automatically generated by morris.js using the JSON data's range of values (where x-axis is time). In my example JSON, values range from 54 to -47, so the yLabels being generated are 54, 29, 4, -22, -47. Instead, however, I'd like to round these values to -50, -25, 0, 25, and 50. I would also like the "0" line to stand out, hopefully with a different colour.
As I'm dynamically creating the data, these won't be fixed, in another chart the values may range between -2.5 and +2.5 (in which case I'd want the labels along the y axis to be -2.5, -1.25, 0, 1.25, 2.5).
How would I round the labels morris.js is creating and make the "0" line red?
I have tried creating an array of yLabels (yLabels: ['-50','-25','0','25','50'],), but it didn't work, and even if it had I don't want to "hard-code" values because as I said, each chart will be different and dynamically generated.
Any help is greatly appreciated.
UPDATE
In the first example, I have been able to get what I want putting ymin and ymax of -50 and 50 respectively, but like I mentioned, I don't want to hard-code these values as the ymin/max will vary depending on the JSON being parsed. Is there a way I can always ensure the middle line is always 0, and morris determines the two y values above and below it?

I't cannot be done using Morris options. You will have to go into source and change drawGrid() function in morris.grid.coffee file.

I upped the numLines property of the gridDefaults in morris.js and was able to get everything in my Y-Axis to display. Perhaps you could play around with that property to display your Y-Axis differently.

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 to create a floating graph with time on y axis?

I need to create one graph with its x-axis should be
0,1,2..10
y-axis should be out current time + next 10 times with an interval of five minites.
like this
array = [1.45, 1.50, 1.55, 2.00, 2.05, 2.10, 2.15, 2.20, 2.25, 2.30];
Any body can help me with some sample codes.
Thanks

Look at the charts libraries like flot. Or if you have to write your own code I'd suggest looking at Canvas.

If you want an easy javascript graphing solution check out Highcharts

You should also have a look at Google Charts. Look at the line graph examples.