Please tell me where did I go wrong.
My line chart looks like this:
Current hAxis format: HH (24-hr)
Goal: HH:MM, like so:
I've found possible answers here(Google line chart configuration), but only the title worked :(
hAxis: {
title: 'MY OWN LABEL GOES HERE',
gridlines: {
units: {hours: {format: ['HH:mm']}}
}
Note: I am getting the chart using google analytics API
try hAxis.format...
hAxis: {
format: 'HH:mm',
title: 'MY OWN LABEL GOES HERE'
}
Related
I'm using fullcalendar to display a month view which shows the time and title of events (and a popover showing the description when hovered). When I click the event, I show a listday view that shows all the events for that day. That all works fine and I have this working with this code:
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
start: 'dayGridMonth,listDay',
center: 'title',
end: 'prev,next'
},
initialView: 'dayGridMonth',
initialDate: '2023-01-12',
height: 'auto',
dayMaxEvents: 3,
moreLinkClick: 'listDay',
eventClick: function(info){
switchToListView(info)
},
eventColor: 'green',
views: {
listDay: {
displayEventEnd: true
}
},
events: [
{
title: 'All Day Event',
start: '2023-01-01'
},
{
title: 'Meeting',
description: 'My Description',
start: '2023-01-12T10:30:00',
end: '2023-01-12T12:30:00'
},
and in this code pen
I'd like to show the description text for the event in addition to the title in the listday view and I can't figure out how to do this. I don't know whether I need to use an event hook or what. I just can't make my way through the docs and examples to see what to do.
Appreciate any help.
I got this working with this use of eventDidMount.
eventDidMount: function(info) {
info.el.querySelector('.fc-list-event-title a').innerHTML += ` ${info.event.extendedProps.description}`
},
Frankly, it feels a little weird that I need to go into the depths of the rendered HTML to adjust the output instead of changing what is going INTO the generated HTML but I guess that's just how it works (??)
Thanks to #ADyson for the push in the right direction.
Problem: the time in fullcalendar month view is displayed as 12h+am/pm. If you change the locale to spanish, it changes to H (without minutes)
I want to show it always, for all locales, as H:mm. In all the previous answers I found to this same question, the solution is use the option timeFormat: "H:mm", but it doesn't seem to work in fullcalendar v.4.2 (current). This is what I tried:
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
axisFormat: "H:mm",
timeFormat: "H:mm"
}
Here is a fiddle showing the problem: http://jsfiddle.net/mariavilaro/esxrb8mw/2/
Any tip for acomplishing this?
I just found the solution just before hitting the submit button. In fullcalendar v.4 the correct option for the time format is eventTimeFormat, so this would be the correct code for showing the time as H:mm:
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: false
}
I updated the fiddle.
I'm using FC 2.0 and was searching for an option to localize 'AM' 'PM' text on the axis, which is being set with the option:
axisFormat: 'h(:mm) A',
is there a way to overwrite these values like we do for monthNames, dayNames etc?
Thanks in advance!
Edit:
This is how I'm localizing some other elements of full calendar:
('#calendar-wrapper').fullCalendar({
header: {
left: 'agendaDay,agendaWeek,month, today',
center: 'prev,title,next',
right: 'publish_info'
},
titleFormat: {
month: 'MMM YYYY',
agendaDay: 'dddd, MMM D YYYY',
agendaWeek: 'MMM D, YYYY',
},
columnFormat: {
week: 'ddd D'
},
axisFormat: 'h(:mm) A',
buttonText: {
day: I18n.t('day_button'),
week: I18n.t('week_button'),
month: I18n.t('month_button'),
today: I18n.t('today')
},
lang: I18n.locale,
monthNames: I18n.t('date.month_names'),
monthNamesShort: I18n.t('date.abbr_month_names'),
dayNames: I18n.t('date.day_names'),
dayNamesShort: I18n.t('date.abbr_day_names'),
...
// rest of the code..
The I18n.t('day_button') will contain the day text for selected language.
Likewise I'd like to set something like I18n.t('am') and I18n.t('pm') to show the localized AM PM text on the axis.
Thanks
I needed to override moments i18n meridiem function.
moment.lang(I18n.locale, {
meridiem : function (hours, minutes, isLower) {
return hours < 12 ? I18n.t('date.am') : I18n.t('date.pm');
}
});
// I18n.locale is the current user's local
// and specified calendar locale to
// lang: I18n.locale
// date.pm, date.pm are placed in rails yaml files and will be loaded for selected language
Thanks
I'm trying to use a ObHighcharts bundle with symfony2.
Basically, it generates the following code:
$(function () {
var chart = new Highcharts.Chart({
chart: {"renderTo":"dailyChart","type":"spline"},
series: {"name":"My spline","data":
[
[1369519200,"2055.5"],
[1370469600,"1986.3"],
[1369087200,"1804.0"],
[1368655200,"1783.3"],
[1366840800,"1734.3"],
[1369000800,"1693.2"],
[1368309600,"1515.4"],
*lots of other similar data*
]
},
title: {"text":"My Chart"},
xAxis: {"title":{"type":"datetime","title":"Date"}},
yAxis: {"title":{"title":"Sugar, mg","min":0}}
});
});
But when I try rendering it, there's just a title, an export button and a blank screen. Console shows no signs of errors. What can be wrong here? Appreciate any input.
Because your data element is a string:
[
[1369519200,"2055.5"],
[1370469600,"1986.3"],
[1369087200,"1804.0"],
[1368655200,"1783.3"],
[1366840800,"1734.3"],
[1369000800,"1693.2"],
[1368309600,"1515.4"],
*lots of other similar data*
]
It should be something like [1369519200,2055.5].
You also need to enclose the series element in brackets:
series: [{"name":"My spline","data":
[
[1369519200,"2055.5"],
[1370469600,"1986.3"],
[1369087200,"1804.0"],
[1368655200,"1783.3"],
[1366840800,"1734.3"],
[1369000800,"1693.2"],
[1368309600,"1515.4"],
]}
]
Also, note that your time elements are not in ascending order. For a proper datetime axis you need to go in ascending time.
My name is Josh and I work for a community college newspaper. I've just recently found Highcharts and have been attempting to embed a interactive graph into a post for our website, rather unsuccessfully. Actually, it's been a complete failure.
I have already read over and attempted this post to no avail:
highcharts and wordpress
There's no one I know who I can take this problem to and even though I feel like I've tried every suggested solution, Unfortunately, I'm rather illiterate when it comes to html and code. Any help would be GREATLY appreciated.
I am working with Wordpress 3.5.1 Here is the point I am currently at:
I am running: Allow PHP in Posts and Pages Plugin & Interactive Javascript and CSS.
For the header option of the post I have:
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </script>
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js" type="text/javascript"></script>
In some of the websites (this one included), I've seen mention of uploading the Highcharts library onto your wordpress server. I've uploaded the highcharts.js file through the media library but I have a feeling that I am doing this incorrectly?
In the post itself I have placed:
[php]
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'State Funding of DSPS Services',
x: -20 //center
},
subtitle: {
text: 'Source:MPR Associates Report',
x: -20
},
xAxis: {
categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08',
'2008-09', '2009-10', '2010-11', '2011-2012', '2012-13']
},
yAxis: {
title: {
text: '$ Million'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' Million';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'College Total Funding',
data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7]
}]
});
});
});
[/php]
<div id="container" style="width: 100%; height: 400px"></div>
The page comes up blank, as it has been for the past hundred attempts or so. I apologize if this is post in the wrong spot or undesired. Any advice or solutions are greatly appreciated.
Thank you,
J
In order to get a chart rendered, you need several things to be in place:
Include the highcharts.js - done
Include some javascript which defines and creates a chart - done
Give highcharts a place to put the chart - ?
I think you may be missing the last element. This is done by including a tag inside your post somewhere. The div can be named using the 'id' property as follows:
<div id='container'>mydiv</div>
You have already told highcharts that you want to 'renderTo' a place called 'container', so this should be all you need.
To add this in wordpress, go into the post editor and make sure you are in 'html' mode. In my version of wordpress, this is a tab just to the top right of the post editing pane with the options 'visual' and 'html'.
In html mode, just add my div code in the place where you want the chart to appear. Hopefully that will do the trick.
there could be several reasons for the chart not showing up.
1)The scripts (jquery and highcharts) need to be loaded onto your page and this is not immediately obvious in wordpress. There's a couple of ways - if you aren't a coder then the simplest is to go to the header.php of your theme. (Appearance->Editor) and look for the header.php file on the right hand side. In the head section you'll need to register the highcharts library...
wp_register_script('myHighchartsHandle','highcharts/js/highstock.js',array('jquery'),'1.0a');
wp_enqueue_script('myHighchartsHandle');
The path to the high stock/highcharts library will change depending on where it is on your server of course.
2) The code is javascript - your supplied code has php tags. I think you could edit that to have js tags in the square brackets and install the 'Allow javascript in posts and pages' plugin. Note that plugin needs you to prefix any square brackets in code with a backslash so you'll need to do that to get the data series formatted properly.
3) It does look like you have a div container outside of your code which is good. But as the other answer suggest you will need that and the id has to match the renderTo in the code.
4) If it doesn't work after these 3 steps then you could be falling foul of jQuery noConflict.Wordpress sets jquery in this mode by default.
Instead of $ in your js code you may have to replace with jQuery. The highcharts library is ok in the code you've used.
Happy to help more if required. I have since built much of this into a plugin which is much cleaner...