I want to make drilldown chart. But when I click the chart, the drilldown doesnt work. Here is the picture
]1
Here is the code
the view code (index.php)
<?php $this->registerJs("
$(function () {
$('#my-chart3').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Fakultas'
},
xAxis: {
categories: $tahun2
},
credits: {
enabled: false
},
series: [
{
name: 'FAPERTA',
data: $data_A,
drilldown: 'data A1','data A2','data A3','data A4','data A5'
},
{
name: 'FKH',
data: $data_B
},
{
name: 'FPIK',
data: $data_C
},
{
name: 'FAPET',
data: $data_D
},
{
name: 'FAHUTAN',
data: $data_E
},
{
name: 'FATETA',
data: $data_F
},
{
name: 'FMIPA',
data: $data_G
},
{
name: 'FEM',
data: $data_H
},
{
name: 'FEMA',
data: $data_I
},
{
name: 'DIPLOMA',
data: $data_J
}],
drilldown: {
series: [{
name: 'data A1',
id: 'data A1',
data: [$data_A1]
},
{
name: 'data A2',
id: 'data A2',
data: $data_A2
},
{
name: 'data A3',
id: 'data A3',
data: $data_A3
},
{
name: 'data A4',
id: 'data A4',
data: $data_A4
},
{
name: 'data A5',
id: 'data A5',
data: $data_A5
}
]
}
});
});
")?>
this is the controller code
$masuk2= S2view::find();
$awal2= $masuk2->orderBy('TahunMasuk ASC')->one()->TahunMasuk;
$akhir2= $masuk2->orderBy('TahunMasuk DESC')->one()->TahunMasuk;
$arr_A = [];
$arr_B = [];
$arr_C = [];
$arr_D = [];
$arr_E = [];
$arr_F = [];
$arr_G = [];
$arr_H = [];
$arr_I = [];
$arr_J = [];
$tahun2 = [];
$arr_A1 = [];
$arr_A2 = [];
$arr_A3 = [];
$arr_A4 = [];
$arr_A5 = [];
for($k=$awal2;$k<=$akhir2;$k++){
if($awal2 == $k){
$jum_A = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'A'])->all());
$jum_B = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'B'])->all());
$jum_C = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'C'])->all());
$jum_D = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'D'])->all());
$jum_E = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'E'])->all());
$jum_F = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'F'])->all());
$jum_G = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'G'])->all());
$jum_H = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'H'])->all());
$jum_I = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'I'])->all());
$jum_J = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'J'])->all());
$jum_A1 = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'A1'])->all());
$jum_A2 = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'A2'])->all());
$jum_A3 = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'A3'])->all());
$jum_A4 = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'A4'])->all());
$jum_A5 = count($masuk2->where(['TahunMasuk'=>$awal2,'Fakultas'=>'A5'])->all());
}elseif($k > $awal2 && $k <= $akhir2){
$jum_A = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'A'])->all());
$jum_B = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'B'])->all());
$jum_C = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'C'])->all());
$jum_D = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'D'])->all());
$jum_E = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'E'])->all());
$jum_F = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'F'])->all());
$jum_G = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'G'])->all());
$jum_H = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'H'])->all());
$jum_I = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'I'])->all());
$jum_J = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'J'])->all());
$jum_A1 = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'A1'])->all());
$jum_A2 = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'A2'])->all());
$jum_A3 = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'A3'])->all());
$jum_A4 = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'A4'])->all());
$jum_A5 = count($masuk2->where(['TahunMasuk'=>$k,'Fakultas'=>'A5'])->all());
}
array_push($arr_A,$jum_A);
array_push($arr_B,$jum_B);
array_push($arr_C,$jum_C);
array_push($arr_D,$jum_D);
array_push($arr_E,$jum_E);
array_push($arr_F,$jum_F);
array_push($arr_G,$jum_G);
array_push($arr_H,$jum_H);
array_push($arr_I,$jum_I);
array_push($arr_J,$jum_J);
array_push($tahun2,$k);
array_push($arr_A1,$jum_A1);
array_push($arr_A2,$jum_A2);
array_push($arr_A3,$jum_A3);
array_push($arr_A4,$jum_A4);
array_push($arr_A5,$jum_A5);
}
$data['tahun2'] = json_encode($tahun2);
$data['data_A'] = json_encode($arr_A);
$data['data_B'] = json_encode($arr_B);
$data['data_C'] = json_encode($arr_C);
$data['data_D'] = json_encode($arr_D);
$data['data_E'] = json_encode($arr_E);
$data['data_F'] = json_encode($arr_F);
$data['data_G'] = json_encode($arr_G);
$data['data_H'] = json_encode($arr_H);
$data['data_I'] = json_encode($arr_I);
$data['data_J'] = json_encode($arr_J);
$data['data_A1'] = json_encode($arr_A1);
$data['data_A2'] = json_encode($arr_A2);
$data['data_A3'] = json_encode($arr_A3);
$data['data_A4'] = json_encode($arr_A4);
$data['data_A5'] = json_encode($arr_A5);
return $this->render('index',$data);
}
but those codes result error.
The error code is
series: [
{
name: 'FAPERTA',
data: $data_A,
drilldown: 'data A1','data A2','data A3','data A4','data A5'
},
Please help me to solve that problem. What may I do to solve that problem? It'd help me so much. Thankyou
Related
new to this and (almost) desperate. in below code i want to set $rows1['date'][] = $data['tanggal']; data as X-Axis in highchart :
$(function () {
var chart;
$(document).ready(function() {
getAjaxData(1);
var val = location.search.split('proyek=')[1]
getAjaxData(val);
function getAjaxData(proyek){
$.getJSON("src/json/data.php", {proyek: proyek}, function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'scurve-proyek',
type: 'column'
},
title: {
text: ''
},
credits: {
enabled: false,
},
subtitle: {
text: ''
},
yAxis: {
min: 0,
max: 100,
tickInterval: 20,
title: {
text: ''
},
},
xAxis: {
type: 'datetime',
labels: {
formatter: function ( ){
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
},
},
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: json
});
});
};
});
});
my data.php :
<?php
header("Content-type: application/json");
require_once "database.php";
$db = new database();
$mysqli = $db->connect();
$proyek = $_GET['proyek'];
$sql = "SELECT fren_pr FROM data_proyek WHERE kode_proyek = '$proyek'";
$rows = array();
$rows['name'] = 'Rencana';
$rows['color'] = '#50B432';
$result = $mysqli->query($sql);
while ($data = $result->fetch_assoc()) {
$rows['data'][] = array($data['fren_pr'],);
}
$sql = "SELECT freal_pr, tanggal FROM data_proyek WHERE kode_proyek = '$proyek'";
$rows1 = array();
$rows1['name'] = 'Realisasi';
$result = $mysqli->query($sql);
while ($data = $result->fetch_assoc()) {
$rows1['data'][] = $data['freal_pr'];
$rows1['date'][] = $data['tanggal'];
}
$rslt = array();
array_push($rslt, $rows);
array_push($rslt, $rows1);
print json_encode($rslt, JSON_NUMERIC_CHECK);
$mysqli->close();
this is my json view :
I've spent a lot of time trying to solve it but haven't found a solution until now.
Is there an error in my php code?
hope someone will be kind enough to help, Thanks in advance.
I'm trying to display a line chart with json data, but with there, $_GET from the json I have the chart doesn't appear, here's my code :
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("master/proyek/s-curve.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'scurve',
type: 'line'
},
credits: {
enabled: false
},
title: {
text: 'S-Curve Balai'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['M1', 'M2', 'M3', 'M4']
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 1,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'horizontal',
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
distance: 100,
}
}
},
series: json,
});
});
});
});
and this my s-curve.php :
<?php
header("Content-type: application/json");
require_once "config/database.php";
$db = new database();
$mysqli = $db->connect();
$balai = mysqli_real_escape_string($mysqli, $_GET['balai']);
if ($balai == 'bl-1') {
$sql = "SELECT plan, actual FROM scurve1 ORDER BY id ASC";
} else if ($balai == 'bl-2') {
$sql = "SELECT plan, actual FROM scurve2 ORDER BY id ASC";
} else if ($balai == 'bl-3') {
$sql = "SELECT plan, actual FROM scurve3 ORDER BY id ASC";
}
$hasil = array();
$hasil['name'] = 'Plan';
$result = $mysqli->query($sql);
while ($data = $result->fetch_assoc()) {
$hasil['data'][] = $data['plan'];
}
$hasil1 = array();
$hasil1['name'] = 'Actual';
$result = $mysqli->query($sql);
while ($data = $result->fetch_assoc()) {
$hasil1['data'][] = $data['actual'];
}
$nilai = array();
array_push($nilai, $hasil);
array_push($nilai, $hasil1);
print json_encode($nilai, JSON_NUMERIC_CHECK);
$mysqli->close();
display my json from localhost/master/proyek/s-curve.php?balai=bl-1 :
Display Json Data
from my case above, can someone tell what error I can fix to be able to display the chart.
I am trying to add a dynamic select list to a Datatables Editor form. This is what I have tried:
var discipline_options = [];
$.getJSON('program_data/get_disciplines.php', function (data) {
$.each(data, function (index) {
discipline_options.push({
value: data[index].value,
label: data[index].text
});
});
editor.field( 'discipline_outcome.discipline_fk' ).update(discipline_options);
});
var editor = new $.fn.dataTable.Editor( {
ajax: "program_data/discipline_outcome_data.php",
table: "#discipline_outcome_table",
template: '#discipline_outcome_form',
fields: [ {
label: "Discipline:",
name: "discipline_outcome.discipline_fk",
type: "select",
placeholder: 'Choose discipline...',
placeholderDisabled: false,
placeholderValue: 0,
options: []
},...
The get_disciplines.php script is:
$data = array();
$query = "SELECT * FROM discipline";
$result = $connection->query( $query );
while ($row = mysqli_fetch_array($result)) {
$data[] = array("label"=>$row['discipline'], "value"=>$row['discipline_pk']);
}
$temp = array('disciplines[].discipline_pk'=>$data);
$json = array('options'=>$temp);
echo json_encode($json);
This script returns the following JSON, but the select list is still empty:
{
"options": {
"disciplines[].discipline_pk": [
{
"label": "Emergency Medicine",
"value": "1"
},
{
"label": "General Practice",
"value": "2"
},
{
"label": "Internal Medicine",
"value": "3"
}
]
}
}
I got it working using:
var discipline_options = [];
$.getJSON("program_data/get_disciplines.php", function(data) {
var option = {};
$.each(data, function(i,e) {
option.label = e.text;
option.value = e.id;
discipline_options.push(option);
option = {};
});
}
).done(function() {
editor.field('discipline.discipline_pk').update(discipline_options);
});
var editor = new $.fn.dataTable.Editor( {
ajax: "program_data/discipline_outcome_data.php",
table: "#discipline_outcome_table",
template: '#discipline_outcome_form',
fields: [ {
label: "Discipline:",
name: "discipline.discipline_pk",
type: "select",
placeholder: 'Choose discipline...',
placeholderDisabled: false,
placeholderValue: 0,
options: []
},...
and the get_disciplines.php:
$data = array();
$query = "SELECT * FROM discipline";
$result = $connection->query( $query );
while ($row = mysqli_fetch_array($result)) {
$data[] = array("text"=>$row['discipline'], "id"=>$row['discipline_pk']);
}
echo json_encode($data);
i am rendering data in a bar chart as a grouped data through php loops.
my data in js is as
var graphTarget12 = $("#myBarChartOdometer");
var barGraph = new Chart(graphTarget12, {
type: 'bar',
data: {
labels: 'Lahore,Ahmed',
datasets: [
{
label:'hi',
data:[320,100] },
{
label:'hi',
data:[120,200] },
]
}
});
My code in file is as follow
<script>
var graphTarget12 = $("#myBarChartOdometer");
var barGraph = new Chart(graphTarget12, {
type: 'bar',
data: {
<?php
$data = Odometer();
// echo count($data);
$name = array();
for($i=0;$i<count($data);$i++) {
$arrays = $data[$i];
array_push($name,$arrays['groupName']);
// print_r(count($meter));
// die;
$nameImplode = implode(',', $name);
}
?>
labels: <?php echo "'".$nameImplode."'"; ?>,
datasets: [
<?php
for($i=0;$i<count($data);$i++) {
$arrays = $data[$i];
$meter = $arrays['odometer'];
// print_r(count($meter));
// die;
$odoValue = array();
for($s=0;$s<count($meter);$s++)
{
$odo = $meter[$s];
array_push($odoValue,$odo['odometer']);
}
$implode = implode(',', $odoValue);
?>
{
label:'hi',
data:<?php echo "[".$implode."]";?>
},
<?php } ?>
]
}
});
</script>
My data format in php is as follow
$array = array(
array('groupName' => 'Lahore','odometer' => array(array('odometer' =>320),array('odometer' => 100))),
array('groupName' => 'Ahmed','odometer' => array(array('odometer' =>120),array('odometer' => 200)))
);
Please help me solve this.i spent 2days already and couldn't figure out solution.
if any other way please show me
Your label should be like array.
labels: ['Lahore','Ahmed'],
You've used like this
labels: 'Lahore,Ahmed',
I want to take dojo Get data from ajax to php
Dojo passing parameter i couldn't take it in php class.
passing the cpa is not pass to php file..
This is my code :
globalHandlers: {
doVsatEvents: function(vsatId, network, cpa) {
// retrieve the events via xml
dojo.xhrGet ({
url: "includes/vsat_events.php?",
handleAs: "xml",
preventCache: true,
content: {
network: network,
cpa: cpa
},
load: function(response, args) {
var temp = response.getElementsByTagName("event");
var eventsItems =[];
alert (temp.length);
for (var i = 0; i < temp.length; i++) {
var event = [];
event = [];
event['id'] = temp[i].getAttribute(['id']);
event['nms'] = temp[i].getAttribute(['nms']);
event['status'] = temp[i].getAttribute(['status']);
event['date'] = temp[i].getAttribute(["date"]);
event['time'] = temp[i].getAttribute(["time"]);
event['description'] = temp[i].getAttribute(["description"]);
alert (events['description']);
eventsItems.push(event);
}
var eventsGridData = {
identifier: 'id',
items: eventsItems
};
// build a floating pane
var fPane = SM.util.skymapFloatingPane("Events", "eventsFPID_" + SM.getNextId());
var eventsStore = new dojo.data.ItemFileReadStore({
data: eventsGridData,
clearOnClose: true
});
// set the layout structure: 720px
// scrollbar is 14px wide
var eventsLayout = [{
field: 'id',
name: 'ID',
width: '60px'
},{
field: 'nms',
name: 'NMS',
width: '55px'
},{
field: 'status',
name: 'Severity',
width: '60px'
},{
field: 'date',
name: 'Date',
width: '100px'
},{
field: 'time',
name: 'Time',
width: '90px'
},{
field: 'description',
name: 'Description',
width: '400px'
}];
// create a new grid:
var eventsGrid = new dojox.grid.DataGrid({
query: {
id: '*'
},
store: eventsStore,
clientSort: true,
rowSelector: '20px',
structure: eventsLayout
}, document.createElement('div'));
// append the new grid to the div "gridContainer4":
fPane.set('content', eventsGrid);
//document.body.appendChild(fPane.domNode);
fPane.startup();
fPane.show();
}
});
},
This is my PHP code :
<?php
chdir('../../../');
include_once("./include/auth.php");
// Start XML file, create parent node
$doc = new DOMDocument;
$node = $doc->createElement("events");
$parnode = $doc->appendChild($node);
$query = "SELECT * FROM `skymap_1_nms_events`";
$query .= " WHERE `cpa` = ".$_GET['cpa'];
$query .= " ORDER BY `id` DESC";
//print $query;
$result = mysql_query ($query);
header("Content-type: text/xml");
while($row = mysql_fetch_assoc($result)){
$status = $row['severity'];
if ($status == 3){
$status = "normal";
} elseif($status == 1) {
$status = "disabled";
} elseif($status == 2) {
$status = "unmanaged";
} elseif($status == 4) {
$status = "warning";
} elseif($status == 5) {
$status = "minor";
} elseif($status == 6) {
$status = "major";
} elseif($status == 7) {
$status = "critical";
} else {
$status = "unknown";
}
$childnode = $doc->createElement("event");
$newnode = $parnode->appendChild($childnode);
$newnode->setAttribute("id", $row['id']);
$newnode->setAttribute("nms", $row['reporting_nms']);
$newnode->setAttribute("status", $status);
$newnode->setAttribute("date", $row['date']);
$newnode->setAttribute("time", $row['time']);
$newnode->setAttribute("description", $row['description']);
}
$xmlfile = $doc->saveXML();
echo $xmlfile;
?>
any help?