I have a chart with stacked bars A and B
A is on top of B and A have top corners rounded but not B.
But I want B having rounded top corners when A = 0
You can leverage the ZingChart Stacked Bar chart token “%scale-value-value” (or “%vv”) for this. It’s the sum value of the stacked node and all nodes stacked below it.
Using a rule, compare this sum value to the “%stack-total” (or “%total”) to determine if the node is the top of the stack, then add your border radius:
“rules”: [
{
“rule”: “%vv == %stack-total”,
“borderRadiusTopLeft”: “10rem”,
“borderRadiusTopRight”: “10rem”
}
]
Put that rule in your “plot” object and you should be fine.
I made a demo in the ZingChart studio if you want to check it out.
An alternative (more or less flexible, depending on the setup) is to use (%node-value)(PLOTINDEX) locator to check for the value of the node "below"
"rules":[
{
"rule":"(%node-value)(2) === 0",
"borderRadiusTopLeft":"10rem",
"borderRadiusTopRight":"10rem"
}
]
This basically says: if the value of the corresponding node of the 3rd plot (plot index is 2) is zero, then round the borders.
See: https://app.zingsoft.com/demos/view/ZJ1XMRK3
Related
I wish to customized the Y-axis to text instead on value.
Is there any way I can do it without any plugin?
Here will be my data:
A B C D
1 Lower Limit Upper Limit # Data
2 30S 40S A1234 30A
3 30S 40S A2345 30S
4 30S 40S A1256 30S
I wish my Y axis will be 30S, 30A, 40A, 40S intead of 10,20,30,40
and my X axis will be A1234,A2345,A1256
Is there any possible that I can change the X axis value?
I started with your data, and I added a small lookup table. I inserted a column "Value" (blue text) in your data range that has the Y value corresponding to the label in your "Data" column. You can use a lookup formula for this, for example, the formula in D2 is:
=INDEX($H$2:$H$5,MATCH(E2,$I$2:$I$5,0))
I made a column chart (don't know what type of chart you want, but this technique is widely applicable) using the yellow shaded range in the first data range (top left chart). I selected and copied the green shaded range in the second data range, selected the chart, and used Paste Special to add the data to the chart, using the settings shown in the dialog overlying the top right chart.
This has added another set of columns (bottom left chart), not so useful. I right-clicked the added series, picked Change Series Chart Type from the pop-up menu, and changed just this series to an XY scatter type (bottom right chart).
The XY scatter series is on the secondary axis, also not too useful. I formatted the XY series, and changed the axis to Primary (top left chart below). The 0.5 values in column G make the points line up with the vertical axis of the chart.
I added data labels to the XY series, shown in orange to distinguish them from the black axis labels (top right chart below). I formatted the labels so they appear to the left of the points, and so they used the Value from Cells option, based on the labels in I2:I5 (middle left chart below). If you don't have Excel 2013, you don't have this option, but you could
Manually type the desired text into the labels.
Link each label to the desired cell: select the labels (one click), select the desired label (second click), type = in the formula bar, select the cell, press Enter, repeat for all labels.
Use a third-party add-in like Rob Bovey's free Chart Labeler from appspro.com.
I hid the default axis labels. You can select None for axis labels, and then resize the plot area to make room for the custom labels created above. But I used a custom number format for the axis, which consisted of several space characters enclosed in double quotes. See middle right chart below.
Finally I rescaled the vertical axis so its min and max were 0 and 40 and the major spacing was 10, I formatted the XY series to use no markers, and I changed the label font color back to Automatic (bottom chart).
I want to do something like this
I want to make a point x,y coordinate for one and x,y for another and show two points in a single scatter chart.
I am unable to figure out how to do this
x y x2 y2
1 1 1 8
From data above I need to show two points (1,1) and (1,8)
Depending on your data layout, the data points can be added as one series or as two series. Steps vary with your Excel version.
Try this: click an empty cell that has no data in neighbor cells. Click Insert > XY Scatter chart. This will create a blank XY chart. Now add the series.
Right-click the chart > Select Data > Add > select the range(s) for the X and Y values. Repeat for any other series.
If the data is in one contiguous table, you only need one series.
I am having some trouble with applying a colour scale on circles on a scatterplot.
What I did to set up the scale was:
var color = d3.scale.ordinal()
.domain(d3.extent(dataset, function (d) { return parseFloat(d.Weight); }))
.range(["#D6F5D6", "#ADEBAD", "#84E184", "#5BD75B","#32CD32"]);
And then apply the color to the circles with:
.attr("fill", function (d) { return color(d.Weight) }
But from the graph I can tell that the colours are not correct, in fact I see some values that are higher that have a lighter colour. I think the problem is that the values get read like strings, and in fact if I do the console log, the values that are not the min or max appear as strings, and I believe that this is the problem why I get wrong color values.
I tried also to set every d.Weight as a number in the domain, like so:
dataset.forEach(function (d) { d.Weight = +d.Weight; });
But it doesn't work either. Attached here's an image of what I'm getting:
The X Axis is set to the Weight, so the colour of the points should be from lighter to darker going left to right, but it clearly isn't:
Any help is appreciated, thanks!
EDIT Forgot to mention that i tried with scale.linear() but with it I get this result:
Just the first values get picked by the circles
Ordinal scales work differently from linear scales in that no interpolation between domain elements is done. To quote the documentation:
The first element in values will be mapped to the first element in the output range, the second domain value to the second range value, and so on.
This means that your input values are being mapped incorrectly, as you're only using min and max to set up the domain. For your purposes, you probably want a linear scale.
When using a linear scale, you'll have to tell D3 how to interpolate the values of the output range, e.g.
.range(["#D6F5D6", "#ADEBAD", "#84E184", "#5BD75B","#32CD32"])
.interpolate(d3.interpolateRgb);
Note that in this case, you also need to provide the same number of input values as output values:
Although linear scales typically have just two numeric values in their domain, you can specify more than two values for a polylinear scale. In this case, there must be an equivalent number of values in the output range.
In your case, it would be easiest to simply take the min and max and the two extreme colours.
I am using MS Chart Control to draw simple 2D chart.
I would like that each point have label which contain his own coordinates, i.e: 2,5 (where 2 is X, and 5 is Y).
I found that in Series property is something like IsValueShownAsLabel, but it shows only Y value of point.
My question is: what is the simplest way to reach that?
OK, i found an answer.
chart1->Series["Series1"]->Label = "(#VALX;#VAL)";
or in Properties of chart -> Series -> Label and here type: (#VALX; #VAL)
Please view this image (focus to red around area):
I cannot get it to work with the letters, but I can get it to work with numbers (=CODE(A1)-CODE("a")+1):
UPDATE after reading Jean-François's answer (but on another computer):
Added a second series just for the custom labels
Show data labels for the new series
Explicitly set the Y axis minimum at 0
Deleted the original X axis labels
Deleted the legend entry of the second series
A few more steps and we're there:
multiplied the X axis values by 10, to adjust granularity for positioning stuff
subtracted 5 for series1 values, to get the data in the middle between major tick marks
played with series2 values, to get the labels also in the middle between major tick marks
Here's an easier way.
Set up the data like this:
Select the first two columns (blue) and insert a column chart (zero value columns do not appear):
Select and copy third and fourth columns (red), select the chart, Paste Special as new series, check first column and first row boxes (it's added as another column):
Right click new column series, choose Change Series Chart Type, and select the XY with Lines style:
Right click XY series, choose Format Data Series, change to Primary Axis: