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.
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.
I'm trying to use the steps to display several steps in a wizard.
My wizard steps works, but I can't manage to have the current steps highlighted properly in the steps list.
I was able to replicate in a small stackblitz: https://stackblitz.com/edit/angular-ivy-eujcl2?file=src%2Fapp%2Fsteps%2Fstep-two%2Fstep-two.component.html
When I run my code, I got basically this:
But in their demo, the current step gets highlighted:
Any idea what is going on? The styles are imported, I to bind an "activeIndex", but when I move, the step doesn't.
Your routes are not matching with what you have defined app route file vs what you have listed in wizard.component.ts, i.e.
// Your routes
{ path: 'step-1', component: StepOneComponent },
{ path: 'step-2', component: StepTwoComponent }
// But your step routeLinks
{
label: 'Step 1',
routerLink: '/setup/mongDb',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: '/setup/auth-token',
},
Once they match, the highlight starts working.
this.items = [
{
label: 'Step 1',
routerLink: 'step-1',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: 'step-2'
},
];
Demo
from what I see in your code, you don't use the proper routes.
The buttons trigger step-1 and step-2 but your step component is declared with /setup/mongDb and /setup/auth-token so I think the PrimeNg component doesn't see that you are on the declared path. I didn't look at the source code but I think this could be it.
I am facing an issue with fullcalendar, I am trying to change the color of complete column of specific dates. I have tried this, but it's changing on only day cell color, I want to change complete column color of that specific date
dayRender: function (date, cell) {
var today = moment('2018-12-28T00:00Z');
if (date.isSame(today, "day")) {
cell.css("background", "#EEEEEE");
//cell.addClass('fc-selectable-false');
}
}
By rendering property for event object to "background",
something like this,
$('#calendar').fullCalendar({
defaultDate: '2018-11-10',
defaultView: 'agendaWeek',
events: [
{
start: '2018-12-10T10:00:00',
end: '2018-12-10T16:00:00',
rendering: 'background'
}
]
});
for more information please see fullcalendar documentation: https://fullcalendar.io/docs/background-events
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'
}
I'm wondering if it's possible to add custom formatting to redactor? I created a custom button, and I'm able to change the formatting of text, but only using certain elements:
['p', 'blockquote', 'pre', 'h3', 'h4', 'h5']
However, I'm not able to add any of the following:
['small', 'figcaption']
I followed the Redactor docs to set up the button, and here is my function that is being called:
var selected_html = $('#redactor_content').getSelected();
$('#redactor_content').execCommand('formatblock', '<small>');
I also tried adding elements to my 'formattingTags' array, but it didn't seem to have any affect.
formattingTags: ['p', 'blockquote', 'small', 'pre', 'h3', 'h4']
Thank you in advance.
I think I figured it out.
I added the following to my button function:
var $selected_html = $('#redactor_content').getSelected();
$('#redactor_content').execCommand('inserthtml', '<small>' + $selected_html + '</small>');
However, this is not perfect as it does not replace the parent tag, and you can keep adding elements within elements.
Something like that:
redactorOptionsDefaults = {
buttonsAdd: {},
activeButtonsAdd: {},
buttonsCustom: {}
};
redactorOptionsDefaults.buttonsCustom.small = {
title: 'small Header',
callback: function () {
this.formatBlocks('small');
}
}
redactorOptionsDefaults.activeButtonsAdd.small = 'small';
It formatting block, highlight button if needed while selecting block. But don't remove style while repeat button click