I am using Highcharts to display data from an API. I would like to label my yAxis as "Thousands" and have the numbers shown in a single digit. For example my graph right now labels are 2k, 4k, 6k, 8k, 10k I would like to adjust to formatting to only display 2,4,6,8,10
I am currently using formatter:function () { } to return my the 2k,4k,6k... as it previously displayed 2000,4000,6000... I am having issues figuring how to to properly format my numbers in order to display with a single digit.
My expected outcome is for the yAxis labels displayed on the left side to show 2,4,6,8,10
Here is a jsfiddle of my graph.
Also here is my code:
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
labels: {
formatter: function () {
return this.axis.defaultLabelFormatter.call(this);
}
},
title: {
text: 'Thousands'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [3625, 4320, 4055, 4852, 5120, 6251, 7852, 8000, 9102, ]
}, {
name: 'London',
data: [2210, 3152, 3852, 4102, 4300, 4657, 6521, 7022, 7982]
}]
});
You can use the label.formatter callback with the logic shown below to display wanted format.
Demo: https://jsfiddle.net/BlackLabel/c0e2jwa6/
yAxis: {
labels: {
formatter() {
return this.value / 1000
}
},
title: {
text: 'Thousands'
}
},
https://api.highcharts.com/highcharts/yAxis.labels.formatter
Related
I am using the columnrange type from Highcharts-more. The default data labels formatter puts the low / high data at both ends of the range, which is nice.
but when I use scrollbar,high labels don`t move Follow scroll,
How do I setting,to use scrollbar in columnrange chart?
example:enter link description here
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2017'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
max:4,
scrollbar: {
enabled: true
}
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
format: '{y}°C'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.9, 10.3],
[-8.6, 8.5],
[-10.2, 11.8],
[-1.7, 12.2],
[-0.6, 23.1],
[3.7, 25.4],
[6.0, 26.2],
[6.7, 21.4],
[3.5, 19.5],
[-1.3, 16.0],
[-8.7, 9.4],
[-9.0, 8.6]
]
}]
});
This is Highcharts bug, which is already fixed in the master branch and will be published in version 7.0.2. In the meantime you can use the code from master branch:
<script src="https://github.highcharts.com/master/highstock.src.js"></script>
<script src="https://github.highcharts.com/master/highcharts-more.js"></script>
or the older Highcharts version:
<script src="https://code.highcharts.com/stock/6/highstock.js"></script>
<script src="https://code.highcharts.com/6/highcharts-more.js"></script>
Live demo: https://jsfiddle.net/BlackLabel/cqzn0tu3/
Highcharts file service: https://code.highcharts.com/
I am having issue with HighCharts, more specifically with Column range graph. I would like to have red color for negative numbers and blue color for positive numbers.
The current code give the red color to the bars with Only positive values, and blue color to those where the interval contains a negative value:
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: false
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
grouping:true,
formatter: function () {
if(this.y == 0)
return "";
else
return this.y;
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
color: '#FF0000',
displayNegative: true,
negativeColor: '#0088FF' ,
data: [
[0, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}]
});
});
The Current graph looks like:
The result needed should be like:
Link to fiddle
After some researchs and based on the comment above from #Sebastian here is the conclusion:
You can modify your Data by adding the index to match the xAxis like Data[[Index,from,to],[SecondIndex,from,to] etc... and when it comes to the negative values you can set Data Data[[IndexForNegative,from,to],[IndexForNegative,from,to]... for the same value.
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange'
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature ( °C )'
}
},
tooltip: {
valueSuffix: '°C'
},
plotOptions: {
columnrange: {
negativeColor: 'red',
threshold: 0,
dataLabels: {
enabled: true,
formatter: function() {
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[0,0,9.4],
[1,-8.7,0],[1,0,6.5], //spliting all data that has negative values using the same index
[2,-3.5,0],[1,0,9.4],
[3,-1.4,0],[2,0,19.9],
[4,0.0],[4,0,22.6],
[5,2.9, 29.5],
[6,9.2, 30.7],
[7,7.3, 26.5],
[8,4.4, 18.0],
[9,-3.1,0],[9,0,11.4],
[10,-5.2,0],[10,0,10.4],
[11,-13.5,0],[11,0,9.8]
]
}]
});
});
http://jsfiddle.net/0ns43y47/
I am trying to achieve this:
Basically I click on a button and a loading spinner will display and once the highchart is ready it will display. So how can i go about achieving this dynamic highcharts functionality ?
Load the Data from your database using ajax and call the charts function.
$("#btn").click(function(){ //function called on button click.
$.ajax({
url: "dataURL",
success: function(result){
//result should be a array of json and the format of data should be similar to what Highcharts uses.
drawChart(result); //calling highcharts function to draw chart.
}
});
});
function drawChart(data)
{
$('#container').highcharts({ //html body should have div with id 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: data //this is where you pass the data to create the chart.
});
}
}
I have made a fiddle example to show this, but since i cannot load data dynamically i have created a local variable json and it is creating the chart on click of a button.
Fiddle Example Here
I'm trying to make a Razor loop in Javascript. I've tried this code, but this wouldn't work. Nothing is displayed into the web-page.
Code:
$(function () {
$('#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: [
#{int i=0, compte = Model.statistique.Count;}
#foreach (var item in Model.statistique) {
<text>
{
name: '#(item.nomProcessus)',
data: [#(item.lundi), #(item.mardi), #(item.mercredi), #(item.jeudi), #(item.vendredi)]
}
</text>
if (i < compte) {
#:,
}
else
{
#:]
}
i++;
}
});
});
Original code:
jsFiddle
How do I to make the foreach razor loop works into it, please?
Any brilliant idea?
Try this
series: [
#foreach(var item in Model)
{
#:{ name: '#item.nomProcessus', data: [#(item.lundi), #(item.mardi), #(item.mercredi), #(item.jeudi), #(item.vendredi)] },
}
]
Note: You don't need to worry about that last coma. It is acceptable.
I want to draw a Line Graph with irregular Time interval. I want to pass the data to it via my Ajax calls. How do I do it?
My data is of the following format-
result = {u'New Delhi': [[1383741000000L, 54.2], [1383741900000L, 59.34], [1383742800000L, 64.3]], u'Bangalore': [[1383741000000L, 1608.2], [1383741900000L, 1611.3], [1383742800000L, 1612.29]]}
ie
result = {'name1':[[time1(in secs), value1][time1(in secs), value1]], 'name2':[[time1(in secs), value1][time2(in secs), value2]] }
as in like this.
series: [{
name: result.keys(),
data: result.values()
}]
I should get two lines and thier respective values.
How do I pass my values to the data.?
Here is my code
This is how my result looks like .
var result = [{ // this value is to be passed downwards.
'data': [
[1383741000000, 1608.3000000000002],
[1383741900000, 1611.9999999999973],
[1383742800000, 1612.299999999997]
],
'name': 'Bangalore'
}, {
'data': [
[1383741000000, 54.2],
[1383741900000, 54.300000000000004],
[1383742800000, 54.300000000000004]
],
'name': 'New Delhi'
}]
$(function () {
$('#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: result, // over here. I'm not getting the line.
});
});
how can I do it?
in success callback of the ajax call pass the response to a method that will parse the data for you as per the required format.
now pass that to the highcharts and build the chart
The problem is that you are setting categories ( one category = 1 value ) and then you are using timestamps to display line. Let's consider: 1383741000000 - that would be mean to display 1383741000000th category and display 1383741000000 ticks and names. This is not possible.
Solution: Remove categories and set xAxis.type = "datetime"
Working example: http://jsfiddle.net/3bQne/707/