ScatterPlot Point Click Event Not Working - highcharts

Attempting to assign a click event to a scatter plot point through Highcharts.net wrapper. The event appears in the javascript output but never fires when a point is clicked. The chart renders well, it is interactive, zooms, hovers, etc. Everything works except the click event. I have tried the click event in both the PlotOptionsSeries location and in the ScatterSeries location.
var chartOptions = new Highsoft.Web.Mvc.Charts.Highcharts
{
Chart = new Highsoft.Web.Mvc.Charts.Chart
{
SpacingTop = 20,
SpacingBottom = 20,
SpacingLeft = 20,
SpacingRight = 20,
ZoomType = Highsoft.Web.Mvc.Charts.ChartZoomType.Xy
},
XAxis = new List<Highsoft.Web.Mvc.Charts.XAxis>
{
new Highsoft.Web.Mvc.Charts.XAxis
{ Max = 150, Min = -150,GridLineWidth = 1, TickInterval = 50,
PlotLines = new List<Highsoft.Web.Mvc.Charts.XAxisPlotLines> { new Highsoft.Web.Mvc.Charts.XAxisPlotLines { Value = 0, Width = 2, ZIndex = 5 } }
}
},
YAxis = new List<Highsoft.Web.Mvc.Charts.YAxis>
{
new Highsoft.Web.Mvc.Charts.YAxis
{
Title = new Highsoft.Web.Mvc.Charts.YAxisTitle { Text = "" },
Max = 150, Min = -150, GridLineWidth = 1, TickInterval = 50,
PlotLines = new List<Highsoft.Web.Mvc.Charts.YAxisPlotLines> { new Highsoft.Web.Mvc.Charts.YAxisPlotLines { Value = 0, Width = 2, ZIndex = 5 } }
}
},
PlotOptions = new Highsoft.Web.Mvc.Charts.PlotOptions
{
Series = new Highsoft.Web.Mvc.Charts.PlotOptionsSeries
{
AllowPointSelect = true,
},
Scatter = new Highsoft.Web.Mvc.Charts.PlotOptionsScatter
{
Marker = new Highsoft.Web.Mvc.Charts.PlotOptionsScatterMarker
{
Radius = 5,
States = new Highsoft.Web.Mvc.Charts.PlotOptionsScatterMarkerStates
{
Hover = new Highsoft.Web.Mvc.Charts.PlotOptionsScatterMarkerStatesHover
{
Enabled = true,
LineColor = "rgb(100,100,100)"
}
}
},
States = new Highsoft.Web.Mvc.Charts.PlotOptionsScatterStates
{
Hover = new Highsoft.Web.Mvc.Charts.PlotOptionsScatterStatesHover
{ }
}
}
},
Series = new List<Highsoft.Web.Mvc.Charts.Series>
{
new Highsoft.Web.Mvc.Charts.ScatterSeries
{
Name = "Dots",
Color = "rgba(223, 83, 83, .5)",
Data = pts3, // Here we put the dbase data into the chart
ZIndex = 6,
Events = new Highsoft.Web.Mvc.Charts.ScatterSeriesEvents
{
Click = "function () {alert('Clicked');console.log('Clicked');}"
},
Tooltip = new Highsoft.Web.Mvc.Charts.ScatterSeriesTooltip
{
HeaderFormat = "",
PointFormat = "<h5>{point.name}<br /></h5>"+"<b>Love It:</b>{point.x} " +
"<b>Challenge:</b>{point.y}",
FooterFormat = "",
FollowPointer = true
}
}
}
};
chartOptions.ID = "teachaggchart";
var renderer = new Highsoft.Web.Mvc.Charts.Rendering.HighchartsRenderer(chartOptions);

It seems that you have found a bug in the wrapper.
I already reported it and it is fixed in new version (8.0.0.2) which should be available now.
How to get the newest version you can find here: http://dotnet.highcharts.com/Highcharts/Demo/Docs?section=UpgradeToStandard
Let me know whether it works in the new version.

Related

Capturing touch events (touchstart and touchmove) in addition to mousemove for synchronising highcharts

I have been building a basic webpage which displays data from a weather station with multiple synchronised highcharts, with the help of others here and here I have been able to implement a fully working version for mouse based systems (windows etc), how do I adapt the code below to also capture the touchstart and touchmove events:
//catch mousemove event and have all charts' crosshairs move along indicated values on x axis
function syncronizeCrossHairs(chart) {
var container = $(chart.container),
offset = container.offset(),
x;
container.mousemove(function(evt) {
x = evt.clientX - chart.plotLeft - offset.left;
//remove old plot line and draw new plot line (crosshair) for this chart
var xAxis1 = chart1.xAxis[0],
points = [],
points1 = [],
points2 = [],
points3 = [],
points4 = [],
e = chart1.pointer.normalize(evt); // Find coordinates within the chart
chart1.series.forEach(s => {
var point = s.searchPoint(e, true)
if (point) {
point.setState();
points.push(point)
}
})
if (points) {
var number = 0;
Highcharts.each(points, function(p, i) {
if (!p.series.visible) {
points.splice(i - number, 1);
number++;
}
})
if (points.length) {
chart1.tooltip.refresh(points); // Show the tooltip
}
}
xAxis1.removePlotLine("myPlotLineId");
xAxis1.addPlotLine({
value: chart.xAxis[0].translate(x, true),
width: 1,
id: "myPlotLineId"
});
/*----- second chart ------*/
var xAxis2 = chart2.xAxis[0];
chart2.series.forEach(s => {
var point = s.searchPoint(e, true)
if (point) {
point.setState();
points1.push(point)
}
})
if (points1[0]) {
var number = 0;
Highcharts.each(points1, function(p, i) {
if (!p.series.visible) {
points1.splice(i - number, 1);
number++;
}
})
if (points1.length) {
chart2.tooltip.refresh(points1); // Show the tooltip
}
}
xAxis2.removePlotLine("myPlotLineId");
xAxis2.addPlotLine({
value: chart.xAxis[0].translate(x, true),
width: 1,
id: "myPlotLineId"
});
/*----- third chart ------*/
var xAxis3 = chart3.xAxis[0];
chart3.series.forEach(s => {
var point = s.searchPoint(e, true)
if (point) {
point.setState();
points2.push(point)
}
})
if (points2[0]) {
var number = 0;
Highcharts.each(points1, function(p, i) {
if (!p.series.visible) {
points2.splice(i - number, 1);
number++;
}
})
if (points2.length) {
chart3.tooltip.refresh(points2); // Show the tooltip
}
}
xAxis3.removePlotLine("myPlotLineId");
xAxis3.addPlotLine({
value: chart.xAxis[0].translate(x, true),
width: 1,
id: "myPlotLineId"
});
//if you have other charts that need to be syncronized - update their crosshair (plot line) in the same way in this function.
});
}
Thanks
Base on this example from official Highcharts demo base https://www.highcharts.com/demo/synchronized-charts I was able to wrap similar pattern to your code.
Demo: http://jsfiddle.net/BlackLabel/mnLzbe1s/
['mousemove', 'touchmove', 'touchstart'].forEach(function(eventType) {
var container = $(chart.container),
offset = container.offset(),
x;
container[0].addEventListener(eventType,
(function(evt) {
x = evt.clientX - chart.plotLeft - offset.left;
//remove old plot line and draw new plot line (crosshair) for this chart
var xAxis1 = chart1.xAxis[0],
points = [],
points1 = [],
points2 = [],
points3 = [],
e = chart1.pointer.normalize(evt); // Find coordinates within the chart
...
})
)
})

Customizing Chart.js tool tips

<script>
var passings = [["New York","5001","05/18 00:36","S 28 MPH"], ["Phili","5002","05/18 01:36","S 50 MPH"], ["Richmond","5003","05/18 02:36","S 40 MPH"], ["Wilson","5004","05/18 03:36","S 30 MPH"],
["Savannah","5005","05/18 04:36","S 29 MPH"], ["Miami","5006","05/18 05:36","S 40 MPH"]]
leftK1 = ["20","30","50","20","30","40"]
var labelL1 = "Rain %";
var ctx = document.getElementById("myChart").getContext("2d");
var canvasWidth = 600;
ctx.canvas.width = canvasWidth;
ctx.canvas.height = 700;
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.defaultFontFamily = "Lato, sans-serif";
var chartData = null;
var chartOptions = null;
var chartDataSets = [ {
label : labelL1,
fill : false,
data : leftK1,
borderColor : 'rgb(255, 99, 132)'
} ];
chartData = {
labels : passings,
datasets : chartDataSets
}
chartOptions = {
responsive : true,
maintainAspectRatio : false,
elements : {
line : {
tension : 0, // disables bezier curves
}
},
animation : {
},
legend : {
display : true,
position : 'top',
labels : {
fontColor : 'rgb(255, 99, 132)'
}
},
title : {
display : true,
text : 'Passings Chart'
},
scales : {
yAxes : [ {
ticks : {
max : 80,
min : 0
},
gridLines : {
zeroLineWidth : 5
},
scaleLabel : {
display : true,
labelString : "Rain Percantage",
fontFamily : "Lato, sans-serif",
fontSize : 18
}
} ],
xAxes : [ {
ticks : {
autoSkip : false,
maxTicksLimit : 15,
maxRotation : 0,
minRotation : 0,
fontFamily : "Lato, sans-serif",
fontSize : 12
}
} ]
}
// end scales
}
window.myChart = new Chart(ctx, {
type : 'line',
data : chartData,
options : chartOptions
});
</script>
<h:form id="ChartForm">
<div >
<canvas id="myChart" ></canvas>
</div>
</h:form>
enter image description hereI have passed Labels as an array to the chart (Chart.js version 2.7) so that I have multiple rows of X-Axis Labels. While displaying as tool tip, it is displaying whole array for each tool tip. I have seen several postings where they gave ways to display values from legend and and customizing Y-axis data.
Is there a way to display a short form of Label (X-axis label) as tooltip ?
You can use Callbacks as it is mentioned in Chart.js Documentatoin
You can even customize your tooltips for example:
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
tooltips: {
// Disable the on-canvas tooltip
enabled: false,
custom: function(tooltipModel) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
// Create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = "<table></table>";
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltipModel.yAlign) {
tooltipEl.classList.add(tooltipModel.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltipModel.body) {
var titleLines = tooltipModel.title || [];
var bodyLines = tooltipModel.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
var colors = tooltipModel.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<span style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
// `this` will be the overall tooltip
var position = this._chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
}
}
}
});
See the Samples
and more

Clearing Stage of as2 Photo Gallery

I'm building a website with several pages on different layers/frames in the timeline. On the "photos" layer, I wrote some code to a load a photo gallery. The problem is that the gallery doesn't disappear when I click on another page and keeps lingering over all the other content. Here is my code. Thanks in advance for any help you can give.
import mx.transitions.Tween;
import mx.transitions.easing.*;
this.createEmptyMovieClip("container",1);
var imagesNumber:Number = 9;
var scrolling:Boolean = true;
for (i=1; i<=imagesNumber; i++) {
container.attachMovie("thumb"+i,"thumb"+i+"_mc",i);
myThumb_mc = container["thumb"+i+"_mc"];
myThumb_mc._x = (i-1)*myThumb_mc._width;
myThumb_mc._y = (Stage.height-myThumb_mc._height)/2;
myThumb_mc._alpha = 50;
myThumb_mc.largerImage = i;
myThumb_mc.onRollOver = function() {
this._alpha = 100;
};
myThumb_mc.onRollOut = function() {
this._alpha = 50;
};
myThumb_mc.onRelease = function() {
this._alpha=50;
for (i=1; i<=imagesNumber; i++) {
var myClip = container["thumb"+i+"_mc"];
myClip.enabled = false;
}
scrolling = false;
_root.attachMovie("image"+this.largerImage,"large_mc",2);
large_mc._x = (Stage.width-large_mc._width)/2;
large_mc._y = (Stage.height-large_mc._height)/2;
new Tween(large_mc, "_alpha", Strong.easeOut, 0, 100, 0.5, true);
new Tween(container, "_alpha", Strong.easeOut, 100, 50, 0.5, true);
large_mc.onRelease = function() {
this.enabled=false;
scrolling = true;
var myFadeOut = new Tween(large_mc, "_alpha", Strong.easeOut, 100, 0, 0.5, true);
new Tween(container, "_alpha", Strong.easeOut, 50, 100, 0.5, true);
myFadeOut.onMotionFinished = function() {
for (i=1; i<=imagesNumber; i++) {
var myClip = container["thumb"+i+"_mc"];
myClip.enabled = true;
}
large_mc.removeMovieClip();
};
};
};
}
container.onEnterFrame = function() {
if (scrolling) {
this._x += Math.cos((-_root._xmouse/Stage.width)*Math.PI)*15;
if (this._x>0) {
this._x = 0;
}
if (-this._x>(this._width-Stage.width)) {
this._x = -(this._width-Stage.width);
}
}
};

Change colors in devexpress charts

I am drawing a pie chart using Devexpress in my MVC project.
While doing it by default my chart generated with three colors, as below
but my client is not satisfied, with the colors of it and wanted me to change them which match with our application background, so please help me, how to do this.
Thanks in advance.
Here is my code.
settings.Name = "chart";
settings.Width = 600;
settings.Height = 250;
settings.BorderOptions.Visible = false;
Series series1 = new Series("Type", DevExpress.XtraCharts.ViewType.Pie3D);
settings.Series.Add(series1);
series1.ArgumentScaleType = ScaleType.Qualitative;
series1.ArgumentDataMember = "ClassName";
series1.ValueScaleType = ScaleType.Numerical;
series1.ValueDataMembers.AddRange(new string[] { "PercentageValues" });
series1.LegendPointOptions.PointView = PointView.ArgumentAndValues;
series1.LegendPointOptions.ValueNumericOptions.Format = NumericFormat.Percent;
series1.LegendPointOptions.ValueNumericOptions.Precision = 0;
series1.Label.ResolveOverlappingMode = ResolveOverlappingMode.Default;
series1.Label.Visible = false;
Please refer the following code. I have successfully implemented the same for giving custom color for rangebar. I guess it will work for your case also
settings.CustomDrawSeriesPoint = (s, ev) =>
{
BarDrawOptions drawOptions = ev.SeriesDrawOptions as BarDrawOptions;
if (drawOptions == null)
return;
Color colorInTarget = Color.Blue;
double x = ev.SeriesPoint.Values[0];
double y = ev.SeriesPoint.Values[1];
if (x == 0)
{ //Do starting
colorInTarget = Color.FromArgb(159,125, 189);
}
else{
//Red - price Increase
// Green price Decrease
if (y > previousYValue)
{
colorInTarget = Color.Red; ;
}
else
{
colorInTarget = Color.Green;
}
}
previousYValue = y;
drawOptions.Color = colorInTarget;
drawOptions.FillStyle.FillMode = FillMode.Solid;
drawOptions.Border.Color = Color.Transparent;
};
you can set the theme and palette properties of the chart control. follow the links below to devexpress documentation. although the examples refers to winform application they are still avaliable in asp.net mvc controls.
http://documentation.devexpress.com/#WindowsForms/CustomDocument7433
http://documentation.devexpress.com/#WindowsForms/CustomDocument5538
// Define the chart's appearance and palette.
barChart.AppearanceName = "Dark";
barChart.PaletteName = "Opulent";
private List<StudentClass.ChartsPointsSummary> GetStudentSummaryResults()
{
var StudentId = Convert.ToInt32(Request.Params["StudentID"]);
var StudentDetailsP = CtxSM.SMISGet_StudentAttendanceDetailsByStudentId(StudentId, SessionDataManager.SessionData.LoginUserId, SessionDataManager.SessionData.AcademicYearID, SessionDataManager.SessionData.BusinessUnitId, ref outError).ToList();
var Presents = StudentDetailsP.Select(p => new { p.Months, p.Presents});
var CountsP = StudentDetailsP.Count();
List<StudentClass.ChartsPointsSummary> MT = new List<StudentClass.ChartsPointsSummary>();
foreach (var ab in Presents)
{
MT.Add(new StudentClass.ChartsPointsSummary { PresentSummaryX = ab.Months, PresentSummaryY = Convert.ToInt32(ab.Presents) });
}
var StudentDetailsA = CtxSM.SMISGet_StudentAttendanceDetailsByStudentId(StudentId, SessionDataManager.SessionData.LoginUserId, SessionDataManager.SessionData.AcademicYearID, SessionDataManager.SessionData.BusinessUnitId, ref outError).ToList();
var Absents = StudentDetailsP.Select(p => new { p.Months, p.Absents });
var CountsA = StudentDetailsA.Count();
foreach (var ab in Absents)
{
MT.Add(new StudentClass.ChartsPointsSummary { AbsentSummaryX = ab.Months, AbsentSummaryY = Convert.ToInt32(ab.Absents) });
}
var StudentDetailsL = CtxSM.SMISGet_StudentAttendanceDetailsByStudentId(StudentId, SessionDataManager.SessionData.LoginUserId, SessionDataManager.SessionData.AcademicYearID, SessionDataManager.SessionData.BusinessUnitId, ref outError).ToList();
var CountL = StudentDetailsL.Count();
var Leaves = StudentDetailsP.Select(p => new { p.Months, p.Leaves });
foreach (var ab in Leaves)
{
MT.Add(new StudentClass.ChartsPointsSummary { LeaveSummaryX = ab.Months, LeaveSummaryY = Convert.ToInt32(ab.Leaves) });
}
return MT;
}
#Html.DevExpress().Chart(settings =>
{
settings.Name = "SummaryDetailsById";
settings.Width = 1032;
settings.Height = 250;
Series chartSeries = new Series("Presents", DevExpress.XtraCharts.ViewType.Bar);
chartSeries.ArgumentDataMember = "PresentSummaryX";
chartSeries.ValueDataMembers[0] = "PresentSummaryY";
settings.Series.Add(chartSeries);
Series chartSeries2 = new Series("Absents", DevExpress.XtraCharts.ViewType.Bar);
chartSeries2.ArgumentDataMember = "AbsentSummaryX";
chartSeries2.ValueDataMembers[0] = "AbsentSummaryY";
settings.Series.Add(chartSeries2);
Series chartSeries3 = new Series("Leaves", DevExpress.XtraCharts.ViewType.Bar);
chartSeries3.ArgumentDataMember = "LeaveSummaryX";
chartSeries3.ValueDataMembers[0] = "LeaveSummaryY";
settings.Series.Add(chartSeries3);
settings.CrosshairEnabled = DefaultBoolean.Default;
settings.BackColor = System.Drawing.Color.Transparent;
settings.BorderOptions.Visibility = DefaultBoolean.True;
settings.Titles.Add(new ChartTitle()
{
Text = "Student Attendance Summary"
});
XYDiagram diagram = ((XYDiagram)settings.Diagram);
diagram.AxisX.Label.Angle = -30;
diagram.AxisY.Interlaced = true;
}).Bind(Model).GetHtml()

how to get the series name, id and title value dynamically from highcharts?

JSFiddle Link for the charts
if (chart.length == 3) {
for ( var i = 0; i < chart.length; i++) {
chart[i].renderer
.image('http://highcharts.com/demo/gfx/sun.png',chart[i].chartWidth - 40, 5, 20, 20)
.add()
.css({'cursor' : 'pointer'})
.attr({'title' : 'Charts'})
.on('click', function() {
alert("hi");console.log(chart[i]);
//var chartValue = $('#'+id).highcharts();
//var series = chartValue.series[1];
//console.log(series.name + "...hi" +series.title);
});
}
}
How can we get the charts details on click event?

Resources