I would like to create a chart similar to
(the line shapes, colors, flag shape are not important).
Each of the flags represent an x value and the x axis boundaries are fixed. This is very similar to a highchart demo (the round and rectangular flags along the x axis) but it looks like the flags are added (via options.series.push) to existing data.
The documentation mentions however that
Used alone flag series will make no sense.
Based on the demo, I tried to create a simple example by forcing the type to flags but it does not render
$('#container').highcharts({
series: [{
type: 'flags',
data: [{
x: 10,
title: 'hello',
text: 'say hello'
}, {
x: 20,
title: 'world',
text: 'say world'
}, {
x: 50,
title: 'bonjour',
text: 'say bonjour'
}],
shape: 'circlepin',
width: 16
}]
});
Is there a direct way to create such 1D flag charts?
If you check the console for errors you can see that you are getting this error:
Uncaught TypeError: $(...).highcharts is not a function
I wrapped your highcharts builder code in a function tag and it loads fine now. See this live demo.
Related
I manually add a custom matrix to a YAML file for openCV parameters, the problem is it cannot read the matrix and so OpenCV returns none-type. I do not know what is happening here as I tried editing both in notepad and visual studio code.
%YAML:1.0
---
test_matrix: !!opencv-matrix
rows: 2
cols: 2
dt: i
data: [ 1, 1, 1, 1 ]
I'm using the highchartr package to create an interactive chart.
My chart has lines on it corresponding to different series. In addition, I would like to have shapes at certain points on the lines.
Its very easy to get the points in the right place. However, I would like to map the point color to the line it is associated with. And when the user clicks on the legend entry for the line, I'd like the associated points to be toggled as well.
The code looks like this:
highchart() %>%
hc_add_series(
type="line",
marker=list(enabled=F),
data=input_data,
mapping=hcaes(x=x, y=y, group=series_name)
) %>%
hc_add_series(
type="point",
data=input_data %>% filter(! is.na(marker)),
mapping=hcaes(x=x, y=y, color=series_name, fill=series_name, group=series_name, shape=marker)
)
The result gets the points in the right place. But the point color is on a different color mapping from the lines. Clicking on the entry for the line in the legend toggles only the line - the points show up as separate entries by series_name.
What
What can I do so:
- The points and lines share the same color mapping
- The points and lines can be toggled together by clicking on the line in the legend
- The points show up separately in the legend based on their shape rather than their color?
Thanks!
Generally, it can be achieved in at least few different ways. It all depends on your data which you haven't provided (I created a sample data).
Additionally, I will provide all the examples in jsFiddle (JavaScript) because it is faster to explain something that way with a quick online example.
The final answer will contain R code (maybe with some custom JavaScript if needed, but all will be reproducible in R.
First of all, your assumption that you need a separate series is wrong and causes problems. If you want markers on your line with the same color and you want to toggle them together on legend click, then you don't need separate series - one series with markers enabled on some points is enough, see this example: https://jsfiddle.net/BlackLabel/s24rk9x7/
In this case, the R data needs to be defined properly.
If you don't want to keep it simple as described above, you can keep lines and markers as separate series as in your original question.
In this case, you can use series.linkedTo property to connect your "point" series to line series (BTW in Highcharts there is no something like "point" series type, it is "scatter" series type. Another reason why your code is wrong and is not working and you got unvoted), but there is a problem with it in Highcharter - doesn't work, seems like a bug and should be reported on Highcharter GitHub repo.
This is a JavaScript version which works fine: https://jsfiddle.net/BlackLabel/3mtdfqLo/
In this example, if you want to keep markers and line series in the same color, you can define colors manually or you can write some custom code (like I did) that will change the color for you automatically.
And this is the same R version which should work, but is not:
library(highcharter)
highchart() %>%
hc_add_series(
data=list(4, 3, 5, 6, 2, 3)
) %>%
hc_add_series(
data=list(14, 13, 15, 16, 12, 13),
id="first"
) %>%
hc_add_series(
data=list(10, 8, 6, 2, 5, 12),
id="second"
) %>%
hc_add_series(
type="scatter",
linkedTo="first",
data=list(list(1, 3), list(2, 5))
) %>%
hc_add_series(
type="scatter",
linkedTo="second",
data=list(list(1, 13), list(2, 15), list(3, 16))
) %>%
hc_plotOptions(
line = list(marker=list(enabled=F))
)
There is probably something wrong with hc_add_series function.
As a workaround, you can write it all as a custom JavaScript code, which (again) works fine:
library(highcharter)
highchart() %>%
hc_plotOptions(
line = list(marker=list(enabled=F))
) %>%
hc_chart(
events = list(load = JS("function() {
this.addSeries({
data: [4, 3, 5, 6, 2, 3],
id: 'first'
});
this.addSeries({
data: [14, 13, 15, 16, 12, 13],
id: 'second'
});
this.addSeries({
data: [10, 8, 6, 2, 5, 12]
});
this.addSeries({
type: 'scatter',
linkedTo: 'first',
data: [[1, 3], [2, 5]]
});
this.addSeries({
type: 'scatter',
linkedTo: 'second',
data: [[1, 13], [2, 15], [3, 16]]
});
}")))
Of course, last examples don't contain functionality that changes colors - you can copy it from the jsFiddle above.
I have a multi-series Highcharts chart working fine when it just grabs data from a CSV file I create. I am trying to add a (loess) regression curve to it with the highcharts-regression plugin, but simply enabling the default regression results in the chart not showing up at all. The application is at http://bmcnoldy.rsmas.miami.edu/vk/
First, the proper JS file for the plugin is called in my HTML: https://rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js
None of the examples for highcharts-regression use multiple series that were imported from the built-in CSV import.
The guts of the chart-making (if regression:false then the chart works and shows up, if regression:true it breaks):
$.get('chart.csv', function(csv) {
$('#container').highcharts({
data: {
csv: csv
},
series: [{
(basic series options that work),
regression: true,
},{
(basic series options that work),
regression: true,
},{
...
}]
});
});
Here's a snippet of my five-series CSV file for reference:
Date,Record High,Average High,Daily Average,Average Low,Record Low
"01-Jan-2000",80.2000,75.0000,72.0000,68.2000,45.5000
"02-Jan-2000",79.7000,75.0000,72.1000,68.3000,49.1000
"03-Jan-2000",79.2000,73.7000,70.0000,65.6000,46.4000
"04-Jan-2000",79.0000,72.0000,67.8000,63.7000,43.7000
"05-Jan-2000",80.2000,71.8000,67.4000,62.5000,44.2000
"06-Jan-2000",78.3000,73.0000,68.7000,63.5000,41.0000
"07-Jan-2000",78.3000,71.9000,67.5000,62.3000,45.5000
Inside of each series config, I tried adding
data: [],
just so the data object was present... it didn't matter. But, is there a way to set data to be the proper columns in the csv object like
data: [[csv[0]],[csv[1]]],
or something like that? Would that matter?
I just wanted to add a Loess regression curve to each of the five series, which looked so straightforward from the examples at https://www.highcharts.com/products/plugin-registry/single/22/Highcharts%20regression!
Thanks!
First of all, please notice that linearRegression indicator serves for finding single values (points, not lines) for the given period.
This demo illustrates how to get the regression line in Highchstock (it’s gonna work with data passed as data.csv too (although I didn’t do it to keep the clarity)): http://jsfiddle.net/BlackLabel/w0ohb647/
Highstock offers three indicators that will help us to find the line: linearRegressionSlope, linearRegressionIntercept and linearRegressionAngle. If we set their params.period to be the same as the data length then each of these indicator series will have only one point. It turns out that we can use y values of these points (slope, angle, intercept) to find the equation of the straight line we need: y = slope * x + intercept.
this.addSeries({
type: 'linearRegressionSlope',
linkedTo: 'recordHigh'
}, false);
this.addSeries({
type: 'linearRegressionIntercept',
linkedTo: 'recordHigh'
}, false);
this.addSeries({
type: 'linearRegressionAngle',
linkedTo: 'recordHigh'
}, false);
Highstock doesn’t offer any structures for representing infinite straight lines so we have to mimic it as a line segment:
data: [regressionLineStart, regressionLineEnd]
The parameter that you might find strange is interceptOffset. It has to be implemented because the place where our regression line crosses the mathematical y axis (y = 0) happens in 1st Jan 1970 (timestamp = 0) and we have to “pretend” that the mathematical y axis starts at y = Date.UTC(2018) (for purposes of my workaround).
Notice that auxiliary series (linearRegressionSlope, linearRegressionIntercept & linearRegressionAngle) don't ever appear thanks to setting redraw argument to false in addSeries and remove methods.
It looks like filling a histogram with .fill is faster than filling with .fill.numpy.
For both cases my data is in a namedtuple:
Event = namedtuple("Event", ['nHGPulses', 'HGs1',
'HGs2', 'nHGs1', 'nHGs2', 'area_phd', 'width'])
and the histogram I am trying to fill is
h2_areawidth_pulses = hg.Bin(100, 0, 500, lambda x: x[0], hg.Bin(1000, 0, 5000, lambda x: x[1]))
for event in events:
for a, w in zip(event.area_phd, event.width):
h2_areawidth_pulses.fill((a, w))
or for the numpy case
h2_areawidth_pulses = hg.Bin(100, 0, 500, lambda event: event.area_phd, hg.Bin(1000, 0, 5000, lambda event: event.width))
for event in events:
h2_areawidth_pulses.fill.numpy(event)
Under identical conditions .fill runs in 10s while .fill.numpy takes 195s.
Am I doing something wrong or is this behaviour expected?
That can happen in cases with large numbers of bins. In Histogrammar's Numpy filling, the data to be sent to each bin is separately masked: with 100 bins, you run over the data 100 times. (That's not the case for the jit-compiled algorithms, such as cling and cuda.)
The culprit for this bad algorithm is Histogrammar's generality— at that level of structure, I don't know what's below it, so I have to provide separate inputs to each bin.
This is not the case for histbook, Histogrammar's successor. Now that I've added SparkSQL-filling to histbook, it may satisfy your needs. When it's a complete replacement, I'll put a redirect on Histogrammar's homepage, but for now, I've been speaking the word however I can.
in my project I'm using highcharts/stockcharts. See my JS-fiddle example for a simple graph with X-axis 1 to 10, but no data for "position 9". I want no line to be drawn between 8 and 10, since there is no data for 9.
I've been playing with the connectNulls option, but that only works when providing null as value for position 9. Since Highcharts figures out the intervals by itself I hoped it would recognise on its own that there's no data for that position. Is there any way to make Highcharts not draw a line between 8 and 10 without specifying null for position 9?
Thanks in advance for your replies.
http://jsfiddle.net/bnqhuqt3/
You can not cut a line in a serie. You need to define a new data for series
series: [{
data: [
[1, 98.87],
[2, 98.45],
[3, 98.52],
[4, 99.34],
[5, 98.56],
[6, 98.61],
[7, 98.12],
[8, 98.03],
]
}, {
data: [
[10, 0],
[11, 150]
]
}]
Fiddle Example