I have these two ValueAxes:
{
...
minimum: 0,
maximum: 100,
strictMinMax: true,
autoGridCount: false,
gridCount: 10
},
{
...
minimum: -15,
maximum: 215,
strictMinMax: true,
autoGridCount: false,
gridCount: 10
}
Now the grid lines of both axes are creating a total mess in the chart and its hard to not get confused while trying to read values. The reason for this is, that AmCharts rounds the labels up or down to ten-steps, not respecting the gridCount.
I need to know if there's a way to get AmCharts to stop trying to round the labels. I'm totally fine to have numbers like 62 as a label, as long as it reduces the amount of grid lines.
My workaround is pretty easy.I introduced a new option, so that the normal strictMinMax will still work: strictGridCountI used the implementation of strictMinMax and added these lines just a few lines above the place where strictMinMax is used:
if(_this.strictGridCount) {
if (!isNaN(_this.minimum)) {
_this.min = _this.minimum;
}
if (!isNaN(_this.maximum)) {
_this.max = _this.maximum;
}
_this.step = (_this.max - _this.min) / _this.gridCount;
}
Related
Well, I want to color my scatter using a vector with values. Actually, I want to use other dimension than the one used for creating the scatter.
Using these lines it gives a color to my scatter using the values given by the dimension that scatter is built on.
.colorAccessor(function(d) {return d.key[1]})
.colors(d3.scaleSequential(d3.interpolateOranges))
.colorDomain(y_range)
y_range = [y_min, y_max]
I tried to include the column for color in the dimension of the scatter, but it slows down the process of filtering. Something like this:
scatterDim = crossFilter.dimension(function(d) { return [d[it.variable[0]], d[it.variable[1]], d[it.color]]})
.colorAccessor(function(d) {return d.key[2]})
.colors(d3.scaleSequential(d3.interpolatePlasma))
.colorDomain([colorUnits[0], colorUnits[colorUnits.length - 1]]),
I want to have a different dimension for color:
colorDimension = crossFilter.dimension(function (d) { return d[it.color] }),
colorGroup = colorDimension.group().reduceCount(),
colorAll = colorGroup.all(),
colorUnits = [],
count = 0;
for(var color in colorAll)
{
colorUnits[count] = colorAll[color].key;
count++;
}
.colorAccessor(//some different code for my vector colorUnits or even for dimension?!//)
.colors(d3.scaleSequential(d3.interpolatePlasma))
.colorDomain([colorUnits[0], colorUnits[colorUnits.length - 1]]),
I would also like to know how to use scaleOrdinal for color. In case that the vector colorUnits contains strings.
The name "dimension" is a little confusing in crossfilter and dc.js. It isn't used to describe the "Y" (aggregated) values, or the color.
It really means, "I want to bin my data by this key, and filter on it."
The reason you will find color as a third element in dimension keys in many examples is that it's expedient. It's easier to change the keys than the aggregated values. But it doesn't really make sense.
The fact that your chart got slower when you added color to your dimension key tells me that you don't have a unique color for each X/Y pair. Instead of drawing a dot for each X/Y pair, you end up with a dot for each X/Y/color triplet.
You also don't need to create a separate color dimension unless you want to bin, aggregate, or filter on color.
Assuming you only want one dot per X/Y pair, you need to decide which color to use. Then you can change the reduction, instead of the key, to add this data:
scatterDim = crossFilter.dimension(function(d) {
return [d[it.variable[0]], d[it.variable[1]]];
}),
scatterGroup = scatterDim.group().reduce(
function(p, v) { // add
p.count++; // reduceCount equivalent
p.color = combine_colors(p.color, v[it.color]);
return p;
},
function(p, v) { // remove
p.count--;
// maybe adjust p.color
return p;
},
function() { // init
return {count: 0, color: null};
}
);
If you don't care which of the colors is used, you don't need combine_colors; just use v[it.color]. Otherwise, that's something you need to decide based on your application.
Now the scatter group has objects as its values, and you can change the scatter plot to take advantage of them:
scatterPlot
.existenceAccessor(d => d.value.count) // don't draw dot when it is zero
.colorAccessor(d => d.value.color)
If in fact you do want to draw all the dots with different colors, for example using opacity to allow overplotting, you probably need a canvas implementation of a scatter plot, because SVG is only good up to thousands of points. There is one in the works for dc.js but it needs to be ported to the latest APIs.
I would also like to know how to use scaleOrdinal for color. In case that the vector colorUnits contains strings.
Not sure what you mean here. scaleOrdinal takes strings as its domain, so
.colors(d3.scaleOrdinal(colorUnits, output_colors))
should work?
Example
Since I'm failing to communicate something or another, here is an example. The color strings come from an array since I don't have an example of your data or code:
const names = ["Zero", "One", "Two", "Three", "Four", "Five"];
speedSumGroup = runDimension.group()
.reduce(
function(p, v) { // add
p.count++; // reduceCount equivalent
p.color = names[+v.Expt];
return p;
},
// ... as before
);
chart
.colorAccessor(d => d.value.color)
.colors(d3.scaleOrdinal(names, d3.schemeCategory10))
Once again, if the method isn't working for you, the best way to figure it out is to log speedSumGroup.all(). I get:
[
{
"key": [
1,
850
],
"value": {
"count": 1,
"color": "One"
}
},
{
"key": [
1,
880
],
"value": {
"count": 1,
"color": "Three"
}
},
{
"key": [
1,
890
],
"value": {
"count": 2,
"color": "Five"
}
},
// ...
]
Example fiddle.
I'm using jqplot for represent several parameters in series across the time. So I have one Xaxis represent the time and several Yaxes(yaxis, y2axis, y3axis, y4axis, etc.). Each parameter is in different units(temperature, voltage, current, pressure, etc.), so all the Yaxes set to auto for min and max because I dont know what values will come from the server. I'm using ajax request to fill the data and next for real time updating the series with new points.
So now I want for the user to be able to set manual min and max for any Y-axe. So I set by this way:
var axis_name="y2axis";
console.log(plot.axes[axis_name].max);
var new_max=prompt("Please enter max value?");
console.log(new_max);
var plotOptionsEval = "plotOptions = { axes: { "+axis_name+": { max: \""+new_max+"\" } } };";
eval(plotOptionsEval);
console.log(plotOptions);
plot.replot(plotOptions);
console.log(plot.axes[axis_name].max);
So , when I set new max for the first axis(yaxis) everythins is fine.
But when I try to set the max parameter of any other axis - y4axis for example something gone wrong and that max value has a some different value from this the user is entered.
This is a debug from console.log output
50
12
axes: y4axis: {max: "12"}
350
Any ideas?
So I have found a solution if someone asking the same.
The trick is you need to set min and max parameters for all Yaxis in your plot. So I have prepared the min/max axes object with its original values:
var plotOptions = {
axes: {
yaxis: {min: 11.568, max: 11.582}
y2axis: {min: 11.688, max: 11.702}
y3axis: {min: 6.390000000000001, max: 6.53}
y4axis: {min: -300, max: 50}
}
}
Next set the desired Yaxis min/max parameter in the plotOptions object:
var new_max=prompt("Please enter max value?");
plotOptions.axes.y2axis.max=parseFloat(new_max);
and finally replot it:
plot.replot(plotOptions);
I built a line chart using DC JS with an ordinal x-axis. It works, except that there is some outer padding on the x-axis that I can't seem to get rid of. I'd like the left-most and right-most data points to be flush with the edges of the chart, with no padding. Hopefully I'm not missing something obvious.
I think I'm setting up the x-axis scale incorrectly. Given a data set like this:
var data = [
{ key: 'Monday', value: 3000000 },
{ key: 'Tuesday', value: 3100000 },
{ key: 'Wednesday', value: 3500000 },
{ key: 'Thursday', value: 3070000 },
{ key: 'Friday', value: 4500000 },
{ key: 'Saturday', value: 3003030 },
{ key: 'Sunday', value: 5010000 }
];
Here's what I'm doing with the x-axis scale:
var ordinalScale = d3.scale.ordinal().domain(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']).rangeRoundBands([0,chartWidth]);
chart.x(ordinalScale).xUnits(dc.units.ordinal);
I've also looked at the D3 documentation on ordinal scales, but that hasn't helped yet.
Here's a screen shot (extraneous padding marked in red):
http://imgur.com/a/zmfF4
Here's a working JS fiddle that demonstrates the problem:
https://jsfiddle.net/qvp4fpzy/4/
It's a little confusing dealing with both dc.js and d3.js features around range bands.
dc.js has its own built-in calculations for bar/line x positions, but if the x scale is ordinal, it automatically chooses .rangeBands:
if (_chart.isOrdinal()) {
_x.rangeBands([0, _chart.xAxisLength()], _rangeBandPadding,
_chart._useOuterPadding() ? _outerRangeBandPadding : 0);
} else // ...
source link
So I don't think your call to .rangeRoundBands has any effect. (Should dc.js use rangeRoundBands instead of rangeBands? Maybe, but it doesn't weight on this question.)
It's the third parameter to rangeBands that you want to influence, and that's controlled by chart._outerRangeBandPadding(). (Ignore chart._useOuterPadding() - that's a backward compatibility thing.)
So all you need here is
chart._outerRangeBandPadding(0);
Working fork of your fiddle.
I am showing multiple Meter Gauges on a single page, in conjunction with Bootstrap, to provide responsiveness. What is obvious is they are all calculating slightly different sizes, so I hoped to use diameter.
Here is my working code:
s1 = [322];
$.jqplot('spend',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals:[200, 300, 400, 500],
intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
intervalOuterRadius: 56,
ringColor: '#222',
padding: 3,
tickColor: '#111',
ringWidth: 4,
needleThickness: 11,
shadowOffset: 10,
label: "£"
}
},
title: 'Spend'
});
If I add
diameter:200,
I get no output, and:
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
I have also tried
diameter:50,
and
diameter:500,
in case I was not providing adequate space, or too much space, but I rather doubt it, as intervalOuterRadius is set at 56, I have also assumed that
diameter:200
is correct syntax given that
intervalOuterRadius:56
(as well as various other values) is correct. I cannot find anyone else who has had this problem, and have had no response on the jqplot google group.
Oh yeah, and I'm primarily writing for IE8 atm but it will need to be used on ie11 in time.
I'm using JQPLOT to create graphs. But I have a lot of data for the x-axis. Now, i need to limit the number of ticks. I'm using numberTicks for this but doesn't work.
xaxis: {
numberTicks:15,
max: x_limits.max,
min: x_limits.min,
renderer:$.jqplot.CategoryAxisRenderer,
rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{formatString:'%#m/%#d/%Y'}
},
I'm using CategoryAxisRenderer. When i use DateAxisRenderer, it works. -.-
EDIT (wrong answer) It doesn't work because it takes account of your minimal and maximal xaxis values. Try to remove them to take into account the "numberTicks" options (or just specify one of them but I'm not sure it will be correct)
EDIT2 : You have to remove the renderer and rendererOptions from the xaxis part :
xaxis:{
//renderer:$.jqplot.CategoryAxisRenderer,
//rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
max: 40,
min: 1,
numberTicks: 5,
}
Please see a working example here with 5 ticks.