I my application i need to integrate highcharts with coffescript.
Please guide how to start with this. Is it customizable?. Because I need to integrate some links and buttons below the chart.
All you really need to do is take a javascript sample and use js2coffee.org to convert it to coffeescript.
Fiddle: http://jsfiddle.net/Rf8AS/
$ ->
$("#container").highcharts
title:
text: "Monthly Average Temperature"
x: -20 #center
subtitle:
text: "Source: WorldClimate.com"
x: -20
xAxis:
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
yAxis:
title:
text: "Temperature (°C)"
plotLines: [
value: 0
width: 1
color: "#808080"
]
tooltip:
valueSuffix: "°C"
legend:
layout: "vertical"
align: "right"
verticalAlign: "middle"
borderWidth: 0
series: [
name: "Tokyo"
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
,
name: "New York"
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
,
name: "Berlin"
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
,
name: "London"
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
]
From there, you'll need to decide how you want to serve the coffeescript to the browser. I use grunt, grunt-contrib-coffee and grunt-contrib-watch to build the javascript on the server side. Another option is connect-assets; if you want a sample app that uses connect-assets, angular and node.js check out Hoverbear's sample app: https://github.com/Hoverbear/Angular-Coffee-Express.
Related
I am looking for the options to add a hyperlink to the stock chart. So that a user can click anywhere on the chart and redirect to another page.
Not on the series, I would like to add hyperlink on the chart itself.
You need to call function on your highchart container div.You can use following function.
$("#container").on("click", function(){
window.open('http://google.com', '_blank');
// You can also use if not cross domain request
//window.location.href='http://google.com';
});
Refer this fiddle link for example
Simply make your rendering element an <a> element with a href attribute pointing to where you wish to take users (just like any other hyperlink). Just make sure that this <a> element has a display property set as block:
$(function () {
Highcharts.chart('container', {
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
#container {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Note that for this example I've used Highcharts' own Basic Line Chart demo.
When markers are disabled, the symbols used for a line chart are simple vertically-centered paths
but for area charts are rectangles
I'd like to use the paths for all chart types, and I can't figure out how. The closest I've gotten is to set legend.symbolHeight to 2, but this results in a bottom-aligned rectangle for the area chart:
Is it possible to tell all charts to use the vertically-centered path?
You can use a fake series with different type and then linked two series by the option.
series: [{
type: 'line',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
type: 'line',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},{
type: 'line',
color: 'red',
}, {
color: 'red',
type: 'area',
showInLegend: false,
linkedTo:':previous',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}]
Example:
- http://jsfiddle.net/kjq0cn8p/
For Highstocks / Highcharts :
http://jsfiddle.net/josse34/5gjne/8/
I would like to automaticly change color of plot outside range (change color of line, plot and/or better : area!) to red, how to make this?
I found a exemple but VERY complicated !!! http://forum.highcharts.com/viewtopic.php?f=9&t=10433
$(function () {
var ranges = [
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 29.6],
[1246665600000, 16.7, 30.7],
[1246752000000, 16.5, 25.0],
[1246838400000, 17.8, 25.7],
[1246924800000, 13.5, 24.8],
[1247011200000, 10.5, 21.4],
[1247097600000, 9.2, 23.8],
[1247184000000, 11.6, 21.8],
[1247270400000, 10.7, 23.7],
[1247356800000, 11.0, 23.3],
[1247443200000, 11.6, 23.7],
[1247529600000, 11.8, 20.7],
[1247616000000, 12.6, 22.4],
[1247702400000, 13.6, 19.6],
[1247788800000, 11.4, 22.6],
[1247875200000, 13.2, 25.0],
[1247961600000, 14.2, 21.6],
[1248048000000, 13.1, 17.1],
[1248134400000, 12.2, 15.5],
[1248220800000, 12.0, 20.8],
[1248307200000, 12.0, 17.1],
[1248393600000, 12.7, 18.3],
[1248480000000, 12.4, 19.4],
[1248566400000, 12.6, 19.9],
[1248652800000, 11.9, 20.2],
[1248739200000, 11.0, 19.3],
[1248825600000, 10.8, 17.8],
[1248912000000, 11.8, 18.5],
[1248998400000, 10.8, 16.1]
],
averages = [
[1246406400000, 21.5],
[1246492800000, 22.1],
[1246579200000, 23],
[1246665600000, 23.8],
[1246752000000, 21.4],
[1246838400000, 21.3],
[1246924800000, 18.3],
[1247011200000, 15.4],
[1247097600000, 16.4],
[1247184000000, 17.7],
[1247270400000, 17.5],
[1247356800000, 17.6],
[1247443200000, 17.7],
[1247529600000, 16.8],
[1247616000000, 17.7],
[1247702400000, 16.3],
[1247788800000, 17.8],
[1247875200000, 18.1],
[1247961600000, 17.2],
[1248048000000, 14.4],
[1248134400000, 30.7],
[1248220800000, 15.7],
[1248307200000, 14.6],
[1248393600000, 15.3],
[1248480000000, 15.3],
[1248566400000, 15.8],
[1248652800000, 15.2],
[1248739200000, 14.8],
[1248825600000, 14.4],
[1248912000000, 15],
[1248998400000, 13.6]
];
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 0
},
title: {
text: 'July temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: '°C'
},
legend: {
},
series: [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
color: 'green',
zIndex: 0
}]
});
});
Thank you so much!!!
In case when you would like to have colored area between series, based on any condition, you need to use 3 series as in related topic is.
When using the jquery syntax $('#container').highcharts(...) and I later want to get a reference to the chart I get an error in IE 8. Example:
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
$('#container').highcharts().showLoading();
The final line fails in IE 8 (works in IE 10 + chrome etc) using version 3.0.1 og highcharts and 1.9.1 of jquery. Is this not the recommended way?
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)
Timestamp: Tue, 30 Apr 2013 08:07:37 UTC
Message: 'highcharts()' is null or not an object
Line: 66
Char: 9
Code: 0
URI: http://s3-eu-west-1.amazonaws.com/mala/highcharts.html
referring to this thread How to wrap legend items in highcharts I successfully resized my legend width with
legend: {
itemStyle: {
width: 90 // or whatever
},
but I need to check some condition and if that condition is true i should highlight the label with bold, so I'm using a labelFormatter, but I've discovered that after adding the itemStyle option, my html tags works only until the carriage return... you can see this here: http://jsfiddle.net/yDWh9/5/
how can I solve this problem?
thank you
______edit_______
this is the code generated by highcharts:
<g class="highcharts-legend-item" zindex="1" transform="translate(8,18)">
<text x="21" y="15" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#3E576F;width:290;fill:#3E576F;" text-anchor="start" zindex="2">
<tspan style="font-weight:bold" x="21">Lorem ipsum</tspan>
<tspan dy="16" x="21">dolor sit amet</tspan>
</text>
<rect rx="2" ry="2" fill="#AA4643" x="0" y="4" width="16" height="12" stroke-width="0.000001" zindex="3" stroke="#AA4643"></rect>
</g>
as you can see it breaks the string in two tspan and only the first has the font-weight:bold
Try
legend: {
useHTML: true,
itemStyle: {
width: 90 // or whatever
},
and series:
series: [{
name: '<b>Tokyo</b>',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: '<b>London</b>',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]