hi,
below is chartdata which is I am using to draw chart
chartdata = {
"id": "00000000-0000-0000-0000-000000000000",
"ticks": [
"2023-01-01T10:25:55.000Z",
"2023-07-01T09:25:55.000Z",
"2024-01-01T10:25:55.000Z",
"2024-07-01T09:25:55.000Z",
"2025-01-01T10:25:55.000Z",
"2025-07-01T09:25:55.000Z"
],
"rows": [
{
"c": [
{
"v": "2023-03-31T23:00:00.000Z",
"f": null,
"p": null,
"role": null
},
{
"v": 4,
"f": null,
"p": null,
"role": null
},
{
"v": 2,
"f": null,
"p": null,
"role": null
},
{
"v": 1,
"f": "1,00 (N=5,00)",
"p": null,
"role": "point { size: 18; shape-type: star;
fill-color: #a52714; }"
},
{
"v": 1,
"f": "Meetwaarde: 1,00 (N=5,00) \r\n Gewogen
gemiddelde: 1,00 (Total N=5,00)",
"p": null,
"role": null
}
]
},
{
"c": [
{
"v": "2023-09-30T23:00:00.000Z",
"f": null,
"p": null,
"role": null
},
{
"v": 9,
"f": null,
"p": null,
"role": null
},
{
"v": 4,
"f": null,
"p": null,
"role": null
},
{
"v": 4,
"f": "4,00 (N=7,00)",
"p": "Think of a business indicator score as a report
card for how well a business is doing. It's like giving the business a
grade based on different aspects, like sales, profits, customer
satisfaction, and other important stuff. If the score is high, it means the
business is doing really well, making lots of money, and keeping customers
happy.",
"role": "point { size: 18; shape-type: star;
fill-color: #a52714; }"
},
{
"v": 2.75,
"f": "Gewogen gemiddelde: 2,75 (Total N=12,00)",
"p": null,
"role": null
}
]
},
{
"c": [
{
"v": "2024-03-31T00:00:00.000Z",
"f": null,
"p": null,
"role": null
},
{
"v": 5,
"f": null,
"p": null,
"role": null
},
{
"v": 2,
"f": null,
"p": null,
"role": null
},
{
"v": 4,
"f": "4,00 (N=5,00)",
"p": "new testing",
"role": "point { size: 18; shape-type: star;
fill-color: #a52714; }"
},
{
"v": 3.1176470588235294,
"f": "Gewogen gemiddelde: 3,12 (Total N=17,00)",
"p": null,
"role": null
}
]
}
],
"cols": [
{
"id": "Time",
"label": "Interval",
"type": "date",
"role": null,
"p": null
},
{
"id": "Red",
"label": "Rood",
"type": "number",
"role": null,
"p": null
},
{
"id": "Green",
"label": "Groen",
"type": "number",
"role": null,
"p": null
},
{
"id": "Value",
"label": "Meetwaarde",
"type": "number",
"role": null,
"p": null
},
{
"id": "WeightedAverage",
"label": null,
"type": "number",
"role": null,
"p": null
}
]
}
below is my html code
<div class="grid-wrapper">
<div [id]="ControlId"></div>
<div class="k-loading-image"></div>
</div>
below is my typescript method to draw chart
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?) => {
var xmlns = "http://www.w3.org/2000/svg";,
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!
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/ec4ed111-0b89-46cf-a5e9-804df4cdf0bbn%40googlegroups.com.
