Please i have this ajax code working fine but my problem is how to display it on highchart. This is the ajax code
function ajaxGetRadiologyRecord() {
let urlPath = 'http://' + window.location.hostname + ':8000/radiology/get-patient-radiology-record';
let request = $.ajax({
method: 'GET',
url: urlPath,
});
request.done(function( response ) {
console.log(response);
let months = response.months;
let monthlyRecord = response.monthly_record_count;
});
}
when i log the response am having the data in an array. i.e the months and the records. I kept both is seperate variables months and monthlyRecord.
here is the js highchart code
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: ajaxGetRadiologyRecord()
}
},
title: {
text: ''
},
xAxis: {
categories: [
'Jan',
'Feb',
'Masr',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: ''
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
borderRadius: 2
}
},
series: [{
name: 'Patients',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'rgba(153, 153, 153, 0.5)'],
[1, '#f3f4f4']
]
}
}]
});
My problem now is how to replace the categories array with the months from ajax and data[] with monthlyRecord from the ajax. Thanks.
there are different ways, but you can do this way,
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: ajaxGetRadiologyRecord()
}
},
. . .
series: [
{
name: 'Patients',
data: []
}
]
});
define your series here , can define multiple series
function ajaxGetRadiologyRecord() {
let urlPath = 'http://' + window.location.hostname + ':8000/radiology/get-patient-radiology-record';
$.ajax({
method: 'GET',
url: urlPath,
});
request.done(function( response ) {
console.log(response);
chart.addSeries({
name: "Patients",
data: response.monthly_record_count
});
});
}
Related
My line chart is not showing on my chart.js at all. What piece of the puzzle am i missing here?
Also here is a fiddle that shows my code, you can see the bar graph displays as expected but the line chart does not. https://jsfiddle.net/c50dfw3g/1/
I have never used this type of chart before so I am not certain how exactly to set it up. Thanks in advance to all who assist.
var ctx = document.getElementById('myChart');
var config = {
type: 'bar',
options: {
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
var data = chart.data;
var datasets = data.datasets;
if (datasets.length) {
for (var i = 0; i < datasets.length; ++i) {
text.push('<li>');
if (datasets[i].type=='line') {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
} else {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
}
text.push(datasets[i].label);
text.push('</li>');
}
}
text.push('</ul>');
return text.join('');
},
legend: {
display: false,
},
scales: {
xAxes: [{
type: "category",
id: "axis-bar",
}, {
type: "time",
id: "axis-time",
display: false,
}, ],
},
},
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: "Dataset1",
type: "line",
backgroundColor: "#0000FF",
borderColor: "#0000FF",
borderWidth: 1,
fill: false,
xAxisID: "axis-time",
data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
},{
label: "Dataset2",
type: "bar",
backgroundColor: "#ff0000",
borderColor: "#ff0000",
borderWidth: 1,
fill: true,
xAxisID: "axis-bar",
data: [299405,244029,247191,329711,273855,441914,426271,471912,374388,366864,326155,277442]
}]
},
};
var myChart = new Chart(ctx, config);
var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;
Try using the same X-axis for both data sets:
scales: {
xAxes: [{
type: "category",
id: "axis-bar",
}/* Commenting out the second axis, {
type: "time",
id: "axis-time",
display: true,
}, */],
},
Now, we'll set the line dataset to use this X-axis:
datasets: [{
label: "Dataset1",
type: "line",
backgroundColor: "#0000FF",
borderColor: "#0000FF",
borderWidth: 1,
fill: false,
xAxisID: "axis-bar",
data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
},
And here we go:
The issue is with the 'xAxisID' attributes.
You specify the x-axis id as: 'axis-bar' but then use a different id when specifying dataset 1 ('axis-time'), so it's not being plotted on the same graph.
Just use the same id in the datasets as you specify when defining the scale of the graph and you'll get both plots on the same chart and thus your desired result.
just need to give this chart.series[0].update({ your data })} to your ajax and chart = new Highcharts.chart on a highchart as an identifier...
chart.series [0] .update () to provide new data input, so if you want to display based on the selected data this might help.
<script type="text/javascript">
$(document).ready(function(){
$('#kategori').change(function(){
var id=$(this).val();
$.ajax({
url : "<?php echo base_url();?>index.php/kategori/get_grafik_tutor",
method : "POST",
data : {id: id},
async : false,
dataType : 'json',
success: function(data){
chart.series[0].update({
name: "Data Hadir",
data: data.hasil
});
}
});
});
});
and My Highchart
<script type="text/javascript">
chart = new Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Grafik Absensi Tutor',
x: -20
},
subtitle: {
text: 'Data Kehadiran',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des']
},
yAxis: {
title: {
text: 'Total Absensi'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
}]
});
I hope this can help your problem.
This is Highcharts javascript, I need to pass the values (I guess by JSON) categories and variables Series.
I could use some help how to do it, maybe by example?
This is my code:
<script type="text/javascript">
var seriesData = ' ';
$.ajax({
type: "GET",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: '/Analytics/GetDataAsJsonMax/',
error: function () {
alert("An error occurred.");
},
success: function (data) {
seriesData = data;// [data];// or [data]
bindChart(seriesData);
}
});
function bindChart(seriesData) {
$('#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: '°Cgr'
},
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]
// }]
series: seriesData
});
};
My method in the controller would look like:
public JsonResult GetDataAsJsonMax()
{
var allData = (from p in db.Pedidos.Include("Localidad")
group p by p.Localidad.Nombre into pedGrupo
select new
{
name = pedGrupo.Key,
data = pedGrupo.Count()
});
var OrderData = allData.ToList();
return Json(OrderData, JsonRequestBehavior.AllowGet);
}
This returns the method:
[{"name":"CACUI ,EST","data":2},{"name":"EL CAJON","data":3}]
I have a chart that displays [x,y] using highcharts .I want to use more than [x,y] when I specify in an array say minimum value, maximum value.
I have an array like this: array1[['apples',no of apples,11,12],['oranges',no of oranges,1,2]
How do I employ this array in my following chart? I understand I have to specify this array1 in the series option. But which chart should I use? How do I represent the point in the chart when it has more than [x,y] option in the array defined as above.
$(document).ready(function fruits() {
$('#container').highcharts({
title: {
text: 'fruits'
},
xAxis: {
categories: ['Apple', 'Orange']
},
yAxis: {
title: {
text: 'No of fruits'
},
tickInterval: 10
},
series: [{
name: 'Fruits',
data: [
['apple', 29.9],
['orange', 71.5]
]
}]
});
});
For example,if i use column range chart I have min and max values under the same point.
But I need no of fruits, mean and median also to be included in the same chart.I don want to draw a separate line for mean and median instead use a single line for each point that shows no of fruits,min,max,median inthe tool tip.I want data to be [apple,5,4,12.5,10]
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: false
},
title: {
text: 'Temperature variation by month'
},
subtitle: {
text: 'Observed in Vik i Sogn, Norway, 2009'
},
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,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Min and Max',
data: [
[-9.7, 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]
]
}
]
]
});
});
You need two categories and then two series, like this:
xAxis: {
categories: ['Apples', 'Oranges'],
title: {
text: null
}
},
series: [{
name: 'Min',
data: [11, 12]
}, {
name: 'Max',
data: [20, 24]
}]
Here's an example fiddle: http://jsfiddle.net/UZj2K/
I think what you are looking for is called a columnrange chart.
I don't think it's a good idea to put all the data in a single point. But Error Bar or Box plot might fit your need. Here is an example of box plot chart. It's not exactly what you want but it's close. http://jsfiddle.net/7kFh4/
If you want to use only one line on a chart, and just display all detailed info only in tooltip, you can simple pass point as object, and then format tooltip, see: http://jsfiddle.net/3bQne/566/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['apple', 'banana']
},
tooltip: {
formatter: function() {
var o = this.point.options;
return this.x + '<br>' +
this.series.name + '<br>' +
'Count: ' + this.y + '<br>' +
'Min: ' + o.min + '<br>' +
'Max: ' + o.max + '<br>' +
'Mean: ' + o.mean + '<br>' +
'Median: ' + o.median + '<br>';
}
},
series: [{
data: [{
x: 0,
y: 5,
min: 10,
max: 15,
median: 13.4,
mean: 12.1
},{
x: 1,
y: 6,
min: 13,
max: 16,
median: 13.4,
mean: 15.2
}]
}]
});
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'QueryResultsChart',
type: 'bar'
},
title: {
text: 'Production History'
},
xAxis: {
title: {
text: 'Production Day'
},
type: 'datetime'
},
yAxis: {
title: {
text: 'Gross Production'
}
},
series: [{
name: 'Data',
data: []
}]
});
chart1.series[0].setData(". json_encode($aChartData) .");
});
The data is there an correct, it's just showing my xAxis on the yAxis for some reason...
Vertical bar charts are called column's in Highchart.
Change this:
type: 'column' //was 'bar' previously`
See example here: http://jsfiddle.net/aznBb/
To expand on Moin Zaman's answer, I played with his jsfiddle http://jsfiddle.net/aznBb/ and found this.
This is horizontal.
chart: {
type: 'bar',
inverted: false // default
}
This is also horizontal.
chart: {
type: 'bar',
inverted: true
}
This is vertical.
chart: {
type: 'column',
inverted: false // default
}
This is horizontal and apparently identical to the bar charts.
chart: {
type: 'column',
inverted: true
}
Very odd. I can only guess that type: 'bar' aliases type: 'column' and forces inverted: true no matter what it's actually set at. It'd be nice if it just toggled the inverted boolean.
You should try something like this:
$(function () {
Highcharts.chart('container', {
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,
formatter: function () {
return this.y + '°C';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 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]
]
}]
});
});
http://jsfiddle.net/b940oyw4/