I'm looking to produce a chart like this with data here
I'm trying to play with this chart on codepen
The attached data file has the following values -
1) Date
2) Open, High, Low, AdjustedClose - Plot Candlestick
3) Volume - Plot Volume
4) EMA1 & EMA2 - Plot moving averages on candlestick chart
5) macd_1, macds_1 & macdh_1 - Plot first set of MACD
6) macd_2, macds_2 & macdh_2 - Plot second set of MACD
7) macd_3, macds_3 & macdh_3 - Plot third set of MACD
The moving averages & MACD need not be calculated via javascript. It's already in the JSON data.
Need an export menu on the chart & smoothed plot of the EMA
There are 3 sets of MACD with macd, macds & macdh (histtogram) values all of which need to be on their own panels & have different positive & negative zone colours
The chart title needs to be of some colour centred at the top of chart. when we move mouseover the chart, the OHLC values & date need to be displayed
There is another field in the data called "Entry_type". When the value is "B" (Buy) a green balloon needs to be displayed below the candle & when it is "S" (Sell), a red colour needs to be display above the candle
All the plots need to be on movable panels (movable so to speak in HTML terms). The idea here is if needed then I would need to be able to keep say 2 MACD panels one below the other on left-hand side & move the third one to the right-hand side so that the actual price chart has good amount of vertical space on the page to show data clearly.
Need to set "groupData" to true, which means MACD, EMA & Volume will also need to adjust to that.
I am new to javascript charting which is making my life really hard to get all of this working. Could I please request some help to implement these features?
All you need to do is to prepare the correct data format for each series and create a separate y-axis for each pane. I have prepared a simple example with your data here:
for (i; i < dataLength; i += 1) {
date = new Date(data[i].Date).getTime();
ohlc.push([
date, // the date
data[i].Open, // open
data[i].High, // high
data[i].Low, // low
data[i].Close // close
]);
volume.push([
date, // the date
data[i].Volume // the volume
]);
if (data[i].ema_1) {
ema1.push([date, data[i].ema_1]);
}
}
Live demo: https://codesandbox.io/s/highcharts-react-d-zn9oj?file=/demo.jsx
Related
I'm using highcharts and trying to add labels to the grid lines of a polar chart, however, I can only add labels to the first axis (which is the y-axis in the cartesian coordinate system).
Polar charts are not well covered (as well as labels on grids) in the highcharts docs. My current approach is placing the labels manually on the correct positions, which will get cumbersome due to dynamic number of categories and sizes of my chart. Additionally, exporting the chart will not support labels anymore.
Background: Let's assume I am selling tickets for clubbing from Monday to Friday (no weekends, bad choice) for the clubs Green, Black, and Blue. Now, I want to know which club performed best on each day, and also how many tickets are sold in total. Therefore, I'd like to apply different scalings to each axis as attached (manually manipulated). I'm currently normalizing the ticket sales for each day to 0…1 which does the job for comparing each single day, but I can't apply the different labels to the axis.
One way might be to add more panes (with startAngle correction) and yAxes with different scales, so dataLabels are showing as in your image.
Example: http://jsfiddle.net/6b9m7Lvb/
Problem - each yAxis can have only a single pane, each series can have only a single yAxis, so there is one scale for a series - no matter what category.
Another way could be to do the same, but have all yAxes linked to each other, so scale is the same for all. Next it is possible to change axis labels and tooltip display, to match your image.
Example: http://jsfiddle.net/6b9m7Lvb/1/
I'm trying to plot a ECG on an IOS application using Core Plot library like this video .I have tried to plot ECG like in the video in my IOS APP.I got the following result.
In general ECG graph should be plotted from the left end of the graph(Lead 1 in Screen shot) after a specific time interval.When i'm plotting ECG in my APP after the specified time interval,Each graph gets plotted on top of the previous graph.
How can we solve this?
You can implement this similar to the "Real Time Plot" demo in the Plot Gallery example app, although your application is a little simpler since you don't need to update the plot space after each frame of new data. You can leave a gap in the plot line by inserting a data point with a NSNull or NAN value between the points on either side of the break.
The plot must redraw after every change to the plot data, so you need to balance the size (pixel dimensions) of the plot and the number of data points with the desired update rate. Note that ranges are specified with a start location and the length of the range. To add a new data point and move the blank space over one spot, reload a range starting at the arrayIndex and length of two (2). Increment the arrayIndex for each new point and wrap around to index zero (0) when you get to the end.
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
Scenario:
1) Three plots: One 'datum' plot (default) and three comparison plots; each with their own Y Ranges.
The user could choose either:
2a) One stand-alone'datum' plot (default) or...
2b) A combo of {datum & 1 comparison plot}: 2 plots sharing a combined range (max/min Y of both).
All three plots are initially created/graph.
They are to be toggled to displayed per their ranges on demand.
Problem: Changing the graph's Y-Range appears to have an unfavorable (or no) effect: sometimes using the wrong Y-Range (e.g., the combo comparison plots is still using the default datum y-range).
Question: What is the best way to change the graph's Y-Range per demand to accommodate the plot scenarios?
Note: I've been toggling the plots via add/remove plot from graph. Essentially, I just re-assign the new Y-Range/graph when I add the new plot(s).
The plot(s) should change to reflect the new xRange or yRange whenever you change them. If you're modifying the existing range, remember that plot ranges are immutable. You need to make a mutable copy of the existing range before modifying it and assigning the new range to the plot space.
I have a chart that I would like to display based on a date range from the user. This particular chart has a data point for every 15 minutes. So there can be a lot of data points for each series if a users selects a large date range. Here is a couple of examples:
623 data points in a series
1470 data points in a series
In the first example the chart does display. In the second example the chart does not display. There is a Highstock demo (52,000 points with data grouping) that works with a lot of data points. I have tried to change the above charts to a highstock chart and still have the same results.
What can I do to fix this?
This is due to the turbo threshold option:
"When a series contains a data array that is longer than this, only one
dimensional arrays of numbers, or two dimensional arrays with x and y
values are allowed. Also, only the first point is tested, and the rest
are assumed to be the same format. This saves expensive data checking
and indexing in long series."
It is set to 1000 points by default. Your chart is not rendering because each point in your series is an object and their number is greater than the threshold.
Here's a jfFiddle demonstrating your plot working with the threshold set to 2000.
Here's the modified section of code:
plotOptions: {
spline: {
turboThreshold: 2000,
...
Another solution would be to encode your series data in a 2-d array instead of having each point represented by and object with x-y properties.
a workaround for turboThreshhold is something like this if you generation your response with PHP:
if(count($responseObj) > 1000){
$modolo = round(count($responseObj) / 1000);
for($i = count($responseObj)-1; $i >= 0 ; $i--){
if(($i % $modolo) != 0){
unset ($responseObj[$i]);
}
}
$responseObj = array_merge($responseObj);
}