I have a radar/spider chart.
The input to this chart can be in the format as shown:
[23, 34, 54, [4, 3, 67], 45, 5]
When there is a single value, it is shown as a data point, but when it is an array of points, I want the data to be shown in a boxplot instead (as in the image shown below).
My question is which javascript library is suitable for this type of requirement? I tried using 'Highcharts', but I could not get the boxplot.
I think d3js would be a good choice. You could create two separate charts with one overlaying the other.
Box chart
https://beta.observablehq.com/#mbostock/d3-box-plot
Radar Spider chart
http://bl.ocks.org/nbremer/6506614
Related
I'm planning to use d3js for building a stacked bar chart which showing number of email was sent, opened and clicked, With normal stacked bar, there will be 3 blocks for each column, and stack on each other.
For example: Total email sent was 100, opened was 80 and clicked was 30, then there are 3 blocks with value of each one is 100, 80 and 30. But it's not showing exactly the statistic, so I would like to build an overlapping stacked bar like
Here is an example, but I didn't find any d3 chart or something else supports it, I guess we need to customize them.
I have created stack bar chart with brush and I think it is helpful to you, you need to pass data and also you need to specify x_label_KEY which is you want show on x axis.
I have passed different dataset but you can pass your data to check. For example you can download from here -
https://github.com/Umesh-Markande/D3-Graph-With-Brush/blob/master/stackBarWithBrush.html
I'm trying to change the size of legend marker in C3. In C3 documentation there is nothing about being able to do that, so I'm trying with css.
As far as I can see, legend marker is a <line> tag in svg. So the only thing I can change is stroke properties. If I change stroke-width, I get "higher" marker, but of the same width. Changing stroke-linecap also didn't do the trick.
Is changing marker size possible?
Here is a plunker: http://plnkr.co/edit/yIZ8kFhlWV7v7LY0mXdL
I made a change directly in c3.js (c3.min.js), in function c3_chart_internal_fn.getDefaultConfig().
From
legend_item_tile_width: 10,
legend_item_tile_height: 10,
to
legend_item_tile_width: 16,
legend_item_tile_height: 16,
In the example here,
http://dimplejs.org/examples_viewer.html?id=lines_horizontal_grouped_stacked
How can I add x-labels of month, like just above "Black Mesa" and "Aperture"?
You can just verify the previous example which was already solved for two X-axis labels and the URL is:
Dual X-axes for line Graphs using SVG
and also you can just add two CategoryAxis which is much simple such that:
myChart.addCategoryAxis("x", "Month");
myChart.addCategoryAxis("x","Owner");
I have a chart that shows the number of visits and ratio of sales / visits. Visits are displayed using columns, while the sales / visits ratio is displayed using a line chart.
I wish to move the ratio labels to the right of the chart. Currently, the volume appears on the right hand, secondary axis.
http://jsfiddle.net/2zcLL/8/ (I can't get it to work in jsfiddle, but works fine locally?)
The issue I am having revolves around how Google requires combo charts to be set up, that is, column data series must come before the line data series to work.
What I required looks something like this:
series: {0: {type: "bars", targetAxisIndex:0}, 2: {type: "line", targetAxisIndex:1}},
But the above doesn't work. Any ideas?
First of all, ComboCharts do not require your data series to be in any particular order. You can put bars, line, area, steppedArea, and candlestick type series in whatever order you want.
Second, you only have two data series, so the series option should be:
series: {0: {type: "bars", targetAxisIndex:0}, 1: {type: "line", targetAxisIndex:1}}
Here's an exmple of this working: http://jsfiddle.net/asgallant/m4qwT/. Note that I increased the width of the chart to show the axes properly (they don't display at all given the options as you specified them).
I have a bar chart (http://tributary.io/inlet/4720197) that plots a dataset with a large number of points that I can't get to fill the entire width of the svg. I had the same issue with a line chart and was able to resolve by using rangePoints.
I've been attempting something similar with this chart but can't quite get the right combination (it's using two scales for the grouping) and am unclear how to get the side-by-side bars that I previously accomplished with rangeBand() given that function does not exist with rangePoints. What am I missing?