I spend a lot of time to format each highcharts elements to french format (texts, dates, buttons, etc..)
I propose a little "macro" french theme for your applications using highcharts.
Highcharts.theme = {
lang: {
/*------ Dates translation ------ */
months: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi',
'Jeudi', 'Vendredi', 'Samedi'],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil',
'Aout', 'Sept', 'Oct', 'Nov', 'Déc'],
/*------ Texts translation ------ */
downloadPNG: 'Télécharger en image PNG',
downloadJPEG: 'Télécharger en image JPEG',
downloadPDF: 'Télécharger en document PDF',
downloadSVG: 'Télécharger en document Vectoriel',
exportButtonTitle: 'Export du graphique',
loading: 'Chargement en cours...',
printButtonTitle: 'Imprimer le graphique',
resetZoom: 'Réinitialiser le zoom',
resetZoomTitle: 'Réinitialiser le zoom au niveau 1:1',
printChart: 'Imprimer le graphique',
/*------ Number Formate ------ */
thousandsSep: ' ', // ex: 52 000
decimalPoint: ',' // ex: 1 525,50
},
credits: {
/*------ Unrelated but usefull to remove credits in each charts ------ */
enabled: false
},
rangeSelector: {
/*------ Highstock date range selector (the 2 little inputs in right corner) ------ */
inputDateFormat: '%e %b %Y', // ex: 8 Avr 2014
inputEditDateFormat: '%d/%m/%Y', // After clicking on item ex : 13/06/2014
// Processing After enter key pressed : apply the 13/06/2014 format
inputDateParser: function (value) {
value = value.split('/');
return Date.UTC(
parseInt(value[2]),
parseInt(value[1]) - 1,
parseInt(value[0])
);
},
/*------ Highstock zoom selector (on the left top side) ------ */
buttons: [{
type: 'month',
count: 1,
text: '1 M' // useless translate :p
}, {
type: 'month',
count: 6,
text: '6 M' // useless translate :p
}, {
type: 'year',
count: 1,
text: '1 A' // translate Y in A (Année in french)
}, {
type: 'all',
count: 1,
text: 'Tout' // translate all in Tout
}],
selected: 2, // Here we force to select 6 M
inputEnabled: true // Active Inputs
},
};
Highcharts.setOptions(Highcharts.theme);
You have to add this file(charts-theme.js) between the highstock.js and your .highcharts function.
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://saur/assets/backend/pages/scripts/charts-theme.js"></script>
<script src="http://saur/assets/backend/pages/scripts/charts.js"></script>
Obviously, you can use it with different language, or just to define some "general" uses.
Hope it help.
Related
My questions (short style)
Can you customize a y-axis labeling interval ?
Can you display the extreme values of a series as an horizontal line ?
The detailed explanations
I have a combo chart made with Google Charts : the first set of data uses an area style, and the second a line style. The second one is the one that matters here :
it represents a percentage
i don't want it from 0 to 1 (or 0 to 100 in percentage), but from its min to its max (or something near)
and i want to display those min and max values
If i modify the scale so :
PHP
$min_reject_percentage = 5 * floor($min_reject_percentage / 5);
$max_reject_percentage = 5 * ceil($max_reject_percentage / 5);
JS
var options = {
...
vAxes: {
...
1: {
format:"##%",
viewWindow: {
min: <?php echo ($min_taux_rejet / 100); ?>,
max: <?php echo ($max_taux_rejet / 100); ?>,
},
},
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
targetAxisIndex: 1,
type: 'line',
},
}
}
The vertical axis is limited to the nearest multiple of 5 for min and max values, but :
the interval shown on the axis is from 10 to 10, which is too big. Since i have a real max of 31.5 and a real min of 17.1, axis min is 15 is 15 and axis max is 35, but the only graduation labeled are 20 and 30.
i can't see the real min and max on the graph
you can use config option ticks, which is an array of values to be used for the labels...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1'],
[0, 18, 0.171],
[1, 28, 0.315],
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
var axisMin = 0.15;
var axisMax = 0.35;
var ticks = [];
for (var i = axisMin; i <= axisMax; i = i + 0.05) {
ticks.push(i);
}
var options = {
vAxes: {
1: {
format: '##%',
ticks: ticks,
viewWindow: {
min: axisMin,
max: axisMax,
},
},
},
series: {
0: {
targetAxisIndex: 0,
type: 'area',
},
1: {
targetAxisIndex: 1,
type: 'line',
},
}
};
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to display line chart with daily stats. But the dates on X- axis seem to be repeating.
Link to image
Here is the code for line chart:
new Morris.Line({
element: 'chart',
data: [ #foreach($Data as $data)
{ date: '{{$data['date']}}', value: {{$data['diff']}}},
#endforeach
],
xkey: ['date'],
xLabelFormat: function(date) {
return date.getFullYear() + '/' + (date.getMonth()+1)+ '/' + date.getDate();
},
xLabelAngle : 50,
ykeys: ['value'],
labels: ['Value'],
resize: true,
smooth: true,
lineColors: ['#9ec628'],
dateFormat: function(date) {
date = new Date(date);
return date.getFullYear()+ '/' + (date.getMonth()+1)+ '/' + date.getDate();
},
});
I also tried parseTime: false but that's not helping.
The solution is to add the option xLabels: 'day' to your config, then only 1 value in x-axis per day would be displayed. I found that option in the documentation http://morrisjs.github.io/morris.js/lines.html
I am using stacked column highchart. I am getting few value in column and tooltip. Now I want to show this value in Indian format with comma separator. Suppose I have a value like 123456789.So I want to show this value in 12,34,56,789 format. How can I do this? Please share with me if any body has any idea.
I tried this below code.
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
But It gives 123,456,789 format, I want something like 12,34,56,789. The Indian format.
My codes are below:
function draw_charts(amount, interest , year)
{
/*Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});*/
$('#chart_area').highcharts({
chart: {
type: 'column',
backgroundColor: 'transparent'
},
title: {
text: 'Year wise break-up'
},
xAxis: {
categories: year,
title: {
text: 'Year'
}
},
yAxis: {
min: 0,
title: {
text: 'Amount'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: -5,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'Interest',
data: interest, color: '#7fb801'
},{
name: 'Principal',
data: amount, color: '#4fc1e9'
}],
exporting: { enabled: false },
credits: { enabled: false },
});
}
You can slightly modify the numberFormat function, changing from the lines (from source):
thousands = strinteger.length > 3 ? strinteger.length % 3 : 0;
// ...
ret += strinteger.substr(thousands).replace(/(\d{3})(?=\d)/g, '$1' + thousandsSep);
To these lines:
thousands = strinteger.length > 3 ? (strinteger.length - 1) % 2 : 0;
// ...
ret += strinteger.substr(thousands).replace(/(\d{2})(?=\d{3})/g, '$1' + thousandsSep);
Ending up with this function:
Highcharts.numberFormat = function (number, decimals, decimalPoint, thousandsSep) {
number = +number || 0;
decimals = +decimals;
var lang = Highcharts.getOptions().lang,
origDec = (number.toString().split('.')[1] || '').length,
decimalComponent,
strinteger,
thousands,
absNumber = Math.abs(number),
ret;
if (decimals === -1) {
decimals = Math.min(origDec, 20); // Preserve decimals. Not huge numbers (#3793).
} else if (!isNumber(decimals)) {
decimals = 2;
}
// A string containing the positive integer component of the number
strinteger = String(Highcharts.pInt(absNumber.toFixed(decimals)));
// Leftover after grouping into thousands. Can be 0, 1 or 3.
thousands = strinteger.length > 3 ? (strinteger.length - 1) % 2 : 0;
// Language
decimalPoint = Highcharts.pick(decimalPoint, lang.decimalPoint);
thousandsSep = Highcharts.pick(thousandsSep, lang.thousandsSep);
// Start building the return
ret = number < 0 ? '-' : '';
// Add the leftover after grouping into thousands. For example, in the number 42 000 000,
// this line adds 42.
ret += thousands ? strinteger.substr(0, thousands) + thousandsSep : '';
// Add the remaining thousands groups, joined by the thousands separator
ret += strinteger.substr(thousands).replace(/(\d{2})(?=\d{3})/g, '$1' + thousandsSep);
// Add the decimal point and the decimal component
if (decimals) {
// Get the decimal component, and add power to avoid rounding errors with float numbers (#4573)
decimalComponent = Math.abs(absNumber - strinteger + Math.pow(10, -Math.max(decimals, origDec) - 1));
ret += decimalPoint + decimalComponent.toFixed(decimals).slice(2);
}
return ret;
};
I've prefixed some function calls with Highcharts to make it work without a custom js-file.
See this JSFiddle demonstration of it in use.
How can I find the difference between two dates in DB2 (excluding weekends)?
Are there any functions that will do this in DB2? Or do I need to write a query myself?
There is AFAIK no such function. It is however easy to write a query that calculates this:
with cal(d) as (
values date('2015-01-01') -- start_date
union all
select d + 1 day from cal
where d < '2015-01-15' -- end_date
) select count(case when dayofweek(d) between 2 and 6 then 1 end)
from cal;
If you do a lot of these kind of calculations you might want to create a calendar table, you can add attributes like national holiday etc to this table.
you can use this function:
DAYOFWEEK(CURRENT_DATE)
The following calculation will return the number of working days between two dates:
[Week(End Date) - Week(Start Date)] * 5 + [DayofWeek(Start Date) - DayofWeek(End Date)]
This will only work if the functions for Week and Day or equivalent are native to the database driver. Client Access and Sybase native connection both support these functions.
The Week function will give the integer value of the week of the year selected. The DayofWeek will give an Integer value from 1-7 for the day selected.
IBM Support Working Days Between Two Dates
This is the best way to implement difference between two dates excluding weekend means Saturday and Sunday and also excluding national holiday....
/******
* First, we'll extend the date object with some functionality.
* We'll add an .each() function, as well as an .adjust() function.
* .each() will give us the ability to loop between two dates, whether
* by 'day', 'week' or 'month'.
* .adjust() will allow us to move a given day by a given unit. This is used
* like so: currentDate.adjust('days', 1) to increment by one day.
******/
Date.prototype.each = function(endDate, part, step, fn, bind){
var fromDate = new Date(this.getTime()),
toDate = new Date(endDate.getTime()),
pm = fromDate <= toDate? 1:-1,
i = 0;
while( (pm === 1 && fromDate <= toDate) || (pm === -1 && fromDate >= toDate) ){
if(fn.call(bind, fromDate, i, this) === false) break;
i += step;
fromDate.adjust(part, step*pm);
}
return this;
};
Date.prototype.adjust = function(part, amount){
part = part.toLowerCase();
var map = {
years: 'FullYear', months: 'Month', weeks: 'Hours', days: 'Hours', hours: 'Hours',
minutes: 'Minutes', seconds: 'Seconds', milliseconds: 'Milliseconds',
utcyears: 'UTCFullYear', utcmonths: 'UTCMonth', weeks: 'UTCHours', utcdays: 'UTCHours',
utchours: 'UTCHours', utcminutes: 'UTCMinutes', utcseconds: 'UTCSeconds', utcmilliseconds: 'UTCMilliseconds'
},
mapPart = map[part];
if(part == 'weeks' || part == 'utcweeks')
amount *= 168;
if(part == 'days' || part == 'utcdays')
amount *= 24;
this['set'+ mapPart]( this['get'+ mapPart]() + amount );
return this;
}
/*******
* An array of national holidays. This is used to test for the exclusion of given
* days. While this list is national days, you could tailor it to regional, state
* or given religious observances. Whatever.
******/
natDays = [
{
month: 1,
date: 26,
type: "national - us",
name: "New Year's Day"
},
{
month: 1,
date: 21,
type: "national - us",
name: "Martin Luther King Day"
},
{
month: 2,
date: 18,
type: "national - us",
name: "President's Day (Washington's Birthday"
},
{
month: 5,
date: 27,
type: "national - us",
name: "Memorial Day"
},
{
month: 7,
date: 4,
type: "national - us",
name: "Independence Day"
},
{
month: 9,
date: 2,
type: "national - us",
name: "Labor Day"
},
{
month: 10,
date: 14,
type: "national - us",
name: "Columbus Day"
},
{
month: 11,
date: 11,
type: "national - us",
name: "Veteran's Day"
},
{
month: 11,
date: 29,
type: "national - us",
name: "Thanksgiving Day"
},
{
month: 12,
date: 25,
type: "national - us",
name: "Christmas Day"
}
];
/******
* This uses the national holidays array we just set, and checks a given day to see
* if it's in the list. If so, it returns true and the name of the holiday, if not
* it returns false.
*****/
function nationalDay(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == (natDays[i].month-1)
&& date.getDate() == natDays[i].date) {
return [true, natDays[i].name];
}
}
return [false, null];
}
/******
* This function takes two dates, as start and end date, and iterates through the
* dates between them. For each date, it checks if the current date is a week day.
* If it is, it then checks if it isn't a holiday. In this case, it increments
* the business day counter.
******/
function calcBusinessDays(startDate, endDate) {
// input given as Date objects
var iDateDiff=0, holidays = [];
startDate.each(endDate, 'days', 1, function(currentDate, currentStep, thisDate){
if(currentDate.getDay() != 0 && currentDate.getDay() != 6 ) {
var isAHoliday = nationalDay(currentDate);
if(!isAHoliday[0]){
iDateDiff += 1;
} else {
holidays.push(isAHoliday[1]);
}
}
});
return {count: iDateDiff, holidays: holidays};
};
$(function(){
var results, exclusions;
$( "#startDate" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#endDate" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#endDate" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#startDate" ).datepicker( "option", "maxDate", selectedDate );
}
});
$("#calculateMe").on("click", function(){
var startDate = new Date($("#startDate").val()),
endDate = new Date($("#endDate").val() );
// Calculate the number of business days. This returns an object, with
// two members: count and holidays
results = calcBusinessDays(startDate, endDate);
exclusions = "Excluded weekends";
if (results.holidays.length > 0) {
// We have holidays, tell the user about them...
exclusions += " and the following holidays: ";
for(var i=0; i<results.holidays.length; i += 1){
exclusions += results.holidays[i]+", ";
}
} else {
// No holidays.
exclusions += ".";
}
$("#result").text(results.count + " business days." ).append("<p>("+exclusions+")</p>");
});
});
<div id="content">
<input type="text" class="myDateClass" id="startDate"/>
<input type="text" class="myDateClass" id="endDate"/>
<button id="calculateMe">How many business days?</button>
<div id="result"></div>
</div>
Fiddle
i'am using Extjs 4.2. I had implemented an app using grids, but i'am having an issue just only in crhome. Some Dates are not showed in the grid. This is the part of my view:
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraLlegadaOrigen',
text: 'FechaHoraLlegadaOrigen',
format: 'd/m/Y H:i:s',
editor: {
xtype: 'datefield',
format: 'd/m/Y H:i:s',
submitFormat: 'd/m/Y H:i:s'
}
},
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraDespachoOrigen',
text: 'FechaHoraDespachoOrigen',
format: 'd/m/Y H:i:s',
editor: {
xtype: 'datefield',
format: 'd/m/Y H:i:s',
submitFormat: 'd/m/Y H:i:s'
}
},
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraLlegadaTumbes',
text: 'FechaHoraLlegadaTumbes',
format: 'd/m/Y H:i:s',
editor: {
xtype: 'datefield',
format: 'd/m/Y H:i:s',
submitFormat: 'd/m/Y H:i:s'
}
}...
And when i check chrome with its dev tools, i got the following incoming data to fill the grid:
{"listafichatransporte":[{"Id":"1","IdEmpresa":"12","Empresa":"DYS NEVADOS ","Contacto":"Violeta Olivera","Celular":"943200859","Placa1":"A7Z -847","Capacidad":"24 ","Chofer":"Moises Quispe Fernandez","Nextel":"999999999","CelularPeru":"985314508","CelularEcuador":"987049690","Termoregistro1":"b","Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"05/02/2013 10:30:00","FHDespaPuntoRecojo":"05/02/2013 00:00:00","FHLlegadaTumbes":"05/03/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"1","IdChofer":"1","IdCamionChofer":"10","Grower":"COMPOSITAN / JUREM"},{"Id":"2","IdEmpresa":"13","Empresa":"ECUACARGAS","Contacto":"GUSTAVO TORRES","Celular":"993418166","Placa1":"PAA-4803","Capacidad":"20 SKIDS","Chofer":"VICTOR HUGO FEIJOO","Nextel":"999999999","CelularPeru":"0051-957576513","CelularEcuador":"997511731","Termoregistro1":null,"Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"05/05/2013 00:00:00","FHDespaPuntoRecojo":"05/05/2013 00:00:00","FHLlegadaTumbes":"05/06/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"2","IdChofer":"2","IdCamionChofer":"18","Grower":"COMPOSITAN / JUREM"},{"Id":"3","IdEmpresa":"13","Empresa":"ECUACARGAS","Contacto":"GUSTAVO TORRES","Celular":"993418166","Placa1":"PAB-2090","Capacidad":"20 SKIDS","Chofer":"WILLIAM NARVAEZ","Nextel":"999999999","CelularPeru":"0051- 950659189","CelularEcuador":"995379357","Termoregistro1":null,"Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"05/07/2013 00:00:00","FHDespaPuntoRecojo":"05/07/2013 00:00:00","FHLlegadaTumbes":"05/08/2013 00:00:00","IdPuntoLlegada":"3","PuntoLlegadaEcuador":"GUAYAQUIL","FHLlegadaPuntoEcuador":" ","IdCamion":"3","IdChofer":"3","IdCamionChofer":"19","Grower":"COMPOSITAN / JUREM"},{"Id":"4","IdEmpresa":"13","Empresa":"ECUACARGAS","Contacto":"GUSTAVO TORRES","Celular":"993418166","Placa1":"PZQ-807","Capacidad":"20 SKIDS","Chofer":"JIMMY OBANDO","Nextel":"999999999","CelularPeru":"0051-963-995-83","CelularEcuador":"0991-515-348","Termoregistro1":null,"Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"30/06/2013 13:00:00","FHDespaPuntoRecojo":"30/06/2013 22:00:00","FHLlegadaTumbes":"01/07/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"4","IdChofer":"4","IdCamionChofer":"20","Grower":"COMPOSITAN"},{"Id":"5","IdEmpresa":"13","Empresa":"ECUACARGAS","Contacto":"GUSTAVO TORRES","Celular":"993418166","Placa1":"OAA-1457","Capacidad":"20 SKIDS","Chofer":"EUCEBIO GOMEZ","Nextel":"999999999","CelularPeru":"0051-971-691-62","CelularEcuador":"0985-985-783","Termoregistro1":"CORINOR 425971 PHR 373","Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"30/06/2013 00:00:00","FHDespaPuntoRecojo":"30/06/2013 19:00:00","FHLlegadaTumbes":"01/07/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"5","IdChofer":"5","IdCamionChofer":"21","Grower":"CORINOR / AGROCASPI"},{"Id":"6","IdEmpresa":"12","Empresa":"DYS NEVADOS ","Contacto":"Violeta Olivera","Celular":"943200859","Placa1":"A7Z -847","Capacidad":"24","Chofer":"GERMAN TRONCOSO","Nextel":"999999999","CelularPeru":"943200861","CelularEcuador":"No informaron","Termoregistro1":"COMPOSITAN 425982 PHR 483","Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"01/07/2013 09:00:00","FHDespaPuntoRecojo":"01/07/2013 00:00:00","FHLlegadaTumbes":"02/07/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"1","IdChofer":"6","IdCamionChofer":"15","Grower":"CORINOR / COMPOSITAN"}]}
So, the rows 4 and 5 don't show date fields FHDespaPuntoRecojo, and FHLlegadaTumbes, but in firefox and i.e. they are showed. Besides the other rows the data is showed normally.
So, what can i do to fix this on chrome. Any idea?
Thank you in advance...
I assume that you are using a local store to fill the grid. Make sure that the date-fields are correctly configured in your store, like so:
fields: [
'someField',
'someOtherField,
{
name: 'someDateField',
type: 'date',
dateFormat: 'Y-m-d'
},
...
]