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.
Related
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
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 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 am trying to use high chart. I am new to high chart also new to jquery also. I was trying load categories and series into the line chart. This is the code which i am used.
<script type="text/javascript">
$(function () {
function getData(){
alert('fff');
$.ajax({
url:"high_line_data.php",
type:"POST",
success:function(resp){
chart.series[0].setData(resp);
}
});
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25,
events: {
load: getData
}
},
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: []
});
});
</script>
and php script
I am echoing the series result as
name:'Test',
Data : '1,3,4,5'
How can I resolve this. Please help.
parse the output of the php from text to array. highcharts also accepts a direct array of integers as input to plot the data.
hope this will be useful
You should replace your string values with numbers. Obiously you can use JSON format to add points.
Related article about preprocessing data from PHP: http://docs.highcharts.com/#preprocessing
$(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/