We Keep Coding

ChartJS showing wrong dataset following visibility property toggle

In my project I have I have ten graphs in a table with each graph showing two datasets.
I want to toggle the visibility of each dataset by clicking it which is default behaviour in ChartJS.
All the charts are held in an array and following the built in toggle method of ChartJS, every chart is updated to the dataset of the first chart. So to be clear, when the page loads, each chart is shown correctly, but if I made the dataset invisible and visible again, it becomes visible but with the wrong data.
I tried writing my own update function to toggle the visibility.
var option = {
legend: {
onClick: ToggleDatasetVisibility,
}}
and then
function ToggleDatasetVisibility() {
this.chart.getDatasetMeta(1).hidden = !this.chart.getDatasetMeta(1).hidden;
// this.chart.update();
}
However exactly the same thing happens. After the update,
*Note, I'm only toggling the second dataset of each DatasetMeta so that's why the 1 is hardcoded in this example. That's not the chart in question.
In case it's useful, we is the code when the charts are primed with data when the page loads and here the update shows the correct data.
for (var i = 0; i < 10; i++) {
var MyArray= await fetch("http://localhost:1234/Demo/FetchResults?model_id=" + i);
//Add the recorded tunnel data to dataset 0
LineChartArray[i].data.datasets[0].data = ResultsArray;
LineChartArray[i].data.datasets[0].label = '';
LineChartArray[i].data.datasets[1].data = MyArray;
LineChartArray[i].data.datasets[1].label = 'LabelXYZ';
LineChartArray[i].update(); //This update updates the graph with the correct data.
}
}

So, I don't know if there's a bug with chart JS or a correct determine which chart to update but I discovered that the render method works. This updates the chart following the visibility toggle loads the correct data back in when made visible. I thought it might be my use of the 'this' command but it works fine with the render method.
I just updated the toggle function like so,
function ToggleDatasetVisibility() {
this.chart.getDatasetMeta(1).hidden = !this.chart.getDatasetMeta(1).hidden;
this.chart.render();
}

Access Selected Date from dynamically created Calendar Control asp/javascript/VB.net

UPDATE: To anyone who still may read this, I used a completely different way of doing this. With AjaxToolkit's Calendar Extender, I was able to easily add a calendar dynamically and use Javascript to change the format of different date inputs so that calendar extender could read it. Highly recommend you go the AjaxToolkit route if you are trying to do something similar to me.
I have dynamically created a Calendar control(asp:Calendar), Buttons, and dropdown lists for a Comment Class. The Comment Class will always have a textbox in it, but if the ID/attribute label of the textbox is DOB or birthday or something similar, these other controls get dynamically created.
So far, the calendar, dropdown lists, and one of the buttons works, but I am have trouble with the last button. Currently, I dynamically add a script that is used for one of the buttons to show and hide the div that contains that Calendar, dropdown lists, and relevant buttons, which works amazingly. I am trying to add another script trigger on a button press to take the selected date from the Calendar and put it in the textbox.
Right now, I am just trying to get access to the Calendar. I am using code that looks like this:
function use_calendarDate(){
var calendarDate = '<%=question128_Cal1.SelectedDate%>';
alert(calendarDate);
}
I found this function in another question similar to this, but instead of getting the date, it just puts <%=question128_Cal1.SelectedDate%> as a string into the alert box.
This LINK shows exactly what I am trying to do, but I get a different result. Can anyone help me with what I am doing wrong here?
Interestingly, when I use
var calendarDate = question128_Cal1.SelectedDate;
OR
var calendarDate = question128_Cal1.value;
My alert box tells me undefined.
Thanks in advance.
In case it is needed, my calendar control is created like this:
In Page_Init
Dim calendar1 As New Calendar
Call BuildCalendar(calendar1)
calendarDiv.Controls.Add(calendar1)
Here is the function referenced above.
Private Sub BuildCalendar(ByRef calendar1 As Calendar)
calendar1.ID = "Cal1"
calendar1.SelectedDate = DateTime.Today
calendar1.Attributes.Add("runat", "server")
calendar1.Attributes.Add("OnClientDateChanged", "onDateChange")
calendar1.Attributes.Add("borderwidth", "2px")
calendar1.Attributes.Add("BackColor", "White")
calendar1.Attributes.Add("width", "200px")
calendar1.Attributes.Add("ForeColor", "Black")
calendar1.Attributes.Add("Height", "180px")
calendar1.Attributes.Add("Font-Size", "8pt")
calendar1.Attributes.Add("Font-Names", "Verdana")
calendar1.Attributes.Add("BorderColor", "#999999")
calendar1.Attributes.Add("BorderStyle", "Outset")
calendar1.Attributes.Add("DayNameFormat", "FirstLetter")
calendar1.Attributes.Add("CellPadding", "4")
calendar1.Attributes.Add("ShowNextPrevMonth", "True")
calendar1.Attributes.Add("SelectionMode", "Day")
calendar1.Attributes.Add("ShowTitle", "false")
calendar1.Attributes.Add("OnSelectionChanged", "Calendar_SelectionChanged")
calendar1.TodayDayStyle.ForeColor = Drawing.Color.Black
calendar1.Attributes.Add("todaydaystyle-backcolor", "#cccccc")
calendar1.Attributes.Add("selectorstyle-backcolor", "#cccccc")
calendar1.NextPrevStyle.VerticalAlign = VerticalAlign.Bottom
calendar1.Attributes.Add("dayheaderstyle-font-size", "7pt")
calendar1.Attributes.Add("dayheaderstyle-font-bold", "true")
calendar1.Attributes.Add("dayheaderstyle-backcolor", "#cccccc")
calendar1.Attributes.Add("selecteddaystyle-font-bold", "true")
calendar1.Attributes.Add("selecteddaystyle-forecolor", "White")
calendar1.Attributes.Add("selecteddaystyle-backcolor", "#666666")
calendar1.Attributes.Add("titlestyle-font-bold", "true")
calendar1.TitleStyle.BorderColor = Drawing.Color.Black
calendar1.Attributes.Add("titlestyle-backcolor", "#999999")
calendar1.Attributes.Add("weekenddaystyle-backcolor", "#ffffcc")
calendar1.OtherMonthDayStyle.BackColor = Drawing.Color.Gray
End Sub

Is it question128_Cal1 or question128_Calendar1 ? Your function use_calendarDate() refers to the first. Typo ?
Interestingly, when I use
var calendarDate = question128_Calendar1.SelectedDate;
OR
var calendarDate = question128_Calendar1.value;
My alert box tells me undefined.
That's because the client script has no knowledge of what 'question128_Calendar1' is. That is a server-side ID.
Is there a reason why you can't use markup to define the calendar instead that rather large 'BuildCalendar' function? You're making a bit of a maintenance nightmare by doing that, IMO.

Displaying dirty cell triangle on grid when changing datasource manually

I have a kendo grid with custom popup edit window to imitate popup edit, but with batch edit. Everything works fine, but I am experiencing a small issue. Whenever value is changed, the grid cell does not have that red triangle thingy in the corner indicating that this particular value different from original.
As I understand in this post, manually made changes in datasource does not appear on the grid, so I have to add them manually.
This post 'manually maintain dirty cell marker on paging in Kendo grid' gives an idea how to get it working. I could attach some listeners to kendoWindow inputs, track what fields are being edited, compare old and new values...
But is there a less painful way to achieve this functionality? Maybe there is some built in kendo function to achieve that?
Here's a small working example http://dojo.telerik.com/aSaXe/4

The red "dirty" marks appear automatically only when the built-in in-cell editing is used. From this point of view, your scenario requires these to be added manually after the custom editing popup is closed.
You may find the change event of the data item useful in the task. It will be fired each time a value in the popup is changed and the respective textbox is blurred.
var uid = $(e.target).parents('tr').attr('data-uid');
var grid = $('#grid').data("kendoGrid");
var dataItem = grid.dataSource.getByUid(uid);
dataItem.bind("change", function(args) {
// args.field
});
Finally, keep in mind that each change in the Grid dataSource causes the whole table to be redrawn (unless the built-in in-cell editing is used), so you will lose any previously applied custom styling.

You can use the save event on your kendo grid as:
save: function (e) {
addDirtyUid(e.model.uid);
setTimeout(refreshVisualDirtyElements, 100);
}
Other functions and var:
var dirtyIds = [];
function addDirtyUid(currentUid) {
if (dirtyIds.indexOf(currentUid) === -1) {
dirtyIds.push(currentUid);
}
}
function refreshVisualDirtyElements() {
for (var i = 0; i < dirtyIds.length; i++) {
var thisUid = dirtyIds[i];
$("tr[data-uid='" + thisUid + "']").find("td:eq(0)").addClass("k-dirty-cell");
$("tr[data-uid='" + thisUid + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>');
}
}

David Lynch's Maphilight - Highlight All

Hello and good day to everyone.
I wanna ask if there is a way for me to highlight every area of a map.
This is the scenario... There's a US map and there's a reset button. All the states' names are covered, meaning that every area is already highlighted. Clicking on one of them 'dehighlights' them, revealing their name.
Those things are already functioning properly. However, I am having trouble with the reset button.
Basically, I want the reset button to cover every names again, excluding the still covered ones (because, well, they're not clicked/revealed yet).
Google isn't being helpful for me on this issue, and the Maphilight documentation on the site...isn't really well-documented.
I hope someone can help me on this one. Thanks~

Never mind~ I figured it out! :D
I inserted this code inside [$.fn.maphilight = function(opts)]'s [return this.each(function()]
reset_hilight = function() {
var mapCount = document.getElementsByTagName("area").length;
var i = 1;
while (i <= mapCount) {
var AllAreas = $('#hlight' + i).data('maphilight') || {};
AllAreas.alwaysOn = true;
$('#hlight' + i).data('maphilight', AllAreas).trigger('alwaysOn.maphilight');
i++;
}
}
So now, whenever I click the reset button, all the areas will be highlited once again. :D

amCharts pie chart how to customize the balloon text

I am using amCharts pie chart (v3) and I want to customize the pop up balloon that comes on mouseover on a slice: in addition to routine text like [[value]] [[percent]],
(a) a text that depends on the data item, and
(b) provide different click options to the user depending on data item. Every data row might not have these possibilities in which case the options should not appear.
For example, the pie chart might show wine consumption by country. On hover, I want to provide the user two different click options - one to see consumption by season if available, plus another to see consumption by age group if available.
Is it possible to do so in amCharts? I saw an exit for event clickSlice() here http://docs.amcharts.com/3/javascriptcharts/AmPieChart but nothing on how to modify the balloon text on the fly and add behavior to the balloon that comes on hover.
Will greatly appreciate your help.

For writing dynamic text in the balloon you can also do the folowing:
"graphs": [{
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
if (value < 500) {
return value + "<br>(Little)";
} else {
return value + "<br>(A Lot)";
}
}
}],

You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. says the documentation.
I have used description for a custom field, it works fine.

You can add any custom field to your data provider and then display it in your balloon in the same way as value:
{value:15, title:"slice title", someCustomField:"some custom data"}
and then:
chart.balloonText = "[[someCustomField]]";