Related
Here is a bar chart showing dates. I'm trying to stylize it and to save space (but also because it is useless).
Do you know how we remove the green square and the text "data by year" please?
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
colors:[
'#d8d826'
],
legend:{
itemStyle:{
fontSize:'10px',
font:'10pt',
color:'#000000'
}
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
// NOTE: There is an interesting bug here where not all labels will be shown when the chart is redrawn.
// I'm not certain why this is occuring, and I've tried different methods to no avail. I'll check with Highcharts.
categories: ['1960','1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'],
tickmarkPlacement: 'on', tickInterval: 1,
minRange: 1 // set this to allow up to one year to be viewed
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,50]
}]
});
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes($('input[name="slider1"]').val(), $('input[name="slider2"]').val());
});
});
You can see the result in https://jsfiddle.net/uvat8u05/9/
Thank you !
You can disable the legend:
legend:{
enabled: false
},
Updated fiddle:
https://jsfiddle.net/uvat8u05/12/
I have a written a stats chart using highchairs.com for the daily visits and installs. I want to show the tooltip with Datetime and Names with total values for each series when hover or on click event.
Highcharts tooltip shared Data shared output is displaying with names but not the date and time correctly when you mouseover on the markers.
What I'm doing wrong?
The code I have written is on jsfiddle as well.
$(function () {
$('#campaign-container').highcharts({
chart: {
type: 'areaspline',
},
title: {
text: null
},
credits: {
enabled: false,
},
navigation: {
buttonOptions: {
enabled: false
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day:"%b %e, %Y",
},
tickInterval: 2,
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
min: 0,
max: 3000,
tickInterval: 1000,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalAlign: 'bottom',
layout: 'horizontal',
x: 0,
y: 0
},
plotOptions: {
areaspline: {
lineWidth: null,
marker: {
enabled: false,
radius: 5
}
}
},
series: [{
name: 'Visits',
color: '#d3d3d3',
data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}, {
name: 'Installs',
color: '#e77378',
data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}]
});
});
You need to provide either:
1) a pointStart and pointInterval property, on the series level (either in the plotOptions, or in the series object)
2) datetime values in the x values of your data
The datetime values can either by epoch time stamps (in milliseconds), or Date.UTC() objects.
The pointInverval, if used, must be in milliseconds.
Example using the pointStart and pointInterval properties:
http://jsfiddle.net/jlbriggs/7yrnreLx/3/
I have updated the code with the correct date time values and added the customised crosshair.
Here is the final code with a correct data values
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: null
},
credits: {
enabled: false,
},
navigation: {
buttonOptions: {
enabled: false
}
},
xAxis: {
type: 'datetime',
tickInterval: 2,
dateTimeLabelFormats: {
day:"%e",
},
crosshair: {
color:'#e77378',
zIndex: 2,
width: 3,
}
},
yAxis: {
min: 0,
max: 3000,
tickInterval: 1000,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
shared: true
},
legend: {
align: 'left',
verticalAlign: 'bottom',
layout: 'horizontal',
x: 0,
y: 0
},
plotOptions: {
series: {
cursor: 'pointer',
pointStart: Date.UTC(2016,0,1),
pointInterval: 86400000, //1 day
},
},
areaspline: {
lineWidth: null,
marker: {
enabled: false,
lineColor:'#e77378',
fillColor:'#ffffff',
lineWidth: 3,
radius: 4,
symbol:'circle'
}
}
},
series: [{
name: 'Visits',
color: '#d3d3d3',
data: [750,850,1000,1250,1050,950,720,850,650,750,950,1050,1150,1250,1450,1650,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}, {
name: 'Installs',
color: '#e77378',
data: [550,650,750,850,950,1050,1150,1250,1150,1050,950,850,750,650,550,450,750,20,20,20,20,20,20,20,20,20,20,20,20,20,20]
}]
});
});
I want to change the font of title, data label and tooltip to Bootstrap default default font in the pie chart (I'm using Highchart library to show the chart). I'm How can I change these? Tried to add fontFamily but it didn't work.
var chart = new Highcharts.Chart({
chart: {
renderTo: $(element).attr('id'),
backgroundColor: '#F8F8F8'
},
title: {
text: "Space Used by Users",
fontFamily: 'Helvetica'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.sizeText}',
style: {
fontSize: '11px'
}
},
showInLegend: true
}
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.sizeText}</b>'
},
series: [{
type: 'pie',
data: [
{
name: 'Personal Usage',
y: scope.item.personalUsage,
sizeText: scope.item.personalUsageSizeText
},
{
name: 'Shared Usage',
y: scope.item.sharedUsage,
sizeText: scope.item.sharedUsageSizeText
}
]
}]
});
How to change the font to default bootstrap?
You are only setting the font for the chart title. The below code sets the font globally for the pie chart.
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Helvetica'
}
}
});
Is it possible to use the Google Maps API base map data as an overlay positioned above a custom map layer?
I would like to create a map that uses Google's base water and land/terrain as the bottom layer, and then position a custom data layer above that (red polygonal regions representing my data), and then finally position Google Map's street/boundary/city labels on top of everything.
Is this possible? I tried pushing a Google Maps layer (with only streets/boundaries/cities turned on) onto the overlayMapTypes array, but it seems to force all of the Google Maps layers on top of everything, and my custom layer data (the second layer) is no longer visible.
Here is an example with a custom tile layer as the middle layer:
<script type="text/javascript">
function initMap() {
// Map with everything off but boundaries
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(0, 0),
styles: [
{
featureType: 'poi',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'transit',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'landscape',
stylers: [
{ visibility: 'off' }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// Middle layer
var tileLayer = new google.maps.ImageMapType({
getTileUrl: "tiles URL here",
tileSize: new google.maps.Size(256, 256),
isPng: true
});
map.overlayMapTypes.push(tileLayer);
// Top layer with everything off but roads
var roadsLayer = [
{
featureType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road',
stylers: [
{ visibility: 'on' }
]
}
];
var roadsType = new google.maps.StyledMapType(roadsLayer, { name: 'roads' });
map.overlayMapTypes.push(roadsType);
}
I have tried various ways to refresh the grid but everything I try doesn't work. Do I refresh the Grid or do I load the store??? You can see that the paging tool bar is still showing 50 pages after the filtering. If there are no dates on a given pag and it is empty then it will disable the tool bar and paging doesn't work after that page un less you refresh the browser and skip over the empty page. So, in my case page 15 has no rows so it breaks when u hit next and get that page. If you type in the page number 16 then all is good until you hit another's empty page.
My datepicker is in my viewport below and I have tried refreshing the gird and loading the store as well as other things which mostly result in undefined error. Not sure where to start with this one so I will show my code and screen shots below:
BEFORE DATE SELECTION:
AFTER DATE SELECTION:
STORE:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
//extraParams :{limit:1000},
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset',
remoteFilter : true
},
listeners:
{
// stuff goes here maybe??
}
}
});
GRID PANEL:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
//buffered: true,
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 2})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
// submitFormat: 'd/m/Y',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
});
VIEWPORT:
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
//store.load();
//store.sync();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
CONTROLLER:
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores:['Users', 'dates'],
models:['User', 'date'],
views: ['user.List','user.Edit'],
init: function() {
Ext.getStore('dates').addListener('load',this.ondatesStoreLoad, this);
this.control(
{
'viewport > userlist':
{
itemdblclick: this.editUser,
},
'useredit button[action=save]':
{
click: this.updateUser
}
});
},
// ---------- handler Function declarations -------------
ondatesStoreLoad: function(me,records,success)
{
// ------ Gets the dates from dates store and loads an array
var store = this.getStore('dates');
sendDataArray = [];
store.each(function(record){
var recordArray = [record.get("unix_time_stamp")];
sendDataArray.push(recordArray);
});
// ------ Set DatePicker Bullshit right fucking here --------//
var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];
dtFld.setDisabledDates(["^(?!"+sendDataArray.join("|")+").*$"]);
dtFld.setMaxDate(new Date());
dtFld.setMinDate(new Date('05/01/2013'));
var wstPnlReg = Ext.ComponentQuery.query('#westPanelRegion')[0];
wstPnlReg.show();
var ctrPnlReg = Ext.ComponentQuery.query('#centerPanelRegion')[0];
ctrPnlReg.show();
// var grid = Ext.widget('userlist');
},
onUsersStoreDataChange: function(me)
{
//console.log('Hey the store data just changed!');
},
editUser: function(grid, record)
{
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button)
{
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
},
});
UPDATED VIEWPORT: Changes made only in datepicker handler
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
// Load the store
store.load();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
This line is likely causing the issues.
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
I'm not sure why you are calling Ext.encode on whatever store.filter returns, but I don't think you want to do that (and it is likely causing the undefined errors).
As for the paging toolbar not updating the current count, it is likely you just aren't returning the correct information in your server response when updating the store. The server response should include the total number of records. According to the docs for Ext.toolbar.Paging, http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.toolbar.Paging:
The packet sent back from the server would have this form:
{
"success": true,
"results": 2000,
"rows": [ // ***Note:** this must be an Array
{ "id": 1, "name": "Bill", "occupation": "Gardener" },
{ "id": 2, "name": "Ben", "occupation": "Horticulturalist" },
...
{ "id": 25, "name": "Sue", "occupation": "Botanist" }
]
}