Related
I have question regarding series name, How can i set static series name to the element based on the categories in the HighChart.
The expected output will be like this:
As of now I have result on my web app.
Is it possible to change that Series1,Series2,Series3 based on what I want to put on the Series name?
I have here my codes:
categories = [],
series = [];
$.getJSON('ajax/ams_sla_report_chart.php', function(data,name){
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({
name:['MR','MR_HIT','MR_HIT_PERCENTAGE'],
data: [el]
});
}
});
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'containers',
type: 'column',
inverted: false
},
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
categories: categories
},
title: {
text: 'Priority Based on SLA'
},
series:series
});
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();
});
You need to define the series names array outside of the loop and use only one name in the loop:
var seriesNames = ['MR', 'MR_HIT', 'MR_HIT_PERCENTAGE'],
...
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({
name: seriesNames[i - 1],
data: [el]
});
}
});
});
Live demo: http://jsfiddle.net/BlackLabel/ewauprqh/
I use DataTables to format my tables on a reporting website that I run. I am using the initialization to add a hyperlink to the first column of my tables. Is there a way to make it act like a button instead of a hyperlink?
I need this because I have the hyperlink sending the whole row as part of the link (so through GET), but it's failing because of the limit on characters in GET. I need to use a POST so that I can send this larger amount of data.
The definition of the hyperlink is:
data = '' + data + '';
Here's the full datatables initialization to show the hyperlink in context:
$.fn.dataTable.ext.buttons.export =
{
className: 'buttons-alert',
"text": "Export All Test",
action: function (e, dt, node, config)
{
alert('Export All Test');
}
};
$(document).ready(function ()
{
// Setup - add a text input to each footer cell
$('#DataTableEdit tfoot th').each(function ()
{
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
var table = $('#DataTableEdit').DataTable({
"lengthMenu": [[25, 50, 75, 100, 150, -1], [25, 50, 75, 100, 150, 'All']],
"dom": '<"top"Bifpl<"clear">>rt<"bottom"ip<"clear">>',
"buttons": [{
extend: 'collection',
text: 'Selection',
buttons: ['selectAll', 'selectNone']
}, {
extend: 'collection',
text: 'Export',
buttons: ['export', 'excel', 'csv', 'pdf', { extend: 'excel',
text: 'Export Current Page',
exportOptions: {
modifier: {
page: 'current'
}
},
customize: function (xlsx)
{
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s', '7');
}
},
{
text: 'Export All to Excel',
action: function (e, dt, button, config)
{
dt.one('preXhr', function (e, s, data)
{
data.length = -1;
}).one('draw', function (e, settings, json, xhr)
{
var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
var addOptions = { exportOptions: { 'columns': ':all'} };
$.extend(true, excelButtonConfig, addOptions);
excelButtonConfig.action(e, dt, button, excelButtonConfig);
}).draw();
}
}]
}
],
"fixedHeader": {
header: true,
footer: true
},
"select": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "./ServerSide.php",
"type": "POST"
},
//This is the part that adds the hyperlink
columnDefs: [
{
targets: 0,
render: function (data, type, row, meta)
{
if (type === 'display')
{
data = '' + data + '';
}
return data;
}
}],
//End of hyperlink creation
initComplete: function ()
{
var api = this.api();
// Apply the search
api.columns().every(function ()
{
var that = this;
$('input', this.footer()).on('keyup change', function ()
{
if (that.search() !== this.value)
{
that
.search(this.value)
.draw();
}
});
});
}
});
});
If I don't have enough information let me know and I'll add more.
You can try and enclose it inside a <form> tag which will make it submit as post
if (type == 'display'){
data = '<form action="FormToEdit.php" method="post"><button type="submit"
class="btn-as-link" value = \'' +
encodeURIComponent(row) + '\'>' + data + '</button></form>' ;
}
And you can make it look like a link:
.btn-as-link{
border: none;
outline: none;
background: none;
cursor: pointer;
padding: 0;
text-decoration: underline;
}
I'm trying to add the Google Cluster to my map, but i cant work out how to do it? i have created the map and its markers with info box using mysql query in php. know i'm adding more markers they are over lapping so i need to add the cluster command but i can't get it working. my code is below
<script>
$(document).ready(function() {
//------- Google Maps ---------//
// Creating a LatLng object containing the coordinate for the center of the map
var latlng = new google.maps.LatLng(53.0,0);
// Creating an object literal containing the properties we want to pass to the map
var options = {
zoom: 5, // This number can be set to define the initial zoom level of the map
center: latlng,
disableDefaultUI: true,
panControl: false,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP, // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
styles: [
{
"featureType": "landscape.natural",
"stylers": [
{ "visibility": "simplified" },
{ "color": "#07c6ee" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "on" },
{ "hue": "#6e00ff" },
{ "gamma": 1.96 },
{ "lightness": 18 },
{ "saturation": -78 },
{ "color": "#46fcb3" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "simplified" },
{ "color": "#f9ec55" }
]
},{
},{
"featureType": "road.highway",
"stylers": [
{ "visibility": "on" },
{ "color": "#7b8080" }
]
},{
"featureType": "road.arterial",
"stylers": [
{ "visibility": "on" },
{ "color": "#808080" }
]
},{
"featureType": "road.local",
"stylers": [
{ "color": "#808080" },
{ "visibility": "on" }
]
},{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#fefffe" },
{ "visibility": "on" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.highway",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
},{
}
]
};
// Calling the constructor, thereby initializing the map
var map = new google.maps.Map(document.getElementById('map_div'), options);
// Define Marker properties
var image1 = new google.maps.MarkerImage('http://www.foodhawkers.co.uk/images/map-market.png',
// This marker is 129 pixels wide by 42 pixels tall.
new google.maps.Size(40, 40),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 18,42.
new google.maps.Point(40, 40)
);
//
// Add Marker
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(51.4636101,-0.1382557),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map, marker1);
});
// Add information window
var infowindow1 = new google.maps.InfoWindow({
content: createInfo('Venn Street Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(51.5367954,-0.0618898),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map, marker2);
});
// Add information window
var infowindow2 = new google.maps.InfoWindow({
content: createInfo('Broadway Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(51.4721386,-2.7580983),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map, marker3);
});
// Add information window
var infowindow3 = new google.maps.InfoWindow({
content: createInfo('StrEAT Food Market', '<div style="width:200px">We\'re really hoping to be doing some amazing street food nights in the CENTRE of...</div><br /><br />View profile')
});
var marker4 = new google.maps.Marker({
position: new google.maps.LatLng(51.5945845,-0.1302629),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map, marker4);
});
// Add information window
var infowindow4 = new google.maps.InfoWindow({
content: createInfo('Alexandra Palace Farmers Market', '<div style="width:200px">Sundays 10:00 - 15:00...</div><br /><br />View profile')
});
var marker5 = new google.maps.Marker({
position: new google.maps.LatLng(51.5050824,-0.0900808),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker5, 'click', function() {
infowindow5.open(map, marker5);
});
// Add information window
var infowindow5 = new google.maps.InfoWindow({
content: createInfo('Borough Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker6 = new google.maps.Marker({
position: new google.maps.LatLng(51.5057757,-0.1168251),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker6, 'click', function() {
infowindow6.open(map, marker6);
});
// Add information window
var infowindow6 = new google.maps.InfoWindow({
content: createInfo('The Real Food Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker7 = new google.maps.Marker({
position: new google.maps.LatLng(51.5005095,-0.1131232),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker7, 'click', function() {
infowindow7.open(map, marker7);
});
// Add information window
var infowindow7 = new google.maps.InfoWindow({
content: createInfo('Lower Marsh Market', '<div style="width:200px">Lower Marsh is steeped in history as one of London’s oldest and best-loved market streets....</div><br /><br />View profile')
});
var marker8 = new google.maps.Marker({
position: new google.maps.LatLng(51.4682204,-0.0259369),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker8, 'click', function() {
infowindow8.open(map, marker8);
});
// Add information window
var infowindow8 = new google.maps.InfoWindow({
content: createInfo('Brockley Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var marker9 = new google.maps.Marker({
position: new google.maps.LatLng(51.4528397,-0.1019773),
map: map,
icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
});
// Add listener for a click on the pin
google.maps.event.addListener(marker9, 'click', function() {
infowindow9.open(map, marker9);
});
// Add information window
var infowindow9 = new google.maps.InfoWindow({
content: createInfo('Herne Hill Farmers Market', '<div style="width:200px">...</div><br /><br />View profile')
});
var markerCluster = new MarkerClusterer(options, markers);
// Create information window
function createInfo(title, content) {
return '<div class="infowindow"><strong>'+ title +'</strong><br />'+content+'</div>';
}
});
</script>
Which version of MC you are using? Because version 2.0.x has following construct syntax:
var markerCluster = new MarkerClusterer(map, opt_markers, opt_options);
Try this:
var markerCluster = new MarkerClusterer(map);
markerCluster.addMarker(marker1);
...
markerCluster.addMarker(marker9);
Or, keep Your markers in array, add this to top of Your code:
var markers = [];
After declaring each marker add it to that array:
markers.push(markerN);
And add all of them at once to cluster:
markerCluster.addMarkers(markers);
I am trying to modify someone else's extjs code and I really need some help.
Basically when a username/password is validated the dashboard.js is called which is included in index.php.
Now what I need to do is after the username/password is validated I need another form to popup asking for confirmation number.
This does not need to be validated(just check for empty string), just entered in the form and I need to save it in a session.
//index.php
<script>
Ext.onReady( function() {
Web.ip = '<?php print $_SERVER["REMOTE_ADDR"]; ?>';
var sessionInfo = Web.getCookieInfo();
if( sessionInfo ) {
Web.Dashboard.init();
Web.user = sessionInfo;
Web.Dashboard.loadDefault();
} else {
Web.Login.init();
Web.Dashboard.init();
}
});
</script>
//dashboard.js
Web.Dashboard = function() {
var contentPanel = new Ext.Panel({
region: 'center',
layout: 'fit',
margins: '0 5 5 0',
border: true,
html: ''
});
return {
init: function() {
........
}
}
}();
Here is my success function called inside onsubmit function:
success: function( result, request ) {
try {
var obj = Ext.decode( result.responseText );
if( obj.success ) {
var permissions = obj.USER[0].VALUES;
var p = {};
for( var i=0 ; i<permissions.length ; i++ ) {
p[permissions[i].PERMISSION] = true;
}
Web.Dashboard.loadDefault();
} else {
//alert ('got here');
if (obj.ErrorCode == 20410 ) {
th.changePasswordWindow.show();
return;
}
th.loginPanel.form.reset();
th.loginWindow.displayInfo( 'Invalid username/password' );
}
} catch( ex ) {
th.loginWindow.el.unmask();
th.loginPanel.focusUsername();
th.loginPanel.form.reset();
th.loginWindow.displayInfo( 'Error: ' + ex );
}
},
Ok, edit with a simple ActionSheet, containing another form, it will be a separate form with a single input field - change textfield.name and formpanel.url so that it matches your serverside.
Once you in your success after a login, create the sheet (or another modal panel popup). Render and show, then send another request to server with formpanel.getForm().submit() and you should be good to go.
This sample ActionSheet which has a button handler, adapt that function to your needs (redirecting after success etc)
function loginDone() {
...
if(success) {
var pincodeSheet = Ext.create("Ext.ActionSheet", {
items: [{
xtype: 'toolbar',
cls: 'actionSheetToolbar',
itemId: 'id_title',
docked: 'top',
title: ''
}, {
xtype: 'spacer',
height: 10
}, {
xtype: 'formpanel',
padding: 10,
url: 'set_session_variable_serverside.asp', // adapt this
items: [{
title: 'Please enter PIN',
cls: 'loginTbarTop',
xtype: 'toolbar',
docked: 'top'
}, {
xtype: 'toolbar',
docked: 'bottom',
cls: 'loginTbarBottom',
items: [{
xtype: 'spacer'
}, {
xtype: 'button',
text: 'OK',
ui: 'action',
handler: function(btn,evt) {
// perform any validation here
pincodeSheet.down('formpanel').getForm().submit();
}
}]
}, { /* end docked */
cls: 'loginFormFieldset',
xtype: 'fieldset',
defaults: {
labelAlign: 'left',
labelWidth: '35%',
clearIcon: false
},
/* form field declarations */
items: [{
tabIndex: 1,
xtype: 'textfield',
name: 'session_variable', /// name of input field
label: 'PIN CODE'
}] /* end form fields */
}] /* end form panel items */
}] /* end sheet items */
});
pincodeSheet.render(document.body);
}
...
}
load failed -- arguments: [Object api=Object, Object request=Object reader=Object scope=Object, Object tId=0 status=200 statusText=OK, SyntaxError: missing } after property list message=missing } after property list]
I got that error by adding an exception to my store but don't see any real error in my code...maybe another set of eyes will help.
php:
case 'messages':
if(isset($_SESSION['id'])){
$stmt = $dbh->prepare("Select ID, ReceivedAt, Message from SystemEvents Limit 100");
$stmt->execute();
while($tmp = $stmt->fetch()){
$y .= '{"ID":"'.$tmp['ID'].'","ReceivedAt":"'.$tmp['ReceivedAt'].'","Message":"'.$tmp['Message'].'"},';
}
$y = trim($y,',');
if(isset($_REQUEST['callback'])){
echo $_REQUEST['callback'].'({"dates":['.$y.']});';
}else{
echo '{"dates":['.$y.']}';
}
}else{
if(isset($_REQUEST['callback'])){
echo $_REQUEST['callback'].'({success: false, data{"error_title": "Error", "errormsg": "Cannot display dates"}})';
}
else{
echo '{success: false, data{"error_title": "Error", "errormsg": "Cannot display dates"}}';
}
}
break;
extjs:
Ext.onReady(function(){
var logStore = new Ext.data.JsonStore({
autoLoad: true,
url: 'inc/interface/config.php?list=messages',
root: 'dates',
idProperty: 'ID',
fields: ['ID', 'ReceivedAt', 'Message'],
listeners: {
loadexception: function() {
console.log('load failed -- arguments: %o', arguments);
}
}
});
var dateStore = new Ext.data.JsonStore({
autoLoad: true,
url: 'inc/interface/config.php?list=date_options',
root: 'dates',
idProperty: 'ID',
fields: ['ID', 'ReceivedAt'],
listeners: {
loadexception: function() {
console.log('load failed -- arguments: %o', arguments);
}
}
});
var dateSelect = new Ext.form.DateField({
fieldLabel: 'Pick a date',
width: 190,
align: 'center',
frame: true
});
var dateCombo = new Ext.form.ComboBox({
store: dateStore,
mode: 'local',
valueField: 'ID',
displayField: 'ReceivedAt',
editable: false,
emptyText: 'Select a Date',
width: 250,
listeners:{
activate: function(){
dateStore.reload();
}
}
});
var searchField = new Ext.form.TextField({
fieldLabel: 'Search Criteria',
emptyText: 'Search....',
width: 190,
frame: true
});
var searchButton = new Ext.Button({
text: 'Search',
});
var clearButton = new Ext.Button({
text: 'Clear',
tooltip: 'Clears all your search data'
});
var searchPanel = new Ext.Panel({
layout: 'form',
region: 'east',
width: 300,
collapsible: true,
alignButton: 'right',
title: "Search Panel",
items: [dateSelect, dateCombo, searchField],
buttons: [clearButton, searchButton]
});
var logGrid = new Ext.grid.GridPanel({
region: 'center',
store: logStore,
colModel: new Ext.grid.ColumnModel({
columns: [{
id: 'received',
header: 'Received',
dataIndex: 'ReceivedAt',
width: 250
},{
id: 'message',
header: 'Logs',
dataIndex: 'Message',
width: 750
}]
}),
});
var mainViewport = new Ext.Viewport({
layout: 'border',
items: [logGrid, searchPanel]
});
});
I don't think posting the rest of my php would be relevant since it all works but hopefully someone can spot something that my bad eyes cannot.
I see an extra comma here:
var searchButton = new Ext.Button({
text: 'Search',
});
Also on the LogGrid. That might be it
EDIT: The response sent back from PHP does not look like it will be valid JSON if there is an error data{"error_title" is wrong, should be data:{"error_titel"
You really should look at building objects/arrays in PHP and echo these using json_encode instead of building JSON manually.
BTW: To find stray commas, I do a search with the following pattern:
\,\s*(}|])
This saves heaps of time, especially since different browsers are more robust than others to misplaced commas.