I am trying to create a basic line chart using HighCharts in Ruby on Rails 7. Following is the script. It only shows one datapoint, whereas, just rendering the json data show all datapoints. I know that the chart is expecting either
series: [{name: "a", data: [1]}, {name: "b", data: [2]}]
series: [{name: "a", data: [1,2]}]
but I'm not sure how to pass in these data. Any help would be appreciated.
<script>
Highcharts.chart('chart', {
yAxis: {
title: {
text: 'Facts'
}
},
xAxis: {
title: {
text: 'Date'
},
categories: [<%= raw fact.date.to_json %>]
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
},
series: [{
name: [<%= raw fact.name.to_json %>],
data: [<%= raw fact.data.to_json %>]
}],
});
</script>```
Related
I want to create a stock chart that can change its data based on a select box of the stock symbol. The problem is when I update the main series data, the linked series (overlays indicator) is not updating.
Highcharts.stockChart('container', {
...
series: [{
type: 'candlestick',
id: 'main-series',
name: 'AAPL',
data: data
}, {
type: 'column',
id: 'volume',
name: 'Volume',
data: volume,
yAxis: 1
}, {
type: 'pc',
id: 'overlay',
linkedTo: 'main-series',
yAxis: 0
}, {
type: 'macd',
id: 'oscillator',
linkedTo: 'main-series',
yAxis: 2
}]
...
}, function (chart) {
changeSymbol(chart);
document.getElementById('symbols').addEventListener('change', function(e) {
changeSymbol(chart);
});
});
...
Live demo: https://jsfiddle.net/chanr1th/2xes7czh/22
Change the symbol select between "Apple" and "Half Apple" to see the error
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 am using a single xAxis category and 4 discrete data series (each one containing a single data item). Unfortunately, when I try to construct a simple ColumnChart using Highcharts 3.0 beta, the chart is never displayed:
chartB = new Highcharts.Chart({
chart: {
renderTo: 'containerB',
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan' //Just one category
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9] //One data point for each series element.
}, {
name: 'New York',
data: [83.6]
}, {
name: 'London',
data: [48.9]
}, {
name: 'Berlin',
data: [42.4]
}]
});
Please see http://jsfiddle.net/7CJhf/5/.
A workaround is to append an empty category ('') and a zero value to each series item, but this moves the column set to the left. Is there any proper workaround to create a column chart with Highcharts 3.0 beta, using single data points?
I've encountered this issue before issue 1535 with a stacked column of length 1. This is fixed in the lastest master branch highchart.src.js and highcharts-more.src.js. Try updating the script-references to the raw github references here, and it should work ok.
I have a chart that looks like this:
http://jsfiddle.net/rtGFm/37/
I would like to have a "sort" button that sorts high to low each category, putting the columns in a different order for each category. Is this possible with HighCharts?
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'foreclosures',
'nuisances',
'distance from city center'
]
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Alger Heights',
data: [49.9, 71.5, 50]
}, {
name: 'Shawmut Hills',
data: [83.6, 78.8, 67]
}, {
name: 'Baxter',
data: [48.9, 38.8, 100]
}, {
name: 'Midtown',
data: [42.4, 33.2, 80]
}, {
type: 'scatter',
data: [55,60,70],
marker: {
symbol: 'square',
lineColor: '#FFFFFF',
lineWidth: 1,
radius: 8
},
name: 'Average'
}]
});
});
I had the same problem :) highcharts still does not provide any solution for this problem, but it is flexibel enough so that you can sort anyway - just by javascript.
Put your data in a separate value:
var dataMain = [{name:"test1",data:5}, {name:"test1",data:1},{name:"test1",data:2}]
In series you can just add a function which sorts your data:
series: (function(){
for(var i = 0;i<dataMain.length;i++){
dataMain[i].data = dataMain[i].data.sort(function(a,b){
return a[0] - b[0] ;
})
return dataMain;
}
Hope I got everything wright.
Got it to work, I believe. Trick is to add each column in correct order as a new serie with same type (column), reuse colors and hide legend...
Very hackish, the JS code to sort like 8 categories independently will be ugly but the result looks fine.
Edit: Updated fiddle, I see the spacing between the categories grows with series, doesn't look supernice.
My jsfiddle is here
$(function () {
$('#container').highcharts({
chart: {
inverted: true
},
title: {
text: 'Series sorted in within categories'
},
xAxis: {
categories: ['January']
},
series: [{
type: 'column',
name: 'Stockholm',
data: [{x:0, y:95, color: Highcharts.getOptions().colors[0]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x:0, y:80, color: Highcharts.getOptions().colors[1]}]
}, {
type: 'column',
name: 'Göteborg',
data: [{x: 1, name: 'February', y: 98, color: Highcharts.getOptions().colors[1] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
type: 'column',
name: 'Stockholm',
data: [{x: 1, name: 'February', y: 80, color: Highcharts.getOptions().colors[0] // VGR's color
}],
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
br,
Jens
I think this can be done,
this may look like a little work around.
since we have a limited number of columns i mean 4 in the given example.
if we have arrays with sorting done with respect to each series then we can handle them.
on button click we can update the chart with new set of data as well as category array.
May be there is no solution from the APi.
According to me this is a possible approach.
Thanks,