How could be the best way of implementing a 3D fft chart? - charts

I'm trying to set up an interactive cascading spectrum chart, but it hasn't been such a trivial thing for me. Here's a picture of the goal I'd like to achieve:
example
It's an fft graph, I have all these points already. Do you have any tips or any examples that I could follow?
I've tried using graphics-specific libraries, but mostly they work either with points only or with surface graphics.
What I have right now is a simple hello world using Babylon JS: https://playground.babylonjs.com/#S7U8U8#1
Any help, guidance, examples will be a matter of great gratitude.
Best Regards,
Matheus

You can use column series in Highcharts with added and enabled 3d module.
Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 20,
beta: 30,
depth: 400,
...
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/nxwd3m2a/
Docs: https://www.highcharts.com/docs/chart-concepts/3d-charts

Related

Not able to getting highcharts legend label in order

i'm trying to show highchart legend in order like this
but im getting like this
please help me how to show in order like in first image
I assume what you want is the columns lined up. That just requires legend.alignColumns = true.
legend: {
alignColumns: true,
width: 500,
},
http://jsfiddle.net/blaird/1fu20j4g/7/
Highcharts has a great API reference. Here's everything you can do to a legend: Highcharts Legend API Reference

HighCharts Bullet Chart appears to ignore xAxis minTickInterval

See this JSFiddle of a bullet chart showing decimal values in the x-axis.
https://jsfiddle.net/5az19o2t/
I've tried to remove the decimals with the following options:
{ xAxis: { minTickInterval: 1, tickInterval: 1, allowDecimals: false }}
None of those options appear to do anything. How can I define the tick intervals on a Bullet Chart?
Thanks in advance!
I'm going to answer my own question, and then maybe someone can explain to me why it is.
Placing those settings on the Y-Axis config does adjust the chart. Doesn't basic charting 101 dictate that X-Axis is left to right, and Y-Axis is up and down?
{yAxis: minTickInterval: 1} or {yAxis: allowDecimals: false}
both work.

Using a Spider chart in dojox. Is it possible to remove the fill and leave only the stroke of the series?

I'm using the dojox/charting/plot2d/Spider to show a Spider chart and having at least 3 series at a time in the same chart makes it difficult to see the actual strokes that are the important thing there. Is there any way to remove the fill?
I've tried the following but it ends up black.
chart.addSeries("test", { data: whatever }, { fill: "transparent" });
Any help is appreciated!
I've found the right option! If you set seriesFillAlpha to 0 when adding the Spider plot then the fill doesn't show up.
Example:
new Chart(someNode)
.addPlot("default", {
type: Spider,
seriesFillAlpha: 0.1
});
Hope this helps somebody.

Is it possible to create a bubble polar chart with Highcharts?

I'm trying to create a bubble polar chart with Highcharts, is this possible? Documentation isn't clear about this, and my attempts so far haven't been successful.
It would something look like this:
What have you tried? It's just polar chart with series bubble, see: http://jsfiddle.net/ZYKQG/
series: [{
type: 'bubble',
name: 'bubble',
data: [[100,2,3.3],[45,5,3.2],[225,5,3.1]],
pointPlacement: 'between'
}]

In Dojo, how can I drawing custom markers at data points?

I'm using Dojo for drawing my charts. I need to draw an overlay at certain points. Almost like a tooltip that’s always shows. It can be a stack of values or an icon that display above, below or next to the data-point.
Does anyone know how I can accomplish this?
Does anyone know how I can access the list of screen coordinates for each plotted data-point?
My theory is; if there is no way to draw a persistent and custom tooltip, to draw over the chart and position my custom object in relation to the point coordinate.
Another option would be to draw a custom marker. (Not like the normal SVG paths.)
Please don’t suggest another charting library. I need to know how to do this in Dojo.
Thanks in advance.
I am not sure if you already have found an answer to using custom markers. I am using the SVG path variable for plotting the custom marker.
For eg:
var custom_marker = "M150 0 L75 200 L225 200 Z" // a triangle
var data = [{x: 10, y: 20, marker: custom_marker}, {x: 15, y: 25, marker: custom_marker}] // and so on
Feed this data into dojo chart and you can plot the custom marker.