Customizing individual points on scatter chart

51 views

Skip to first unread message

Sagar Belote

unread,

May 2, 2024, 12:09:48 PMMay 2

to Google Visualization API

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);