Related
I currently new creating a highcart I just want to know if these possible in the highcart. I want to create a cart with 3 categories
3 Categories:
Low Priority
Medium Priority
High Priority
So if my categories is 3 so the bar is 3 also with different name and different datas.
In my console.log the data result shows.
My Output:
My Function Code:
$.getJSON('ajax/ams_sla_report_chart.php', function(data,name){
console.log(data);
var json_data = "";
var json_name = "";
var chart = new Highcharts.Chart({
chart: {
renderTo: 'containers',
type: 'column',
inverted: false
},
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'middle'
},
yAxis: {
title: {
text: 'SLA PERCENTAGE'
}
},
title: {
text: 'Priority Based on SLA'
},
series:[{
name:'Low Priority',
colorByPoint: true,
data:data[0]
},
{
name:'Medium Priority',
colorByPoint: true,
data:data[1]
},
{
name:'High Priority',
colorByPoint: true,
data:data[2]
},
]
});
json_data = chart.series.data = data;
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders_eng input').on('input change', function () {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
});
Output must be:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'SLA BASED ON PRIORITY AND PERCENTAGE OF HIT'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Low',
'Medium',
'High',
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'SLA BASED ON PERCENTAGE (mm)'
}
},
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}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'CLOSE MR',
data: [49.9, 71.5, 106.4]
}, {
name: 'OPEN MR',
data: [83.6, 78.8, 98.5]
}, {
name: 'TOTAL MR HIT',
data: [48.9, 38.8, 39.3]
}, {
name: 'TOTAL MR HIT AVERAGE',
data: [50, 38.8, 39.3]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
You need to preprocess your data to the format required by Highcharts:
var data = [
['Low Priority', 100, 9],
['Medium Priority', 100, 2],
['High Priority', 100, 1]
],
categories = [],
series = [];
data.forEach(function(arr) {
arr.forEach(function(el, i) {
if (i === 0) {
categories.push(el);
} else if (series[i - 1]) {
series[i - 1].data.push(el)
} else {
series.push({
data: [el]
});
}
});
});
Highcharts.chart('container', {
...
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/xu6wy910/
I have a login with username and password, and a button with login. I want to send data from username and password to server-side PHP.
Ext.require([
'Ext.form.Panel',
'Ext.layout.container.Anchor'
]);
var log = Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: 'login',
title: 'Login section',
bodyPadding: '10 10 0',
width: 300,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
flex: 1,
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype: 'textfield',
fieldLabel: 'User Name',
anchor: '-5',
name: 'first',
id: 'userName'
}, {
xtype: 'textfield',
fieldLabel: 'Password',
anchor: '-5',
name: 'password',
inputType: 'password',
id: 'password'
}]
}
],
buttons: ['->', {
text: 'Login',
name: 'submit',
/*listeners: {
tap: function () {
var form = Ext.getCmp('userName');
//var values = form.getValues();
Ext.Ajax.request({
url: 'index.php',
params: form,
success: function (response) {
var text = response.responseText;
Ext.Msg.alert('asfasfaf', text);
},
failure: function (response) {
Ext.Msg.alert('Error', 'Error while submitting the form');
console.log(response.responseText);
}
});
}
}*/
/* handler: function () {
Ext.Ajax.request({
url: 'index.php',
method: 'POST',
params: Ext.getCmp('userName').getValue(),
success: function (response) {
Ext.Msg.alert('success ' + Ext.getCmp('userName').getValue());
},
failure: function (response) {
Ext.Msg.alert('server-side failure with status code ' + response.status);
}
});
}*/
},
{
text: 'Register?'
}]
});
});
I see that you have already tried to extract values and send request to php. May be this structure will help you. But you have to be sure that your php url accepts parameters with names 'param1' and 'param2' (or whatever your php accepts:) )
{
xtype : 'button',
text : "Submit"
formBind : true,
handler : function() {
var userName = this.up('form').down('#userName');
var password = this.up('form').down('#password');
Ext.Ajax.request({
url: url, // your php url
method: 'POST',
params: {param1: userName, param2:password },
disableCaching: false,
success: function(response, opts)
{
var text = response.responseText; // for debugging print text and decodedText
var decodedText = Ext.decode(text);
if(decodedText.success)
{
}
}
failure: function()
{
}
});
}
}
Ext.getCmp('userName').getValue();
You can use the Ext Form's submit method from within your button handler, e.g.:
// ....
buttons: [{
text: 'Submit!',
handler: function(btn) {
btn.up('form').getForm().submit({
url: 'mybackend.php',
success: function(ret) {},
failure: function(ret) {},
});
}
}],
// .....
The program uses the Zend-framework and Propel.
My '_form_genehmigt.phtml' refers me to my index-page and executes the updateAction in Antragpeer.php when I press the save button, but the data is not committed. There is no new entry in my MySql-database. But there isn't a error message in firebug either.
//UrlaubController.php
public function updateAction() {
$antrag = AntragPeer::update($_POST);
if (!count($antrag->getValidationFailures())) {
//$antrag->save(); //nötig??
$this->view->success = true;
$this->view->Urlaubsantrag = $antrag->getId();
} else {
$this->view->success = false;
$this->view->errors = $antrag->getValidationFailures();
}
}
//Antragpeer.php
public static function update($post) {
$con = Propel::getConnection();
$con->beginTransaction();
try {
if (!empty($post['id'])) {
$antrag = self::getById($post['id']);
} else {
$antrag = null;
}
if (is_null($antrag)) {
$antrag = new Antrag();
}
$antrag->fromArray($post, BasePeer::TYPE_FIELDNAME);
if ($antrag->validate()) {
$antrag->save($con);
// Speichere Id wenn neuer Eintrag
if (empty($post['id'])) {
$id = date('y').date('m').date('d').'-A'.$antrag->getId();
$antrag->setId($id);
$antrag->save();
}
} else {
throw new Exception();
}
$con->commit();
} catch (Exception $e) {
$con->rollBack();
if ($e->getMessage() != "") Zend_Registry::get('log')->log($e->getMessage(), Zend_Log::ERR);
}
return $antrag;
}
//_form_genehmigt.phtml
<script type="text/javascript">
<?php
echo $this->extArrayStore('benutzer', array('id'=>'integer', 'label'=>'string'), AclBenutzerPeer::getBenutzerIdformBenutzerStore());
?>
Ext.onReady(function() {
Ext.tip.QuickTipManager.init(true, {showDelay: 0, dismissDelay: 0});
Ext.define('Gesamt', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'integer'},
{name: 'bezeichnung', type: 'string'},
{name: 'Resturlaub_vorjahr', type: 'string'}
],
idProperty: 'id'
});
Ext.create('Ext.data.Store', {
model: 'Gesamt',
storeId: 'gesamtstore',
proxy: {
type: 'ajax',
url: '<?php echo $this->baseUrl() ?>/Verwaltung/getprogrammbereicheforprojekt?format=json',
extraParams: {
Resturlaub_vorjahr: <?php echo ((($this->data instanceof Gesamt) && $this->data->getResturlaubVorjahr() != "")
? $this->data->getResturlaubVorjahr()
: (($this->mode == "new" && !empty($this->data['Resturlaub_vorjahr']))
? $this->data['Resturlaub_vorjahr']
: "''")); ?>,
Anspruch: <?php echo ((($this->data instanceof Gesamt) && $this->data->getAnspruch() != "")
? $this->data->getAnspruch()
: (($this->mode == "new" && !empty($this->data['Anspruch']))
? $this->data['Anspruch']
: "''")); ?>,
Gesamt: <?php echo ((($this->data instanceof Gesamt) && $this->data->getGesamt() != "")
? $this->data->getGesamt()
: (($this->mode == "new" && !empty($this->data['Gesamt']))
? $this->data['Gesamt']
: "''")); ?>,
csrf_token: '<?php echo HelperFunctions::getCSRFToken(); ?>'
},
reader: {
type: 'json',
root: 'Gesamt',
totalProperty: 'totalcountgesamt'
}
},
listeners: {
load: {
fn:function(records, operation, success) {
var modelDest = Ext.getCmp('Resturlaub_vorjahr');
if (this.getById(modelDest.getValue()) === null) {
modelDest.setValue('');
}
if (modelDest.store.data.length > 0) {
modelDest.setDisabled(false);
} else {
modelDest.setDisabled(true);
}
}
}
}
});
Ext.define('Urlaubsantrag', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'integer'},
{name: 'typ', type: 'string'},
{name: 'typ_icon', type: 'string'},
{name: 'datum', type: 'string'},
{name: 'datum_grid', type: 'string'},
{name: 'mitarbeiter_name', type: 'string'},
{name: 'kommentar_grid', type: 'string'},
{name: 'status', type: 'string'},
{name: 'mitarbeiter_id', type: 'string'},
{name: 'Von_Datum', type: 'string'},
{name: 'Bis_Datum', type: 'string'},
{name: 'Anzahl_Tage', type: 'string'},
{name: 'Antrags_Datum', type: 'string'},
{name: 'Resturlaub_Tage', type: 'string'},
{name: 'Gesamt_Anzahl_Tage', type: 'string'},
{name: 'Kommentar', type: 'string'},
{name: 'Genehmigt_Von', type: 'string'},
{name: 'Jahr', type: 'string'},
{name: 'Genehmigt', type: 'boolean'},
{name: 'mitarbeiter_gesamt', type: 'string'},
{name: 'Resturlaub_vorjahr', type: 'string'},
{name: 'Anspruch', type: 'string'},
{name: 'Sonderurlaub', type: 'string'},
{name: 'Gesamt', type: 'string'},
{name: 'Jahr', type: 'string'}
],
idProperty: 'id'
});
Ext.create('Ext.data.Store', {
model: 'Urlaubsantrag',
storeId: 'Urlaubsantragstore',
sorters: {
property: 'created_at_grid',
direction: 'DESC'
},
sortOnLoad: true,
proxy: {
type: 'ajax',
//url?
url: '<?php echo $this->baseUrl(); ?>/urlaub/update?format=json',
extraParams: {
antragId: <?php echo (($this->data instanceOf Antrag)
? $this->data->getId()
: "''"); ?>
},
reader: {
type: 'json',
root: 'array',
totalProperty: 'totalcount'
}
},
listeners: {
'load': function (records, options, success) {
if (Ext.data.StoreManager.lookup('Urlaubsantragstore').getTotalCount() > 0) {
Ext.data.StoreManager.lookup('Urlaubsantragstore').each(function (record) {
if (record.get('Genehmigt') === false) {
Ext.getCmp('formularmeldungen_erledigt').show();
return false;
}
});
} else {
Ext.getCmp('formularmeldungen_erledigt').hide();
}
}
},
autoLoad: <?php echo (($this->data instanceOf Antrag) ? 'true' : 'false'); ?>,
remoteFilter: true
});
var formPanelAntrag = Ext.create('Ext.form.Panel', {
renderTo: 'form-ctantrag',
defaultType: 'textfield',
id: 'formPanelAntrag',
trackResetOnLoad: true,
width: <?php echo Constants::EXT4_PANEL_WIDTH ?>,
items: [
{
xtype: 'panel',
border: false,
bodyPadding: 10,
items: [
{
xtype: 'fieldset',
title: 'Urlaubsantrag',
defaults: {
labelWidth: 200,
anchor: '100%'
},
items: [
{
xtype: 'fieldset',
title: 'Allgemeine Angaben',
defaults: {
labelWidth: 200,
anchor: '100%'
},
items: [
{
xtype: 'hiddenfield',
name: 'id'
},
{
xtype: 'datefield',
id: 'Antrags_Datum',
name: 'Antrags_Datum',
fieldLabel: 'Antrags Datum',
format: 'd.m.Y',
value: '<?php echo date("d.m.Y") ?>',
tabIndex: 1
},
{
xtype: 'timefield',
id: 'datum_zeit',
name: 'datum_zeit',
fieldLabel: 'Zeit',
format: 'H:i',
value: '<?php echo date("H:i"); ?>',
tabIndex: 2
},
{
xtype: 'combo',
fieldLabel: 'Mitarbeiter',
name: 'mitarbeiter_id',
id: 'mitarbeiter_id',
store: 'benutzer_store',
queryMode: 'local',
displayField: 'label',
valueField: 'id',
value: <?php echo (($this->mode == "new") ? Zend_Auth::getInstance()->getIdentity()->getId() : "''"); ?>,
forceSelection: true,
tabIndex: 3
},
{
xtype: 'displayfield',
fieldLabel: 'Resturlaub Vorjahr',
name: 'Resturlaub_vorjahr',
id: 'Resturlaub_vorjahr',
store: 'gesamtstore',
queryMode: 'local',
displayField: 'label',
valueField: 'Resturlaub_vorjahr', //value + 'Tage'
value: <?php echo (($this->mode == "new") ? json_encode($this->data['Resturlaub_vorjahr']) : "''"); ?>,
disabled: true
},
{
xtype: 'displayfield',
name: 'Anspruch Aktuell',
id: 'Anspruch',
fieldLabel: 'Anspruch dieses Jahr',
disabled: true
},
{
xtype: 'displayfield',
name: 'Gesamt',
id: 'Gesamt',
fieldLabel: 'Gesamt',
disabled: true
},
{
xtype: 'displayfield',
name: 'Vorhanden aktuell',
id: 'Vorhanden_dieses_jahr',
fieldLabel: 'Vorhanden dieses Jahr',
disabled: true
}
]
},{
xtype: 'fieldset',
title: 'Urlaubs Angaben',
defaults: {
labelWidth: 200,
anchor: '100%'
},
items: [
{
xtype: 'datefield',
name: 'Von Datum',
id: 'VonDatum',
fieldLabel: 'Von',
tabIndex: 4
},
{
xtype: 'datefield',
name: 'Bis Datum',
id: 'BisDatum',
fieldLabel: 'Bis',
tabIndex: 5
},
{
xtype: 'numberfield',
name: 'Anzahl Tage',
id: 'AnzahlTage',
fieldLabel: 'Anzahl Tage (Abzgl. Wochenenden)',
tabIndex: 6
},
{
xtype: 'checkbox',
name: 'Sonderurlaub',
inputValue: '1',
fieldLabel: 'Sonderurlaub',
anchor: '100%',
tabIndex: 7
},
{
xtype: 'displayfield',
name: 'Resturlaub tage',
id: 'Resturlaub',
fieldLabel: 'Resturlaub',
disabled: true
}
]
},
{
xtype: 'fieldset',
title: 'Kommentar',
cls: 'fieldset_innerdiv',
defaults: {
labelWidth: 200,
anchor: '100%'
},
items: [
{
xtype: 'textarea',
name: 'Kommentar',
id: 'Kommentar',
tabIndex: 8
}
]
},
{
xtype: 'fieldset',
title: 'Genehmigt',
cls: 'fieldset_innerdiv',
defaults: {
labelWidth: 200,
anchor: '100%'
},
items: [
{
xtype: 'checkbox',
name: 'Genehmigt Ja',
id: 'Genehmigt_ja',
inputValue: '1',
fieldLabel: 'Ja',
anchor: '100%',
tabIndex: 9
},
{
xtype: 'checkbox',
name: 'Genehmigt Nein',
id: 'Genehmigt_nein',
inputValue: '2',
fieldLabel: 'Nein',
anchor: '100%',
tabIndex: 10
},
{
xtype: 'combo',
fieldLabel: 'Genehmigt Von',
name: 'mitarbeiter_id',
id: 'genehmigt_von',
store: 'benutzer_store',
queryMode: 'local',
displayField: 'label',
valueField: 'id',
value: <?php echo (($this->mode == "new") ? Zend_Auth::getInstance()->getIdentity()->getId() : "''"); ?>,
forceSelection: true,
tabIndex: 11
}
]
}
]
}
]
}
],
buttons: [
{
text: '{LB_CANCEL_AND_BACK}',
icon: '<?php echo $this->baseUrl() ?>/images/<?php echo Constants::ICON_LOESCHEN; ?>',
handler: function () {
window.location.href = "<?php echo $this->baseUrl() ?>/urlaub/index?csrf_token=<?php echo HelperFunctions::getCSRFToken() ?>";
},
tabIndex: 26
},
{
text: '{LB_SAVE_NEW}',
id: 'btn_save',
icon: '<?php echo $this->baseUrl() ?>/images/<?php echo Constants::ICON_SPEICHERN; ?>',
formBind: true,
handler: function(){
if (formPanelAntrag.isDisabled() == false) {
this.up('form').getForm().submit({
url: '<?php echo $this->baseUrl() ?>/urlaub/update?format=json',
submitEmptyText: false,
success: function (form, action) {
window.location.href = '<?php echo $this->baseUrl() ?>/urlaub/index?csrf_token=<?php echo HelperFunctions::getCSRFToken(); ?>';
},
failure: function (form, action) {
goToTop();
flash('error', {
title: '<?php echo Text::LB_FORMPANEL_FLASH_ERROR_TITLE ?>',
msg: '<?php echo Text::LB_FORMPANEL_FLASH_ERROR_MSG ?>',
fadeOut: 1,
delay: 7000
});
}
});
}
},
tabIndex: 27
}]
});
});
</script>
<div id="form-ctantrag"></div>
I'm trying to do a jquery ajax tutorial but I'm not able to get it to work.
$(document).ready(function () {
//var theme = getDemoTheme();
var url = "http://localhost/schoollife/services/getchapters.php?a=showdata";
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'curriculam_type', type: 'string' },
{ name: 'class_type', type: 'string' },
{ name: 'subject_type', type: 'int' },
{ name: 'chapter_name', type: 'string' },
{ name: 'chapter_number', type: 'int' },
{ name: 'author_name', type: 'string' },
{ name: 'reviewer_name', type: 'int' }
],
//id: 'id',
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: 940,
source: dataAdapter,
//theme: theme,
columnsresize: true,
columns: [
{ text: 'Curriculum', datafield: 'curriculam_type', width: 100 },
{ text: 'Class', datafield: 'class_type', width: 100 },
{ text: 'Subjects', datafield: 'subject_type', width: 100 },
{ text: 'Chapter', datafield: 'chapter_name', width: 160 },
{ text: 'Chapter Number', datafield: 'chapter_number', cellsalign: 'center',width: 60},
{ text: 'Content Author', datafield: 'author_name'},
{ text: 'Content Reviewer', datafield: 'reviewer_name'},
{ text: 'Edit', datafield: 'Edit', width: 60, cellsrenderer: function () {
return '<div style="width:100%"><img src="../images/edit.png" style="margin-left: 25%"/></div>';
},
},
{ text: 'Delete', datafield: 'delete', width: 60, cellsrenderer:function () {
return "<div style='width:100%'><a href='javascript:void(0)' class='**delbutton**'><img src='../Images/delete.png' style='margin-left:25%'/></a></div>";
},
},
]
});
$(document).ready(function() {
$(".**delbutton**").click(function(){
alert('sdsdsd');
alert('Are You sure you want to delete!');
evt.preventDefault();
var id=this.href;
var url='http://localhost/schoollife/services/getchapters.php?a=deletechapter&chapter_id='+data[i].id;
$.messager.confirm('Confirm','Are you sure you want to delete record?');
$.ajax({
cache:false,
dataType:'json',
url:'http://localhost/schoollife/services/getchapters.php?a=deletechapter&chapter_id='+data[i].id,
async:false,
success:function(data){
alert(data);
}
})
});
});
});
If I do the same in a .js file I wouldn't have any problem. What am I missing here?
Thanks
Well, what about <script> tag:
<script>
//js code here
</script>
You need of course to place it after including jquery.
you have to close }); first document on load function . and consider about open bracket and close bracket
I have a little trouble with understanding of recording data to MySQL database. Now, I have some table in my DB showing in Grid. I attached an Editor, but i don't know, how to use it correctly (sending editable data into a php-script). May I ask for help?
Thanks.
view.js
Ext.onReady(function() {
var cols = [
{ dataIndex: 'id', header: 'id', hidden: true },
{ dataIndex: 'title', header: 'Title', width: 200, editor: 'textfield'},
{ dataIndex: 'author', header: 'Author', width: 200, editor: 'textfield' },
{ dataIndex: 'isbn', header: 'ISBN', width: 100, editor: 'numberfield' },
],
fields = [];
for(var i=0; i<cols.length; i++) {
fields.push(cols[i].dataIndex);
}
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: fields
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'Book',
proxy: {
type: 'ajax',
url: 'view.php',
reader: {
type: 'json'
}
}
});
Ext.create('Ext.grid.Panel', {
columns: cols,
width: 520,
style: 'margin-top: 20%; margin-left: 35%',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
})
],
renderTo: Ext.getBody(),
store: store
});
store.load();
});
view.php
<?php
require_once 'db.php';
$result = mysql_query('SELECT * FROM books');
while ($row = mysql_fetch_assoc($result)) {
for ($i=0; $i < mysql_num_fields($result); $i++) {
$meta = mysql_fetch_field($result, $i);
}
$rows[] = $row;
}
print (json_encode($rows));
?>
edit.js
Ext.onReady(function(){
Ext.QuickTips.init();
var simpleForm = new Ext.FormPanel ({
labelWidth: 75,
url:'edit.php',
frame:true,
title: 'Add book',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Title',
name: 'title',
allowBlank:false
},{
fieldLabel: 'Author',
name: 'author'
},{
fieldLabel: 'ISBN',
name: 'isbn'
}],
buttons: [{
text: 'Save',
handler: function () {
simpleForm.getForm().submit({
waitMsg: 'Saving...',
success: function () {
Ext.MessageBox.alert ('Message','Data has been saved');
simpleForm.getForm().reset();
},
failure: function () {
Ext.MessageBox.alert ('Message','Saving data failed');
}
});
}
},{
text: 'Cancel',
handler: function () {
simpleForm.getForm().reset();
}
}]
});
simpleForm.render ('simple-form');
});
edit.php - ????????
<?php
require_once 'db.php';
$q=mysql_query ("INSERT INTO books VALUES (null, '".$_POST['title']."','".$_POST['author']."','".$_POST['isbn']."')
") or die ('{"success":"false"}');
// json output to notify the insert is success or not
if ($q) {
echo '{"success":"true"}';
}
else {
echo '{"success":"false"}';
}
?>