I need to display the labels on X axis from the JSON data that I am pulling from my API.
but I think we can only give static labels for the axis ?
Can anyone please let me know how to give dymanic labels?
Here is my code:
var obj = data[$("#host").val()].iscsi_lif.result.sectoutput.sect;
var my_data_list = [];
var readsize = [];
for(var key in obj) {
var avg_latency = parseInt(obj[key].avg_latency);
var rsize = parseInt(obj['read_size_hist.<=128KB']);
my_data_list.push('Average Latency', parseInt(avg_latency));
readsize.push('Read Size',parseInt(rsize));
}
$('#graphcontainer2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Reads Sizing'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Read Size'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Read Size: <b>{point.y:.1f}%</b>'
},
series: [{
name: 'Read Size',
data: my_data_list,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
To use category xAxis type, point formats should include x-value as string, or name property. For example, expected input data format is:
series: [{
data: [ ['Me', 10], ['Myself', 20], ['I', 100] ]
}]
Will create three categories on xAxis: Me | Myself | I
So in your code should be something like this:
my_data_list.push([myLabel, parseInt(avg_latency)]);
Where myLabel is category string.
Instead type:category , use categories in xAxis (if you are not using highstock ,using highcharts)
chart.xAxis[0].setCategories(categories);
See working fiddle here
Related
I took the code from highcharts demo. The columns are in the color. I would like to modify colors, smt. like to assign blue to some of them and the rest in orange. I post here the code and the link in jsfiddle below. Here is the code:
html:
<script src="https://code.highcharts.com/highcharts.js"></script
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Chart showing ...
</p>
</figure>
js:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'World\'s largest cities per 2017'
},
subtitle: {
text: 'Source: Wikipedia'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2017: <b>{point.y:.1f} millions</b>'
},
series: [{
name: 'Population',
data: [
['Shanghai', 24.2],
['Beijing', 20.8],
['Karachi', 14.9],
['Shenzhen', 13.7],
['Guangzhou', 13.1],
['Istanbul', 19.7],
['Mumbai', 12.4],
['Moscow', 14.2],
['São Paulo', 12.0],
['Delhi', 18.7],
['Kinshasa', 15.5]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
https://jsfiddle.net/dcmpg1z2/1/
I would like to see "Delhi" and "Kinshasa" in orange color. And the rest in different color. How can I do it?
if you want each category to take different color, you should set colorByPoint to true
and explicitly specify the colors for the ones you want to set by passing an object with the name, y and the color property.
here is the fiddle
My highchart shows data line only if value are different, if the value are the same like in this example 1100, it shows only the 1465 data like a point. The problem is with Y.axis if the data have the same value in a consecutif way.
Thank You.
Resulta image of highchart
$( document ).ready(function() {
var datacharts = ["1100","1100","1100","1100","1100","1100","1100","1100","1100","1100",1465,"1100"];
Highcharts.chart('container', {
chart: {
type: 'line',
height:500,
options3d: {
enabled: true,
alpha: 15,
beta: -10,
viewDistance: 180,
depth: 100
}
},
title: {
text: 'Personne 1'
},
xAxis: {
categories: ["mars","avril","mai","juin","juil.","ao\u00fbt","sept.","oct.","nov.","d\u00e9c.","janv.","f\u00e9vr."],
labels: {
skew3d: true,
style: {
fontSize: '16px'
}
}
},
yAxis: {
allowDecimals: false,
min: 800,
color:'red',
title: {
text: 'Prime Par mois',
skew3d: true
}
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: 'Data',
data: datacharts,
color: '#0e9bb7'
}]
});
});
</script>
The problem is that you are passing the data as string instead of numbers. Try this:
var datacharts = [1100,1100,1100,1100,1100,1100,1100,1100,1100,1100,1465,1100];
In your example 1465 is the only one that isn't a string, for this reason it is being represented on the chart.
I want to add FAHRENHEIT symbol to the chart js donut chart, currently, my half donut chart looks like this:
I want to add FAHRENHEIT symbol after '50', how can I do that?
here is my code:
var chartColors = {
hf_data : '#fba66c',
themecolor: '#62c799'
};
var hf_data = 12;
var myChart = new Chart('hf_data ', {
type: 'doughnut',
data: {
labels: ['hf_data '],
datasets: [{
label: 'Temperature',
data: [hf_data , hf_data +25],
backgroundColor: [chartColors.hf_data , chartColors.themecolor],
borderColor: [chartColors.hf_data , chartColors.themecolor],
borderWidth: 1
}]
},
options: {
responsive:true,
circumference: Math.PI,
rotation:Math.PI,
cutoutPercentage:60,
title: {
display: true,
text: '50' ,
position: 'bottom',
verticalAlign: 'middle',
align: 'center',
y: 20,
},
legend: {
position: 'top'
},
tooltips: {
enabled: false
},
animation: {
animateScale: true,
animateRotate: true
},
}
});
did you try adding to the symbol directly °F
text: '50°F'
if doesn't work use Unicode hex number
I have this chart: http://jsfiddle.net/bfqe5/1/
var rangeStart = {1386828000000: 1333256400000}; //used in the tooltip
var rangeEnd = {1386828000000: 1364706000000}; //used in the tooltip
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: null
},
marginBottom: 25,
xAxis: {
type: 'datetime',
lineColor: '#000000',
lineWidth: 2,
labels: {
formatter: function () {
var myDate = new Date(this.value);
var newDateMs = Date.UTC(myDate.getUTCFullYear(), myDate.getUTCMonth(), myDate.getUTCDate());
return Highcharts.dateFormat('%m/%Y', newDateMs);
},
style: {
fontWeight: 'bold',
color: '#000000'
}
},
title: {
text: 'Date',
style: {
color: 'black',
fontWeight: 'normal',
fontSize: '16px'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value} %',
step: 1,
style: {
fontWeight: 'bold',
color: '#000000'
}
},
allowDecimals: false,
endOnTick: false,
lineColor: '#000000',
lineWidth: 2,
gridLineColor: null,
minorGridLineWidth: 0,
minorTickInterval: 2,
minorTickColor: '#000000',
minorTickLength: 5,
minorTickWidth: 2,
minorTickPosition: 'inside'
},
tooltip: {
formatter: function () {
var start = new Date(rangeStart[this.x]);
var end = new Date(rangeEnd[this.x]);
var startDate = Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate());
var endDate = Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate());
return '<span style="font-size:14px; font-weight:bold;">' + this.series.name + ': ' + this.y + ' %</b></span><br /><span style="color:#2F7ED8;">Date range</span><br />' + Highcharts.dateFormat('%m/%e/%Y', start) + ' - ' + Highcharts.dateFormat('%m/%e/%Y', end);
},
valueSuffix: '%'
},
legend: {
symbolPadding: 10,
itemDistance: 23,
symbolWidth: 50,
backgroundColor: '#FFFFFF',
align: 'center',
borderWidth: 0,
verticalAlign: 'bottom',
floating: false,
width: 600
},
series: [{
name: 'data1',
data: [
[1386828000000, 1]/*,
[1389228000000, 0]*/ //if uncommented, mostly works
],
color: '#a3052c'
}, {
name: 'data2',
data: [
[1386828000000, 3]/*,
[1389228000000, 0]*/ //if uncommented, mostly works
],
color: '#faa738'
}, {
name: 'data1',
data: [
[1386828000000, 6]/*,
[1389228000000, 0]*/ //if uncommented, mostly works
],
color: '#002144'
}, {
name: 'data4',
data: [
[1386828000000, 3]/*,
[1389228000000, 0]*/ //if uncommented, mostly works
],
color: '#008001'
}]
});
It should be displaying with 4 individual columns (like http://jsfiddle.net/VrgW7/), but for some reason they all seem to be stacking on top of each other. I can get it to display mostly correct by using a hack (uncomment [1389228000000, 0] in each series), but then it's behaving like there are 2 sets of data.
I've tried adding:
plotOptions: {
column: {
stacking: 'null' //or 'normal' or 'percent'
}
},
but it didn't change the display as I want it to (it actually stacked them... I guess as expected).
Everything is correct in my jsfiddle (data values, tooltip) except the way it's displaying. Does anybody have any suggestions on what to change to get it to display correctly?
The issue here has to do with scaling I think. If we change all your timestamps to 15 we get individual columns. So, what I did was set the xAxis.min and xAxis.max to be just outside of the dates of your data:
xAxis: {
type: 'datetime',
min: 1386827000000,
max: 1389229000000,
....
See this jsFiddle.
I am drawing a bar chart using highchart.js
I do not want to show the x - axis data values.
Can any one tell me which option does it?
full config:
var chart = new Highcharts.Chart({
chart: {
renderTo: container,
defaultSeriesType: 'bar'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: [''],
title: {
text: null
},
labels: {enabled:true,y : 20, rotation: -45, align: 'right' }
},
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high'
}
},
tooltip: {
formatter: function () {
return '';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
pointWidth: 35,
color: '#D9CDC1'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107]
}]
});
In HighCharts, bar graphs use inverted axes, so the bottom axis is really the Y axis. (See also "column" graphs where the graphic is rotated 90 degrees, in which case the bottom axis is the X axis.)
You need to add the following to the yAxis config
yAxis: {
labels: {
enabled: false
}
}
See the following for full example:
http://jsfiddle.net/k5yBj/433/
To hide labels on X-axis set the option labels: {enabled:false} like this:
.....
........
,
xAxis: {
categories: [''],
title: {
text: null
},
labels: {
enabled:false,//default is true
y : 20, rotation: -45, align: 'right' }
}
.....
....
To hide labels on y-axis set the option labels: {enabled:false} like this:
.....
.......
,
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: '',
align: 'high'
},
labels:{
enabled:false//default is true
}
},
.........
......
Refer the documentation for futher understanding.
The above popular answer hides the labels only, this left tick marks for me which I also wished to remove.
In that case this works well
xAxis: {
visible: false
},
This is a simple solution to remove everything on the x/y axis for anyone interested. For more information please look here https://api.highcharts.com/highcharts/xAxis.visible
If hiding x data, then look at this
https://jsfiddle.net/anrilafosel/3g4z5kc3/
chart.xAxis[0].setCategories(newCategories);
for (i = 0; i < chart.series.length; i++) {
var newData = [];
for (j = 0; j < toggler_hc13.length; j++)
if (toggler_hc13[j] === 1)
newData.push(series_hc13[i].data[j]);
chart.series[i].setData(newData);
}