drawChart = () => {
let isFormatTooltip = this.FormatTooltip !== undefined || this.FormatTooltip !== null ? this.FormatTooltip : false;
let isHtmlTooltip = this.IsHtmlTooltip !== undefined || this.IsHtmlTooltip !== null ? this.IsHtmlTooltip : false;
let isShowBackground = this.IsShowBackground;
let controlId = this.ControlId;
let chartContainer = document.getElementById(controlId);
let chart = new google.visualization.LineChart(chartContainer);
switch (this.ChartType) {
case "ScatterChart":
chart = new google.visualization.ScatterChart(chartContainer);
break;
case "ColumnChart":
chart = new google.visualization.ColumnChart(chartContainer);
break;
}
var chartDataTable = new google.visualization.DataTable(this.ChartData);
console.log("this.ChartData", this.ChartData);
// Identify the point to highlight (assuming index 2)
const highlightedPointIndex = 3;
// Loop through the data and set style for the highlighted point
for (let i = 0; i < this.ChartData.rows.length; i++) {
const row = this.ChartData.rows[i];
if (i === highlightedPointIndex) {
row.c[i].role = "point { size: 18; shape-type: star; fill-color: #FF0000; }"; // Set desired style
}
}
const options = {
legend: this.Legend ? this.Legend : "none",
hAxis: {
title: this.XAxis && this.XAxis.label ? this.XAxis.label : "",
titleTextStyle: {
color: this.XAxis && this.XAxis.color ? this.XAxis.color : "gray",
fontSize: this.XAxis && this.XAxis.titleFontSize ? this.XAxis.titleFontSize : 13,
bold: this.XAxis && !this.XAxis.titleBold ? this.YAxis.titleBold : true
},
textStyle: {
color: this.XAxis && this.XAxis.color ? this.XAxis.color : "gray",
bold: this.XAxis && !this.XAxis.textbold ? this.XAxis.textbold : true
},
format: this.XAxis && this.XAxis.format ? this.XAxis.format : "",
slantedText: true,
slantedTextAngle: 45,
ticks: this.XAxis && this.XAxis.ticks ? this.XAxis.ticks :
this.ChartData && this.ChartData.ticks ?
this.ChartData.ticks : null
},
vAxis: {
title: this.YAxis && this.YAxis.label ? this.YAxis.label : "",
titleTextStyle: {
color: this.YAxis && this.YAxis.color ? this.YAxis.color : "gray",
fontSize: this.YAxis && this.YAxis.titleFontSize ? this.YAxis.titleFontSize : 13,
bold: this.YAxis && !this.YAxis.titleBold ? this.YAxis.titleBold : true
},
textStyle: {
color: this.YAxis && this.YAxis.color ? this.YAxis.color : "gray",
bold: this.YAxis && !this.YAxis.textbold ? this.YAxis.textbold : true
},
format: this.YAxis && this.YAxis.format ? this.YAxis.format : "",
viewWindowMode: this.YAxis.viewWindowMode,
viewWindow: this.YAxis.viewWindow,
ticks: this.YAxis && this.YAxis.ticks ? this.YAxis.ticks : null
},
pointSize: this.PointSize ? this.PointSize : 5,
series: this.SeriesOptions,
pointsVisible: this.PointsVisible ? this.PointsVisible : false,
tooltip: { isHtml: isHtmlTooltip },
chartArea: {
left: this.YAxis && this.YAxis.left ? this.YAxis.left : 40,
top: 20,
bottom: this.XAxis && this.XAxis.bottom ? this.XAxis.bottom : 40,
right: 10,
height: '70%'
},
width: this.Width ? this.Width : "540",
height: this.Height ? this.Height : "275"
};
let dataView = chartDataTable;
if (this.VisibleColumns) {
dataView = new google.visualization.DataView(chartDataTable);
dataView.setColumns(this.VisibleColumns);
}
let createSVG = (n, a, b?) => {
e = document.createElementNS(xmlns, n);
for (var k in a) {
e.setAttributeNS(null, k, a[k]);
}
if (b) {
for (var k in b) {
e.setAttribute(k, b[k]);
}
}
return e;
}
google.visualization.events.addListener(chart, 'ready', function () {
if (isShowBackground) {
var gradient = createSVG('linearGradient', {
x1: 0, y1: 1, x2: 1, y2: 1
}, {
id: `chart-${controlId}`
});
chartContainer.querySelector('svg>defs').appendChild(gradient);
gradient.appendChild(createSVG('stop', { offset: '10%', 'stop-color': 'red' }));
gradient.appendChild(createSVG('stop', { offset: '50%', 'stop-color': 'yellow' }));
gradient.appendChild(createSVG('stop', { offset: '100%', 'stop-color': 'green' }));
var chartRectangle = chartContainer.querySelector('svg>g>rect');
if (chartRectangle) {
chartRectangle.setAttribute('fill', `url(#chart-${controlId})`);
chartRectangle.setAttribute('fill-opacity', "0.8");
}
}
if (isFormatTooltip) {
google.visualization.events.addListener(chart, 'onmouseover', function (hover) {
if (hover) {
var tooltipContainer = chartContainer.querySelector('.google-visualization-tooltip>g>text');
if (tooltipContainer && tooltipContainer.innerHTML) {
tooltipContainer.innerHTML = tooltipContainer.innerHTML.replace(',', '');
}
}
})
}
let chartLoadingContainers = document.getElementsByClassName("k-loading-image") as HTMLCollectionOf<HTMLElement>;
if (chartLoadingContainers && chartLoadingContainers.length > 0) {
for (let i = 0; i < chartLoadingContainers.length; i++) {
chartLoadingContainers[i].style.display = 'none';
}
}
});
chart.draw(dataView, options);
}
I am not able to highlight custom points on scatter chart.thanks in advance!