Need to show y-axis values(as text labels) and it should be grouped as mentioned below and x-axis should be date-time.
Poor - > 20
Bad -value 11 to 20
Good - value 1 to 10
so there will be 3 ticks/labels for y-axis - good, bad and poor
http://jsfiddle.net/Wk7sF/
$('#container').highcharts({
chart: {
type: 'line'
},
xAxis: {
type: "datetime"
},
series: [
{
data: [[1611319680000,4],[1611319860000,5],[1611320040000,11],[1611320220000,14],[1611320400000,1],[1611320580000,22],[1611320760000,19],[1611320940000,20],[1611321120000,9],[1611321300000,9]]
},
]
});
Please if anyone can guide me for this problem
You can map your y-data to values: 3 - 'Poor', 2 - 'Bad', 1 - 'Good' and use formatter function for labels to render a specific text. Example:
const data = [
[1611319680000, 4],
...
];
const categories = ['', 'Good', 'Bad', 'Poor'];
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,
max: 3,
labels: {
formatter: function() {
return categories[this.pos];
}
}
},
series: [{
data: data.map(el => el[1] > 20 ? 3 : (el[1] > 10 ? 2 : 1))
}]
});
Live demo: http://jsfiddle.net/BlackLabel/Lj4o2ent/
API Reference: https://api.highcharts.com/highcharts/yAxis.labels
Related
is there a way to reduce the width of x-axis (see picture) in c3? Even if I tried to set "stroke-width" attribute to the "<"path">" tag with different values - it didn't make any visual changes. Thank you for your advices in advance.
Picture
var chart = c3.generate({
bindto: '#' + chartId,
data: {
columns: columns,
type: 'bar',
labels: true
},
interaction: {
enabled: false
},
tooltip: {
show: false
},
color: {
pattern: colorPattern
},
bar: {
width: { ratio: 0.7 },
space: 0.25
},
size: settings.ChartSizes.BarChart,
legend: {
position: 'right',
grouped: true,
item: {
onclick: function (d) {
counter++;
if (counter === 1) {
chart.hide();
chart.show(d);
} else {
chart.show();
counter = 0;
}
}
}
},
axis: {
x: {
type: 'category',
categories: categories,
show: showAxe
},
y: {
show: false
}
}
});
This is a common issue, caused by you not picking up the c3.css file - see https://github.com/c3js/c3/issues/1962
If you can fix that, the problem goes away
My chart is plotting x-axis points from Jan 1 1970. My js is below. Is the format of my x-coordinates what is causing the problem, and if so, how can I get these dates right?
var chart = new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [{
data: [{x:15-04-2018,y:10},{x:16-04-2018,y:20},{x:17-04-2018,y:30}],
borderColor: '#3e95cd',
fill: false
}]},
options: {
scales: {
xAxes: [{
type: 'time',
unit: 'day' ,
distribution: 'linear',
ticks: { source: 'data' },
time: { displayFormats: { day: 'MMM DD' } }
}]
},
title: {
display: true,
text: 'Student Assessment Cluster Scores'
},
} });
The date values must be entered as a javascript Date object. Just like the documentation says,
data: [{
x: new Date(),
y: 1
}, {
t: new Date(),
y: 10
}]
So in my question, the dates could be represented by:
data: [
{x:new date(15-04-2018),y:10},
{x:new date(16-04-2018),y:20},
{x:new date(17-04-2018),y:30}
]
I would like to include a series to my existing chart.
daytime = new Highcharts.Chart({
chart: {
renderTo: 'daytime_div',
defaultSeriesType: 'areaspline',
events: {
load: getData()
}
},
plotOptions: {
series: {
fillOpacity: 0.1,
lineWidth: 4,
marker: {
radius: 5,
lineWidth: 1,
lineColor: "#FFFFFF"
}
}
},
tooltip: {
formatter: function () {
var s = [];
$.each(this.points, function (i, point) {
s.push('<span style="font-size:10px;">' + point.key + '</span><br/><strong>' + point.series.name + '</strong> : ' + point.y + '</span>');
});
return s.join('<br/>');
},
shared: true,
useHTML: true
},
credits: false,
title: false,
exporting: false,
legend: {
itemDistance: 50,
itemStyle: {
color: '#333'
}
},
xAxis: {
labels: {
staggerLines: 2
}
},
yAxis: {
gridLineColor: "#e7e7e7",
title: {
text: ''
},
labels: {
x: 15,
y: 15,
style: {
color: "#999999",
fontSize: "10px"
}
},
},
series: [{
name: 'Daily',
color: "#b18eda",
data: ddata
}]
});
function getData() {
$.ajax({
url: '...',
type: "POST",
contentType: "application/json; charset=utf-8",
data: data,
success: function (f) {
var categories = [];
var series_data = [];
$.each(f.d, function (i, e) {
categories.push(e.hour);
series_data.push(parseInt(e.numa));
});
daytime.xAxis[0].setCategories(categories);
daytime.series[0].setData(series_data);
},
cache: false
});
}
The data I get from my database looks like this:
hour, numa
12 AM 1
1 AM 0
2 AM 0
3 AM 0
4 AM 0
This shows one line in the chart which is fine. I would like to add a second line that will come from a different query. The second line data will look like:
hour, numa
12 AM 0
1 AM 12
2 AM 3
3 AM 2
4 AM 2
Does anyone knows how could I include this into my second series? I have seen the sample in high charts on how to add more series. Static is pretty simple but getting the data dynamically make it more complicated to figure it out.
I am trying to find a way to add 2 series to my getData() function. Any idea will be appreciate it thanks.
It is explained clearly in the fiddle of the document which you shared on how to add multiple series.
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]
}]
You can pass multiple series in array and the chart can be generated.
EDIT-1
If data from different series use this fiddle.
var myComments=["First input","second comment","another comment","last comment"]
var dataValues = [29.9, 71.5, 194.1, 129.2];
var dataValues2 = [194.1, 95.6, 194.1, 29.9];
var categories = ['Jan', 'Feb', 'Mar', 'Apr'];
var n=['tooltip1','tooltip2','tooltip3','tooltip4'];
$(function () {
$('#container').highcharts({
chart: {},
tooltip: {
formatter: function () {
var serieI = this.series.index;
var index = categories.indexOf(this.x);
var comment = myComments[index];
return '-->'+comment;
}
},
xAxis: {
categories: categories
},
series: [{
data: dataValues
}, {
data: dataValues2
}]
});
});
which results in the below graph
Well you can use $.when() and load there all your ajax and in $.then() initialise chart. Second solution is prepare your query to database and return all data in single json.
I receive an array json object. And now I don't know how I can process it in javascript code to series section data. I use this example of highchart column-rotated-labels. In this object has two columns AVG and other title, and length of this object might 20.
This is my codes:
$('#showresult').click(function() {
$.ajax({
url : "../../coursestatus",
type : "get",
data : {
major : $('#get').val(),
year : $('#yearlist').val(),
semester : $('#semester').val()
},
success : function(data) {
alert(data.length);
$(function () {
$('#container').highcharts({
chart: { type: 'column'
},
title: { text: 'World\'s largest cities per 2014' },
xAxis: {
type: 'category',
labels: {
rotation: -45,
}
},
yAxis: { min: 0,
title: {
text: 'Population (millions)'
} },
legend: { enabled: false },
tooltip: { pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' },
series: [{ // I don't know how I can process data object to set that's elements to this
name: 'Population',
data: [
JSON.parse("[" + data + "]")
],
dataLabels: { enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: { fontSize: '13px',
fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px black'
}
}
}]
});
});
And this object include this elements:
title columns includes course name and avg columns includes mark for that course.
And this is data is in data object:
[{"title":"Math","avg":20},{"title":"Network","avg":18},{"title":"Operating system","avg":16}]
And above data is has 3 length and it is simple, in fact this object maybe that's length is >10.
Thank u!
I founded similar problem in this page and I solved my problem.
Populate Highcharts with JSON data using jQuery
I want to create a bar chart with time duration on the bottom axis. It' working for decimal numbers, like 300.5 seconds, or 50.3 hours, but i would like to have the following format:
Hours:Minutes:Seconds. I tried some thing with datalabelformat: datetime, but with no success.
The data would be for example:
Member1 - 10:05:18
Member2 - 12:52:20
Member3 - 18:10:30
Member4 - 19:20:10
Member5 - 19:30:45
Anybody got an idea how to realize that?
Thanks in advance!
You need to set min value and tickInterval, then set dateTimeLabels.
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
}
Example:
http://jsfiddle.net/TynTT/1/
I came here searching for a solution to my problem. Not sure if this is exactly what you want, and I cannot put in a comment due to low reputation. But this is how I was able to solve it.
This provides result in hh:mm. You can modify it to include seconds.
http://jsfiddle.net/TynTT/11/
It has the y axis in hh:mm format and also displays datalabels as hh:mm.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
type: 'time',
labels: {
formatter: function () {
var time = this.value;
var hours1=parseInt(time/3600000);
var mins1=parseInt((parseInt(time%3600000))/60000);
return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
}
}
},
series: [{
data: [1000000, 26500000, 17000050, 79000000, 56000000, 124000000],
dataLabels: {
enabled: true,
formatter: function () {
var time = this.y / 1000;
var hours1=parseInt(time/3600);
var mins1=parseInt((parseInt(time%3600))/60);
return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
}
},
}]
});
});
I improved above configs by reusing the HC methods:
durationbar: {
chart: {
type: 'column'
},
yAxis: {
type: 'datetime',
showFirstLabel: false,
dateTimeLabelFormats: {
millisecond: '%H:%M:%S'
},
units: [[
'millisecond',
[1000]
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]],
},
tooltip: {
formatter: null,
pointFormat: '{point.name}: <b>{point.dataLabel.text.textStr}</b><br/>'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter() {
return this.series.chart.time.dateFormat('%H:%M:%S', this.y)
}
}
}
}
},
screenshot