I use Google Chart Calendar and I would like to get to know how to manipulate with the selected date. I can get selected 'row' and 'date' by using the listener for select:
google.visualization.events.addListener(chart, 'select', function() {
console.log(chart.getSelection()[0].date)
console.log(chart.getSelection()[0].row)
});
Here is official documentation.
How can I find the div with selected date by using the 'row'?
My goal is to manipulate it and add additional colors for following 5 days like this:
I also wanted to display tooltip after click which I did by cloning the current tooltip on hover but my intention is to get the selected div rather than row
each date on the calendar is represented by an svg <rect> element,
that has height and width attributes of 16
$('#chart_div rect[width="16"][height="16"]')
to find the selected element, calculate the day number of the year (1-366),
you can use the functions found in the following answer to calculate the day number...
calculate the day of the year (1 - 366)
then use jquery to get the element...
var selection = chart.getSelection();
if (selection.length > 0) {
var dayNumber = new Date(selection[0].date).getDOY();
var selectedRect = $('#chart_div rect[width="16"][height="16"]').get(dayNumber);
}
be sure to check the length of the selection,
the event is also fired when a selection is removed,
which will cause this to fail --> selection[0]
note: the chart probably won't let you change the style of the selected element,
because it will override any styles according to option --> calendar.focusedCellColor
but you can definitely change the 5 elements that follow the selected element,
using --> dayNumber + 1 -- etc...
Related
I've got an ECharts chart that has multiple line series and a scatter series that represents events. For the line series, we left the symbol at the default, but for the event scatter series we set the symbol to 'diamond'. These symbols show up on the chart & in the series legend as expected. However, the tooltip always shows a 10 pixel dot for the marker. The color however is picked up from the series (and even from the visualMap config!). My initial assumption had been that the symbol would also be picked up from the series. In our case we wanted to use a function for tooltip.formatter and even in that function we couldn't figure out how to access and swap in the series symbol for the marker. We ended up working around it by just custom styling our own html to plug in for the marker that matched the diamond symbol pretty well.
So the open questions are:
Is there a way to have the tooltip marker pick up the symbol from the series?
If not, is this a bug? I'm happy to put in an issue on the project but I don't want to do that until I understand a bit more.
Here's some code to illustrate what we had to do to get the diamond in there in case it helps the discussion or if others want to leverage this workaround:
formatTooltip(args){
let time = DateTime.fromISO(args[0].data[0], { zone: this.user.timeZone })
let tooltip = `<div><b>${time.toFormat(TOOLTIP_FORMAT)}</b></div>`
args.forEach(({ marker, seriesName, value }) => {
if (seriesName === 'Events'){
let myMarker = `<span style="display:inline-block;margin-right:4px;width:10px;height:10px;background:${value[4]};transform:rotate(45deg);"></span>`
tooltip += `<div>${myMarker} ${value[3] ? value[3]: ''}</div>`
} else {
value = value || [0, 0]
tooltip += `<div>${marker} ${seriesName}: ${value[1]}</div>`
}
})
return tooltip
},
I have a stacked bar chart that only ever has 5 categories(but the value of the categories change from year to year, it is a sliding 5 year window).
I have successful customised the bars to the colors I want.
But now I wish to make the label of each Category the same color as the customised bar color.
Is there a way to do this?
You can use custom code for this.
In Report Properties | Code, you can paste in the following code:
Private colourPalette As String() = {"#418CF0", "#FCB441", "#DF3A02", "#056492", "#BFBFBF", "#1A3B69", "#FFE382", "#129CDD", "#CA6B4B", "#005CDB", "#F3D288", "#506381", "#F1B9A8", "#E0830A", "#7893BE"}
Private count As Integer = 0
Private mapping As New System.Collections.Hashtable()
Public Function GetColour(ByVal groupingValue As String) As String
If mapping.ContainsKey(groupingValue) Then
Return mapping(groupingValue)
End If
Dim c As String = colourPalette(count Mod colourPalette.Length)
count = count + 1
mapping.Add(groupingValue, c)
Return c
End Function
This will give you the option of the pastel colour palette. If you want other colours, simply replace the hex colour codes with values of your choice.
To use this, simply use the following expression:
=Code.GetColour(Fields!Thingy.Value)
Use this on your series and your label fill expressions. This will ensure that the same colour appears for both. If you have multiple graphs with the same values in, this will also ensure that the same data series across multiple graphs always have the same colour.
I am using google charts for plotting a graph
How can I show annotation of the point at right-hand-side of the point but it showing on the top of point
http://i.stack.imgur.com/UHhQH.png
I want it like as follow
http://i.stack.imgur.com/lUBcq.png
Please any one help me out
You can actually change the position of the annotations, by using css tranform.
You should first get a handle to the anntation text, if you want to change all the text, then you can use the text tag name in css
text {
transform: translate(10px, 30px);
}
I was able to adjust annotations to the right by doing 2 things:
1) Entered some white spaces (\u00A0 is white space) and a long dash (—) on the left side of the desired annotation.
2) Added stem length of -3.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Model');
dataTable.addColumn('number', 'T');
dataTable.addColumn({type:'string', role:'annotation'});
dataTable.addRows([
['ABC',30,'\u00A0\u00A0\u00A0\u00A0 — X'],
['DEF',20,'\u00A0\u00A0\u00A0\u00A0 — Y'],
['GHI',10,'\u00A0\u00A0\u00A0\u00A0 — Z'],
]);
var options = {
1: {annotations: {stem: {length: -3}}
};
I want to add a simple bar to visually show a value between 0 and 1 in an HTML table cell. The Formatter option in Google Visualization API is only available for a DataTable and I cannot just inject it into an HTML table cell.
Should I just create a full bar chart for the single value and add it to the cell? Or is there a better solution/
Use a BarFormatter on the appropriate column of the DataTable. When drawing your Table visualization, you should see a bar in the cells of that column:
// use a BarFormatter on column 2 of the DataTable
var barFormatter = new google.visualization.BarFormat({base: 0, min: 0, max: 1});
barFormatter.format(data, 2);
There are 3 properties that I want to set for some VBA form comboboxes and I don't know if it's possible.
I don't want to let the combobox editable. Right now if the user types something in it that it submits the form it will send that value... I want to let him choose only from the values I added in the Combobox.
I want to make the list of items in the combobox scroll-able. Right now I'm able to scroll through the list if I use the scroll-bar but I don't know why I can't scroll with the mouse scroll.
And I want to jump to some item if I start typing. Let's say I have the months of the year in one combobox... if I start to type mar I want it to jump to march. I know that for the html forms this properties is by default but I don't know about VBA forms...
Thanks a lot
Of the behaviours you want, some are possible with settings on the Combo, others you will need to code
List of Months: Put a list of entries on a (hidden) sheet and name the range. Set .RowSource to that range
Match as you type: Set properties .MatchEntry = fmMatchEntryComplete and .MatchRequired = True
Reject non list entries: A Combo with these settings will allow you to type an invalid entry, but will reject it with an error message popup when you commit. If you want to silently reject invalid data as you type, you will need to code it.
If you want the selected value returned to a sheet, set .ControlSource to a cell address (preferable a named range)
By "...scroll with the mouse scroll..." I assume you mean the mouse wheel. Unfortunatley Forms don't support mouse wheel scroll. You will have to code it yourself. There is a Microsoft patch for this at here (not tried it myself yet)
Sample code to silently reject invalid entries
Private Sub cmbMonth_Change()
Static idx As Long
Dim Match As Boolean
Dim i As Long
If cmbMonth.Value = "" Then Exit Sub
If idx = 0 Then idx = 1
i = idx
Match = False
For i = 0 To cmbMonth.ListCount
If cmbMonth.List((i + idx - 1) Mod cmbMonth.ListCount) Like cmbMonth.Value & "*" Then
cmbMonth.ListIndex = (i + idx - 1) Mod cmbMonth.ListCount
Match = True
Exit For
End If
Next
If Not Match Then
cmbMonth.Value = Left(cmbMonth.Value, Len(cmbMonth.Value) - 1)
End If
End Sub
Set the propertie MatchEntry of combobox to 1 (fmMatchEntryComplete) and MatchRequired to true for example
combobox1.MatchEntry=1
combobox1.MatchRequired=True
[]'s