Can we use Gregorian dates together with a Georgian to Persian date converter script to show Persian dates in Highchart
and Highstock
?
Update for 2 first answer
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/persiandate@0.2.1/dist/persiandate.min.js"></script>
<div id="container" style="height: 400px"></div>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
var someDate = new Date(this.value);
return persianDate(someDate).format('YYYY-MMMM-D');
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}]
});```
I developed a Jalali Date library, JDate, that is compatible with original javascript Date
class. Dates in highchart/highstock charts can be converted to Jalali by replacing window.Date
with JDate
. With this method all date outputs is converted to jalali calendar, And also, date input features (like YTD feature, or range selector) works with jalali calendar.
Demo: https://tahajahangir.github.io/jdate/jalali-highcharts-demo.html
The main part of script in above demo, is:
<script src="//raw.githack.com/tahajahangir/jdate/master/jdate.min.js"></script>
<script>
window.Date = JDate;
Highcharts.setOptions({
lang: {
months: ['فروردين', 'ارديبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
shortMonths: ['فروردين', 'ارديبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
weekdays: ["یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنجشنبه", "جمعه", "شنبه"]
}
});
</script>
I borrowed this js script and tried it out here. Not sure if that is what you are after though.
You can use it babakhani persian date js for example:
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
var date = new Date(this.value);
var pdate = persianDate(date);
return (pdate.pDate.year - 1300) + "/" + pdate.pDate.month;
}
}
}
Then better way to override date formating is to use Highcharts.dateFormats
(and persianDate library), This allows conversion of all dates (not x or y axis) to Persian calendar.
Sample: http://jsfiddle.net/smpaB/1/
Add pesianDate library with:
<script src="http://rawgithub.com/babakhani/PersianDate/master/dist/persian-date.min.js"></script>
And configure highcharts with:
Highcharts.dateFormats = {
'a': function(ts){return new persianDate(ts).format('ffffdd')},
'A': function(ts){return new persianDate(ts).format('ffffdd')},
'd': function(ts){return new persianDate(ts).format('DD')},
'e': function(ts){return new persianDate(ts).format('D')},
'b': function(ts){return new persianDate(ts).format('MMMM')},
'B': function(ts){return new persianDate(ts).format('MMMM')},
'm': function(ts){return new persianDate(ts).format('MM')},
'y': function(ts){return new persianDate(ts).format('YY')},
'Y': function(ts){return new persianDate(ts).format('YYYY')},
'W': function(ts){return new persianDate(ts).format('ww')}
};