I know this can be done in d3 Sankey but I don't need anything that complex. I have my Highcharts sankey complete and all my formatting is done, save one thing.
The chart renders aligned along the centerline. I'd like to set it so that the entire sankey diagram is flat against the top border of the frame.
The first node will be flat against the top, and all other nodes and links will flow down from that point. I've searched here and on the Highcharts support sites, read the APIs, and consulted The Google but I have not turned up anything.
Since this is purely aesthetic it's not a showstopper if I can't do it but since I've now seen it done in d3, I'm hoping there is a Highcharts equivalent.
Thank you
See diagram for reference (ignore colors and link weights of course)see illustration
I've slightly edited the core code and achieved the desired result.
Live working example: http://jsfiddle.net/kkulig/dzdsjwbs/
I've overwritten Highcharts.seriesTypes.sankey.prototype.translate function and commented out two lines in these two code fragments:
1.
fromNodeTop = (
//column.top(factor) +
column.offset(node, factor)
),
2.
toY = (
//toColTop +
(toNode.offset(point, 'linksTo') * factor) +
nodeColumns[toNode.column].offset(
toNode,
factor
)
),
Related
In Vaadin 14.6.1, I tried to create a Vaadin heatmap foollowing the documentation / example from here.
However, I encountered a few problems/questions, listed in descending order of importance below:
The heatmap supported 30 rows by 30 columns; but when I tried 40 rows by 40 columns, the entire heatmap showed a single color (blue in my case).
Is it possible to manually set the minimum numeric value and maximum numeric value for the color scheme. This way, if I plot my data one day and it has values in the range of 0 to 1, but on another dataset from another day, the numeric values range from between 0 and 0.5, the color scheme range won't automatically change (to being between 0 and 0.5) and confuse the user.
In the documentation, it has the following methods listed, but they do not seem to exist in Vaadin 14.6.1
plotOptions.setBorderColor(SolidColor.WHITE);
plotOptions.setBorderWidth(2);
When I hover over the datapoints, is there a way that the tooltip can only show the numeric value (and not the x, y coordinate or the series name etc.?)
Is there any limit to the number of datapoints? I'm hoping that if #1 above is resolved that I can plot a 100 by 100 (ie 10,000) point heatmap.
If I plot 100by100, there will be many labels on the x and y axis. In my case, the x and y axis are actually numerical, so I did what the documentation suggested and just placed category labels in the xaxis and yaxis spots. However, is there any way to only display every "nth" label, so that the x-axis and y-axis is not so crowded? (This would essentially mimic what Vaadin does for normal line charts' xaxis and yaxis).
I'm not that experienced with Vaadin Chart, but these are the questions that I can comment on:
(1) With 40x40 items you go over the threshold of 1000 in which the Chart switches into "turbo" mode for performance reasons. This seems to not be compatible with the heatmap series. You can disable turbo mode by setting plotOptions.setTurboThreshold(0);
(2) Unfortunately the ColorAxis doesn't support this, it only has an API for min and max color. Definitely a valid use-case though, and it seems to be supported by the Highcharts library that the Vaadin Chart uses under the hood. You should consider opening a feature request for this in the Github repo.
(3) This seems to be a documentation issue. The methods are available in later Vaadin platform versions, but not in 14.6.
(5) In theory not, but in practice there will be a huge performance hit in the browser due to the excessive amount of DOM elements (quick test of 100x100 froze the browser for 10s). I'm afraid the component isn't really made for such extreme use-cases. In this case it might be better to utilize a low-level JS drawing library using the canvas, or draw an image on the server-side and display that in the browser. Maybe you can also consider modifying your use-case so that you only display one slice of your data and allow the user to switch between slices.
While using Delphi Seattle 10 and Steema TeeChart Pro VCL FMX 2016.18, I am looking to Highlight a Selection of a Line Graph (multiple series) in the way that Zooming allows / makes a square around a highlighted selection of a Line Graph to indicate which part of it to zoom into (as long as the onmousedown action is in progress).
The purpose of this would be to allow the selection to remain highlighted while the mouse is no longer being clicked, to potentially "Delete" the highlighted Data points. All I need this for is to obtain the (X0 Y0 X1 Y1) values to possibly obtain the CalcPosPoint(X) and remove all the points inside. The data is currently obtained through a Record Struct (Memory Mapped) file, and it will there for be used to set/check for a property "deleted" to indicate on the next redraw of the graph which rows to completely ignore and which to continue printing.
I hope to be able to do this (select from 1 chart), and have it simultaneously draw on multiple graphs. I have tried to look for an example of this feature through the use of TSelectorTool (FMXTee). One of the pages I found referring to such a tool is Interactive data point selection as well as Multiple selections with Selector Tool
And my second question has to do with TeeCharts directly. Where would I find fmx240.bpl as TeeChart_Pro_Firemonkey_Demo.exe requires this file in order to run? I did manage to copy vcl240.bpl from "Embarcadero\Studio\18.0\bin" and put it into "Embarcadero\Studio\17.0\bin"
[Edited]
I have managed to capture / create a sample code (MVCE) from which I can now select a portion and create a square around a particular sample of graph lines.
The control graph right now is the bottom graph (Chart5). If anyone is interested in seeing the code, I have put up a pastebin sample.
PasteBin Sample Code
And a TeeCharts.tar.gz is accessible to anyone who wishes to see a sample of the code, as well as the data sample.
filetolink.com Source Files
I no longer feel the need for mathematical equation to differentiate the top graphs from the bottom (because the bottom axes are automatic where as the top are defined). I intend to only use the space which is adherent to the visible space, and do not intend to extend in either direction (left or right). That means at this point the size of the graph does not matter, because once I over populate the charts above, the position in the bottom graph would become irrelevant, and therefor I do not intend to use the bottom chart.
The next step is to save the positions of the boxes so that they can reappear when the graph is shift from left (past data) to the right (live data). And then uses the buttons above to make the appropriate action to the graphs.
I would like to know what way would be the most sufficient way to record the positions of the rectangles, so when the chart is shifted (via the ScrollBar1), the rectangles are moving with the direction of the scrollbar. But I'm sure I can achieve that.
I think I have found a solution. The red squares are only prevalent for the visual aspect, they can be drawn on, I don't need to do anything special with each chart, as I already know what the X0..Y1 parameters are, they are known from the initial chart. The problem h/e has to do with the initial chart. As long as the screens are all full, I can zoom in correctly w/ alignment with on all the charts (ZoomRect/Rectf(X0..Y1))
But what kind of equation would it take to adjust the charts that are not in the same zoom / max / min when the Chart5.Axes.Bottom.Automatic = True?
From there I just simply have to disable the immediate zoom feature, and allow buttons to become functional, to decide what the next course of action would be.
I have essentially the same problem described in:
JavaScript charting library to handle shading area between two lines
That is to say: color the area between two lines, with the fill color of each portion of the area determined by which of the two boundary lines is higher at that point.
The question referenced above was answered, but the question is two years old and the solution is a little convoluted. Have subsequent advances in Highcharts introduced better / cleaner ways of solving this particular problem?
I'm in the process of evaluating Highcharts as a replacement for our current platform, and have some questions about how we can replicate one of our existing charts:
I've been able to recreate the basic floating stacked column chart, but need help with some of our specific features.
1) Is is possible to replicate the multiple y-axes with the columns displayed to the right of each within a single chart? If not, I suppose we could do 3 charts next to one another - and draw our own titles above (and data table below). If we go this route, is there a way to group all these elements in a single "container"? We need to export these charts to images and need to end up with a single image that looks like the one attached.
2) How would I create the inner box within each column? Do I need to draw it myself, or can I create another column series with a border and transparent fill and somehow set the width of the column to be less than the width of the main columns (note that the number of columns on each chart is dynamic, so the column widths can't be a fixed size. i.e. the inner box width needs to be a percentage of the main column width)?
3) Assuming #2 is possible, I could probably use the same technique to plot the horizontal line - just make the height 0 (or very small) and make the bar wider instead of smaller. Is there a better way?
4) How do I get the x coordinates of the columns so we can align our data table under each column?
5) Can I separate the individual points within the column. You'll notice in my jsfiddle, product 1 and product 2 are vertically aligned in the center of the column. Can I spread them out within each column as the 2 points are in the screenshot?
Thanks in advance for advice on all or any of the above.
Mike
1) You can use multiple yAxis, see the example
2) You can use renderer or mix column/column range and border parameter, example
plotOptions: {
columnrange: {
pointPadding:0.2,
color: 'rgba(255,255,255,0)',
borderColor: '#303030'
}
},
3) Use renderer, as above or scatter series with customied marker
4) Column is shape in point.element.graphic, so you can extract it.
5) as far as I know, it is not possible
I'm currently developing my iOS app and want to depict a graph whose shape is a circle like pie chart, but its radius is dependent on each specific values. Sorry I don't know what the name of such chart is, but I'm sure every sane baseball fans or any sports fans I think should have ever seen such chart. For example, if a team's batting average is the best in the league which consists of 5 teams, its radius is length 5 (or any other length proportional to the other values), and if the same team's earned runs average is fourth in the league, its length is 2, etc, etc... and then those points or "tips" are connected to each other within the chart, and finally the area of the connected figure is filled with any colors.
Sorry for the awful explanation (it's quite difficult for non-English native to explain it more clearly), but my question is, is it feasible to depict such graphs in iOS application? If it can be done in iOS app, how/what library do I use to plot such graphs?
I've read Core Graphics documentation as well as CorePlot example page but I wasn't able to find any such charts in those pages. I don't like the idea of using D3 embedded in UIWebView as suggested in this post since it's slow due to network latency. I don't know any other libraries to be as flexible and versatile as the two libraries above.
I use iOS 7.1 and Xcode 5.1.
[Update]
It's not a bubble chart. Let me explain it a little bit more concretely. The chart is a hexagon if every component of a record or sample is the best among the other competing records or samples and the number of the component to be described is six. In other words, the length of the component from the origin is whatever the longest possible values. But if one component, say, stolen bases, is NOT the best in the samples - say, it's the second best -, then the length of the component from the origin is not the longest; it's the second longest among the samples. And once every components (6 in this case) is plotted on the graph, those plotted points are connected to each other, and it finally is filled with whatever colors to make it the "area" of the record. And then this might be repeated in other records or samples as well. But unlike the bubble chart, one graph is made of one record and six features (or columns or variables) in this case - not all records and one feature (actually, three, but only one is used to make a bubble) which it is in the case of the bubble chart. Hope you get it...
[Update 2]
I finally got such charts on the Internet! The chart is something like this:
.
You're describing a bubble chart. You can make one with Core Plot using a scatter plot. Implement one of the following datasource methods to provide custom plot symbols. Use your data to determine the size of each symbol. They can be different shapes and have varying fills and border line styles, too.
-(NSArray *)symbolsForScatterPlot:(CPTScatterPlot *)plot recordIndexRange:(NSRange)indexRange;
-(CPTPlotSymbol *)symbolForScatterPlot:(CPTScatterPlot *)plot recordIndex:(NSUInteger)idx;