I'm trying to create a chart using Chartkick that has multiple series of data. The thing is that the two sets represent the same data points at different points in the year, so the legend has the labels duplicated. Is there a way to hide one of them by series?
Here's what my current chart looks like. (The left bar represents the beginning of the year & the right represents the end of the year.)
This is the code for my chart right now: (for testing purposes, the same data hash is used for both sets)
total_effort_data = [
{ name: "Academic", data: academic_hash, stack: "9/1" },
{ name: "Administrative", data: administrative_hash, stack: "9/1" },
{ name: "Clinical", data: clinical_hash, stack: "9/1" },
{ name: "Research", data: research_hash, stack: "9/1"} ,
{ name: "Academic", data: academic_hash, stack: "8/31" },
{ name: "Administrative", data: administrative_hash, stack: "8/31" },
{ name: "Clinical", data: clinical_hash, stack: "8/31" },
{ name: "Research", data: research_hash, stack: "8/31" }, ]
...
<%= column_chart total_effort_chart_path,
stacked: true, legend: "top", suffix: "%", max: 100,
colors: ["#FFDB80", "#F7A791", "#C8EA80", "#CAE9F4"] %>
And, on a side note, is it possible to add the "9/1" & "8/31" labels to below the axis under each column (above the year range)?
Use showInLegend and linkedTo properties:
series: [..., {
data: [3, 2, 1],
showInLegend: false,
linkedTo: 'series1'
}]
It should probably look like below in your code:
total_effort_data = [
{ name: "Academic", data: academic_hash, stack: "9/1", id: "academic" },
...,
{ name: "Academic", data: academic_hash, stack: "8/31", showInLegend: false, linkedTo: "academic" },
...
]
Live demo: http://jsfiddle.net/BlackLabel/ocxyfv42/
API Reference:
https://api.highcharts.com/highcharts/series.column.showInLegend
https://api.highcharts.com/highcharts/series.column.linkedTo
Related
I have a 6 column chart with its 6 respective regressions.
Show all together is a little messy, and I want to hide all the regressions bu default.
I tried to use a chart.events and some other stuff, but it doen't works for me.
Image of Final state
This is my series configuration:
series: [{
type: 'column',
name: '#Html.Raw(grafic.serie1.Title)',
regression: true,
regressionSettings: {
label: '#Html.Raw(grafic.serie1.linearTitle)',
type: 'linear',
legendIndex: 1,
stack: 0,
},
data: camp1Dades,
legendIndex: 0,
stack: 0
},{
type: 'column',
name: '#Html.Raw(grafic.serie2.Title)',
regression: true,
regressionSettings: {
label: '#Html.Raw(grafic.serie2.linearTitle)',
type: 'linear',
legendIndex: 2,
stack: 0,
},
data: camp2Dades,
legendIndex: 0,
stack: 0
},...]
Thanks in advance
I finally use
chart: {
events: {
load: function (event) {
$(".highcharts-legend-item").each(function (n, item) {
if ($(this).find("tspan").html().includes(<filter-text>)) {
$(this).click()
}
});
},
}
},
Is no clean, but it works.
I adapted the highcharts population pyramid (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-negative-stack/) as follows:
I omitted the option "categories", instead used the option "type: 'category'" and added the categories to the data series. I want to do this because the data comes as a tuple from a file. Unfortunately, the right-hand x-axis is not labeled correctly. I want the right hand x-axis labeled same as the left one. Is this possible without using the option "categories"?
Here is the jsfiddle: https://jsfiddle.net/nehqb9k4/
chart : {
renderTo: 'container',
type: 'bar',
height: 480,
},
xAxis : [{
type: 'category',
reversed: false,
}, { // mirror axis on right side
type: 'category',
opposite: true,
linkedTo: 0,
reversed: false,
}],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Male',
data: [
['0-4', -2.2],
['5-9', -2.1],
['10-14', -2.2],
['15-19', -2.4],
['20-24', -2.7],
['25-29', -3.0],
['30-34', -3.3],
['35-39', -3.2],
['40-44', -2.9],
['45-49', -3.5],
['50-54', -4.4],
['55-59', -4.1],
['60-64', -3.4],
['65-69', -2.7],
['70-74', -2.3],
['75-79', -2.2],
['80-84', -1.6],
['85-89', -0.6],
['90-94', -0.3],
['95-99', -0.0],
['100 +', -0.0]
]
}, {
name: 'Female',
data: [
['0-4', 2.1],
['5-9', 2.0],
['10-14', 2.1],
['15-19', 2.3],
['20-24', 2.6],
['25-29', 2.9],
['30-34', 3.2],
['35-39', 3.1],
['40-44', 2.9],
['45-49', 3.4],
['50-54', 4.3],
['55-59', 4.0],
['60-64', 3.5],
['65-69', 2.9],
['70-74', 2.5],
['75-79', 2.7],
['80-84', 2.2],
['85-89', 1.1],
['90-94', 0.6],
['95-99', 0.2],
['100 +', 0.0]
]
}]
You need to set the right xAxis for the second series:
series: [{
// xAxis: 0 by default
name: 'Male',
data: [
...
]
}, {
name: 'Female',
xAxis: 1,
data: [
...
]
}]
Live demo: https://jsfiddle.net/BlackLabel/70yv1Lae/
API: https://api.highcharts.com/highcharts/series.bar.xAxis
I wanted to know if it's possible to use an async drill down on treemap?
I have 7000 items that need to be drawn and it stuck while the treemap is creating.
So I think to create treemap by lazy loading. I didn't find any example of treemap with huge data (while the items are below 1000 it's not a problem like in the example of the large treemap).
I will appreciate any help.
Yes, it can be done exactly the same for any type of series.
Example for treemap:
Highcharts.chart('container', {
chart: {
events: {
drilldown: function(e) {
this.addSeriesAsDrilldown(e.point, {
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'A1',
value: 11,
drilldown: true
}, {
name: 'A2',
value: 44
}]
});
}
}
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'A',
value: 6,
drilldown: true
}, {
name: 'B',
value: 2
}]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/knj7bqs5/
I'm trying to draw two lines in HighStocks using JavaScript with their example candlestick with intraday code. For some reason I can't get it to work
I am trying to just generate two extra lines at the end of my candlestick data, here is what i have (testing with just one line but it wont work). You can see the line im trying to put in is called test
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
}]
series: [{
name: 'test',
type: 'line',
data: [200.0, 201.0, 300.0, 400.0],
}]
});
});
});
First of all, you should not add two series arrays in your chart options object. You should use one series array and inside this array add new series object:
series: [{
name: 'AAPL',
type: 'candlestick',
data: data,
tooltip: {
valueDecimals: 2
}
}, {
name: 'test',
type: 'line',
data: [200.0, 201.0, 300.0, 400.0],
}]
The problem with this case is that you didn't give any x values to your line points, so it will start from 1970 year right now.
You need to add x values so line will start just where you want.
Here you can see an example: http://jsfiddle.net/uj0kzL4c/
I have created a HighCharts bar chart and now I want it to drill down in to further detail.
Here is my JS FIDDLE
My data looks like this
var seriesData = [{
name: 'A',
data: [
{
y : 10,
drilldown: {
name: 'A',
categories: ['1', '2'],
data: [5, 7],
color: colors[0]
}
},
{
y : -29,
drilldown: {
name: 'A',
categories: [' 1', '2'],
data: [5, 7],
color: colors[0]
}
}
]
}];
I am still not able to drill down in to detail view
Just start with this example: http://www.highcharts.com/demo/column-drilldown
This is proper setting for drilldown:
series: [{
name: 'Brands',
colorByPoint: true,
data: data
}],
drilldown: {
series: drilldownSeries
}
In your data drilldown is full series, while should be just series ID from drilldown.series. Study for a while example from above URL, it's really simple example.