This is my full code:
$(document).ready(function()
{
var options =
{
chart: { renderTo: 'zb' },
title: { text: 'Test' },
tooltip:
{
enabled: true,
formatter: function()
{
return '<b>' + this.x + ' ' + this.series.name + '</b><br/>' + this.y;
}
},
xAxis: { categories: [] },
yAxis: { title: { text: 'Visits Num' } },
series: [],
plotOptions:{ line: { lineWidth : 2 } }
};
var tpo;
$.ajax({url: 'utils/request2.php', success: function(data)
{
var lines = data.split('\n');
var series =
{
type: 'line',
name: 'Visits',
data: [],
marker: { enabled: true, radius : 3 }
};
var cats = [];
$.each(lines, function(lineNo, line)
{
var line_data = line.split(',');
series.data.push(parseInt(line_data[1]));
});
options.series.push(series);
var chart = new Highcharts.Chart(options);
}});
});
It calls to the request2.php file that have data (saved in UTF8 without BOM if it matters) separated with comma, 2 values per row
When I'm showing the data without the parseInt it's showing the line, but the numbers are wrong because it's string - like showing 1500 as 20
Anyone have an idea why?
Thanks alot.
Related
I have json data like this:
and I want to display the above date data as x-axis on my chart:
$(document).ready(function () {
getAjaxData(1);
var val = location.search.split('balai=')[1]
getAjaxData(val);
function getAjaxData(balai){
$.getJSON('src/json/proyek/progress-fisik.php', {balai: balai}, function(progressFisik) {
var chart1 = new Highcharts.Chart('progress_fisik', {
chart: {
renderTo: 'progress_fisik',
type: 'column',
},
title: {
text: ''
},
subtitle: {
text: ''
},
yAxis: {
min: 0,
max: 100,
tickInterval: 20,
allowDecimals: false,
title: {
text: ''
},
},
xAxis: {
type: 'datetime',
labels: {
formatter: function ( ){
return Highcharts.dateFormat('%d-%m-%Y');
},
},
},
tooltip:{
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.numberFormat(this.y, 2) +' %';
},
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
format: '{point.y:,.2f}'+'%',
}
},
},
series:progressFisik,
});
});
}
});
I've spent a lot of time trying to solve this problem, but haven't gotten any results until now.
I hope someone is kind enough to help me on how I can improve my code above. any help I really appreciate. thanks.
You need to adapt your data to the format required by Highcharts. For example:
const series = progressFisik.map(dataEl => ({
name: dataEl.name,
data: dataEl.data.map((y, index) => [
new Date(dataEl.date[index]).getTime(),
y
])
}));
Live demo: http://jsfiddle.net/BlackLabel/Lhmw8p5f/
API Reference: https://api.highcharts.com/highcharts/series.line.data
I have two parameters to load dynamic json data from mysql and visualise multiple line charts on page submit.
$.ajax({
url: 'get_pubmedid.php',
type: 'get',
data: {org: org, ptype: ptype, path: path,mirna: mirna},
dataType: 'json',
success:function(response) {
var len = response.length;
for( var i = 0; i<len; i++) {
pubmed = response[i]['name'];
cell=response[i]['cell'];
alert(cell+" "+pubmed+" "+len);
var cells=encodeURIComponent(cell);
var cname="charts"+(i+1);id=i+1;var pid=i+1;
var container = cname;
var func_name = cname;
func_name = function () {
Highcharts.chart(container, {
showhighcharts(org,ptype,path,mirna,cell,cells,pid,pubmed,cname,id);
}
}
func_name()
}
}
});
function showhighcharts(org,ptype,path,mirna,cell,cells,pid,pubmed,cname,id) {
$("#"+cname).html("Wait, Loading graph...");
var options = {
chart: {
type: 'line',
renderTo: cname
},
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
credits: {
enabled: false
},
title: {
text: 'Temporal Viewer',
x: -20
},
xAxis: {categories:<?php //echo $_SESSION["cat"]; ?>,
offset:2,
title: {enabled: true,text: 'Time Point' }
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<b>Time Point:{point.key}</b> <table style="width:200px;font-size:12px;font-weight:bold;">',
pointFormat: '<tr><td>Dosage:</td><td style="color: {series.color}">{series.name} </td></tr>' + '<tr><td>Fold Change:</td><td style="color: {series.color}">{point.y} </td></tr>',
footerFormat: '</table>',
enabled: true,
crosshairs: {
color: 'light gray',
dashStyle: 'longdash'
}
},
plotOptions: {
series: {
dashStyle: 'longdash'
},
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [{}]
};
$.ajax({
url: "jdatas.php?org="+org+"&ptype="+ptype+"&path="+path+"&mirna="+mirna+"&pid="+id+"&cell="+cell+"&pub="+pubmed,
data: 'show=impressions',
type:'get',
dataType: "json",
success: function(data){
var getSeries = data;
options.series = getSeries;
var chart1 = new Highcharts.Chart(options);
}
});
I want multiple graphs to be loaded on submit.
But its not showing any graph.
am working in PHP. i am using High Chart , dynamically taking data from DB. Now i want to show data between certain date range. Data between certain date range is successfully fetched from DB but now how to refresh the Chart ??
JS Code :
`
function piechart() {
var date_from = $("#date_from").val();
var date_to = $("#date_to").val();
var dataString = 'date_from=' + date_from + '&date_to=' + date_to;
$.ajax({
type: "GET",
url: "pages/dashboard/chart_data.php",
data: dataString,
cache: false,
success: function(html) {
}
});
return false;
}
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Current Year Sales Report'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Sales (Rupees)',
data: []
}]
}
$.getJSON("chart_data.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
`
and chart_data.php
`
if($date_from !='' AND $date_to !='')
{
$where = "tran_date >='$date_from' AND tran_date <= '$date_to'";
echo $db->piechart($where);
}
else
echo $db->piechart();
?>
`
Any help will be highly appreciated.
It looks like it is JavaScript question.
You should move your code inside
`$(document).ready(function() {`
block into the function and execute it each time your date range fields are changed or then document is loaded first time.
i want to set up highcharts.
i made a simple random number in this url
http://echocephe.com/new/custom_number.php
i want to use these random datas on Dynamically updated data charts
this is code can you help me to solve this problem thanks.
<script type="text/javascript">
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
</script>
maybe its better to check highchart forums
here is the answer
http://www.highcharts.com/docs/working-with-data/preprocessing-live-data/
I am trying to build column based highcharts, and here is my code in jquery:
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'PCP Histogram',
x: -20
},
xAxis: {
categories: [{}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+point.y;
});
return s;
},
shared: true
},
series: [{},{}]
};
$.ajax({
url: "file.php",
type: "post",
dataType: "json",
success: function(data){
options.xAxis.categories = data.categories;
options.series[0].name = 'Avg1';
options.series[0].data = data.avg1;
options.series[1].name = 'Avg2';
options.series[1].data = data.avg2;
var chart = new Highcharts.Chart(options);
And I getting the data from file php like this:
file.php
$graph_data = array('categories'=>$categories, 'avg1'=>$avg, 'avg2'=>$avg);
print json_encode($graph_data, JSON_NUMERIC_CHECK);
It is working fine with two columns per category,
What I want now is: the graph_data can have n number of avg datas,
so basically it will be n number of columns.
$graph_data = array('categories'=>$categories, 'avg1'=>$avg1, ... 'avgn'=>$avgn);
When I do it manually it works, but I will not know how many of them will be there, so I want the code to do i.
Any idea how I can do it?
Any help appreciated.
make an array of avg instead of having avg1, avg2 etc....
$graph_data = array('categories'=>$categories, 'avgs'=>$array_of_avgs)
then in javascript side
success: function(data){
options.xAxis.categories = data.categories;
for(var i in data.avgs){
options.series[i].name = 'Avg'+i;
options.series[i].data = data.avgs[i];
}
var chart = new Highcharts.Chart(options);
And everything will be fine