Is there a way to have a stacked sparkline widgetColumn in ExtJS? - extjs

Ext.js has the Ext.sparkline.Bar class. Is it possible to make that bar chart stacked? I have implemented a cartesian as the widget for the widget column to achieve this effect, But it has led to very long load times (particularly when calling grid.reconfigure()). I'm wondering if a more lightweight version can be achieved via a sparkline.
The reason I'm thinking it may be possible is because of the stackedBarColor config in the Ext.sparkline.Bar class. Aside from that, I haven't been able to find anything in regards to implementing it.
Anyone have any idea?

If you look at the source for Ext.sparkline.Bar, do a CTRL+F, type: 'stacked'. You can follow the logic there. at the most basic level you can achieve a stacked bar chart by passing in an array of arrays into the values config: values: [[0,1,2,3,4,5],[0,1,2,3,4,5]]. Each array will be its own stack.

Related

Drawing a bar chart in the background of candlestick chart in apexchart

I am playing with candlestick graphs (example from here: https://apexcharts.com/javascript-chart-demos/candlestick-charts/basic/) everything work as expected.
However, I am struggling with adding my signal data for a visual representation of the graph.
I am unable to find a solution that works I was thinking I can somehow fine-tune a timeline - I tried chart.js/apexcharts and for now, I believe the closest will be with the second framework.
What I need is a bar chart that can be used in numeric ranges for the X and Y-axis as presented below. (the goal is to be able to add the green bar as presented)
Is there an easy win or an idea of how to approach this?
Is there something I am missing?
That is my current solution (line graphs with stopWin/stopLose and entry price).
Still suboptimal - but works and is easy to achieve.
After weeks of playing around with it - the solution stayed:
I got two instances of apexcharts one with candlestick and one with line graphs
they are in a single div with CSS playground and position absolute.
I am passing standardised min/max values and has to have the same amount of elements in them (line graphs are allowing You to add null values which allow using this solution.
The final version work is repeatable and looks good.
if you need some help in similar case - feel free to reach out ;)

Angular: moving charts into different bindings

New developer here working on some thing that's a little out of my depth.
I'd like to have dynamically generated charts into rotate into different, predetermined locations on my page.
for example:
chart 1
chart 2
chart 3
would rotate thru a list of 5 charts to display
chart 2
chart 3
chart 4
I feel like my best option here is to create objects (JSON maybe?) of these charts and to have them stored in an array, then have the array loop through the binding locations and 'plop' (for lack of better word) the object's details into the next spot in the rotation, which theoretically would allow the chart to render in the new location; with a timer driving the changes.
I would probably use pre-set frames to designate the slots being rotated into, though I'm less positive that is the right way to handle that.
I know this is possible with angular, and despite my best efforts I cannot for the life of me determine the best way to go about this. I'm really very open as to the method this gets done, but am at a complete loss on how to set up the data-binding framework to accomplish this.

AngularJS Dynamic Slider Control

I am working on a project that requires a slider control that corresponds to an image and or a multitude of div objects. The spacing of the slider is irregular (the steps could be [1,4,7,13,14,16...]). Also the steps will correspond to specific spots on an image and or to a specific div object. The perfect slider would be dynamic and re-size with the screen but that may be actually impossible.
The hard part is that I am unable to use JQueryUI, instead I am limited to using controls that work with AngularJS.
I have been looking for hours and cannot find anything that would be a good starting point. So my question is whether anyone has found a good slider control to use with AngularJS?
This one fits some of your criteria
angularjs-slider

How to build a modular grid?

A lot of the websites these days is built using grids, pre-made or custom ones. What I noticed is that most of these grids are based on rows, and usually work with the width of the columns, not taking the height of the elements (modules) into account.
I was wondering what the best way (or what the possibilities are) of building a modular grid is? By modular grid I understand such grid where the individual modules could be set in both width and height and be fluid in dependence on the screen. A grid where you'd know you have let's say 12 columns and 9 rows (the width / height of each would be given), and you'd be able to fill it with modules like a mosaic (that makes it sound almost too simple).
Here's an example picture of what I have in mind (picture borrowed from here):
I came upon a couple of examples, but most of them weren't responsive or were built using Flash. I believe there is a way to do it, just not sure myself how.
I know there might not be ONE correct way, but I'm curious about the possible techniques to go about it. Thank you!
This layout technique is commonly known as masonry, here are a couple of responsive masonry links to get you started:
http://masonry.desandro.com
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
good luck!
I would have to say your best option would be to build it using Bootstrap or Foundation, since they are set up to handle this kind of thing.They have classes that, assuming you use a 12 column grid to start, let you pick how many columns they can take up.
links:
http://getbootstrap.com/
http://foundation.zurb.com/

Curving chart diagram

My goal is to have a diagram which look like this
Each arrow should be a one dimensional chart, where point are displayed (colors and point size depends on some values)
I'm building my own chart system because I spent a few hours looking for one which allow to custom markers (size and colors, and maybe even shape) but I couldn't find one.
Actually the only one I found is dynamic data display 2.0 which is only proposed in Silverlight.
My biggest problem is the two curving chart I have to do at the top of the diagram.
I tried to use PathListBox control, but because it's a listBox, I couldn't display items at fixed X position (like using a chart).
I'm not asking for a full perfect solution, but can someone give me advices, or clues ?
How would you manage to do something like that ?
It should only be a XAML work here, because all the data are already ready in a ListCollectionView (i'm using MVVM).
Thank you !

Resources