khubbaib
Posts: 3
Joined: Tue Sep 27, 2022 11:57 am

Need to add markers based on condition in Line Chart

Hi, I successfully build the line chart with the data but unable to add marker on custom positions,

Code: Select all

"data": [
                        {
                            "overNumber": 0,
                            "runs": 0,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "0"
                        },
                        {
                            "overNumber": 1,
                            "runs": 1,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "1"
                        },
                        {
                            "overNumber": 2,
                            "runs": 2,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "3"
                        },
                        {
                            "overNumber": 3,
                            "runs": 2,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "5"
                        },
                        {
                            "overNumber": 4,
                            "runs": 5,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "10"
                        },
                        {
                            "overNumber": 5,
                            "runs": 4,
                            "wickets": 1,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "14"
                        },
                        {
                            "overNumber": 6,
                            "runs": 2,
                            "wickets": 1,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "16"
                        },
                        {
                            "overNumber": 7,
                            "runs": 0,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "16"
                        },
                        {
                            "overNumber": 8,
                            "runs": 0,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "16"
                        },
                        {
                            "overNumber": 9,
                            "runs": 0,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "16"
                        },
                        {
                            "overNumber": 10,
                            "runs": 3,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "19"
                        },
                        {
                            "overNumber": 11,
                            "runs": 0,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "19"
                        },
                        {
                            "overNumber": 12,
                            "runs": 2,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "21"
                        },
                        {
                            "overNumber": 13,
                            "runs": 2,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "23"
                        },
                        {
                            "overNumber": 14,
                            "runs": 2,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "25"
                        },
                        {
                            "overNumber": 15,
                            "runs": 4,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "29"
                        },
                        {
                            "overNumber": 16,
                            "runs": 8,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "37"
                        },
                        {
                            "overNumber": 17,
                            "runs": 4,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "41"
                        },
                        {
                            "overNumber": 18,
                            "runs": 8,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "49"
                        },
                        {
                            "overNumber": 19,
                            "runs": 3,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "52"
                        },
                        {
                            "overNumber": 20,
                            "runs": 5,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "57"
                        },
                        {
                            "overNumber": 21,
                            "runs": 4,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "61"
                        },
                        {
                            "overNumber": 22,
                            "runs": 1,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "62"
                        },
                        {
                            "overNumber": 23,
                            "runs": 5,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "67"
                        },
                        {
                            "overNumber": 24,
                            "runs": 6,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "73"
                        },
                        {
                            "overNumber": 25,
                            "runs": 5,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "78"
                        },
                        {
                            "overNumber": 26,
                            "runs": 3,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "81"
                        },
                        {
                            "overNumber": 27,
                            "runs": 3,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "84"
                        },
                        {
                            "overNumber": 28,
                            "runs": 8,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "92"
                        },
                        {
                            "overNumber": 29,
                            "runs": 6,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "98"
                        },
                        {
                            "overNumber": 30,
                            "runs": 8,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "106"
                        },
                        {
                            "overNumber": 31,
                            "runs": 11,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "117"
                        },
                        {
                            "overNumber": 32,
                            "runs": 7,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "124"
                        },
                        {
                            "overNumber": 33,
                            "runs": 3,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "127"
                        },
                        {
                            "overNumber": 34,
                            "runs": 8,
                            "wickets": 1,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "135"
                        },
                        {
                            "overNumber": 35,
                            "runs": 0,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "135"
                        },
                        {
                            "overNumber": 36,
                            "runs": 8,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "143"
                        },
                        {
                            "overNumber": 37,
                            "runs": 8,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "151"
                        },
                        {
                            "overNumber": 38,
                            "runs": 15,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "166"
                        },
                        {
                            "overNumber": 39,
                            "runs": 7,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "173"
                        },
                        {
                            "overNumber": 40,
                            "runs": 3,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "176"
                        },
                        {
                            "overNumber": 41,
                            "runs": 5,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "181"
                        },
                        {
                            "overNumber": 42,
                            "runs": 7,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "188"
                        },
                        {
                            "overNumber": 43,
                            "runs": 5,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "193"
                        },
                        {
                            "overNumber": 44,
                            "runs": 10,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "203"
                        },
                        {
                            "overNumber": 45,
                            "runs": 10,
                            "wickets": 1,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "213"
                        },
                        {
                            "overNumber": 46,
                            "runs": 11,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "224"
                        },
                        {
                            "overNumber": 47,
                            "runs": 6,
                            "wickets": 1,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "230"
                        },
                        {
                            "overNumber": 48,
                            "runs": 13,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "243"
                        },
                        {
                            "overNumber": 49,
                            "runs": 9,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "252"
                        },
                        {
                            "overNumber": 50,
                            "runs": 15,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "267"
                        }
                    ]
I have above json which i loop through and build Line Chart and what i want is if in this below object wickets is greater than 0 then add markers(depend on number of wicket if 2 wickets then add 2 markers) in that over number. Over number is X-Axis Value and Score is Y-Axis value of my line chart

Code: Select all

{
                            "overNumber": 49,
                            "runs": 9,
                            "wickets": 0,
                            "innings": "1",
                            "teamID": "1",
                            "teamShortName": "AUS",
                            "score": "252"
                        },


Here is my PHP code

Code: Select all

Highcharts.chart('wormcrt_cont', {
        subtitle: {
            text: ""
        },
        credits: {
            enabled: false
        },
        chart: {
            height: '500px'
        },
        exporting: {
            enabled: false
        },
        
        plotOptions: {
            allowPointSelect: false,
            line: {
                marker: {

                    enabled: false,
                },
                events: {
                    legendItemClick: function() {
                        return true;
                    }
                }
            },
            series: {
                pointStart: 0,
                pointPadding: 0,
                groupPadding: 0,
            }
        },
        title: {
            text: ""
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            layout: 'horizontal',
            x: 0,
            y: -19
        },
        yAxis: {
            gridLineDashStyle: 'longdash',
            gridLineWidth: 1,
            allowDecimals: false,
            title: {
                text: 'Runs'
            },
            tickInterval: 50
        },
        xAxis: {
            allowDecimals: false,
            title: {
                text: 'Overs'
            },
            min: 0,
            scrollbar: {
                enabled: false
            },
            crosshair: false,
            tickInterval: 1
        },
        series: [{
            type: 'line',
            name: "<?php echo $graphs->data->runsComparsion->inningsPhase[0]->teamShortName ?> ( <?php echo $graphs->data->runsComparsion->inningsPhase[0]->totalRuns ?>/<?php echo $graphs->data->runsComparsion->inningsPhase[0]->totalWickets ?> )",
            showInLegend: "<?php echo $graphs->data->runsComparsion->inningsPhase[0]->teamShortName ?>",
            data: [<?php 
            	$lastElement1 = end($graphs->data->runsComparsion->inningsPhase[0]->data);
            	foreach ($graphs->data->runsComparsion->inningsPhase[0]->data as $team1key => $team1data ) {
            		echo $team1data->score;
            		if( $team1data != $lastElement1 ){ echo ', '; }else{ echo ''; }
            	}
             ?>],
            color: "#dd0000",
            lineWidth: 2,
            enableMouseTracking: false

        }, {
            type: 'line',
            showInLegend: "<?php echo $graphs->data->runsComparsion->inningsPhase[1]->teamShortName ?>",
            name: "<?php echo $graphs->data->runsComparsion->inningsPhase[1]->teamShortName ?> ( <?php echo $graphs->data->runsComparsion->inningsPhase[1]->totalRuns ?>/<?php echo $graphs->data->runsComparsion->inningsPhase[1]->totalWickets ?> )",
            data: [<?php 
            	$lastElement2 = end($graphs->data->runsComparsion->inningsPhase[1]->data);

            	foreach ($graphs->data->runsComparsion->inningsPhase[1]->data as $team2key => $team2data ) {
            		echo $team2data->score;
            		if( $team2data != $lastElement2 ){ echo ', '; }else{ echo ''; }
            	}
             ?>],
            color: "#03a9f4",
            lineWidth: 2,  
            enableMouseTracking: false      
        }]
    });
Current Output
Image
Desire Output
Image

Thank you!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Need to add markers based on condition in Line Chart

Hello,

Welcome to our forum and thanks for contacting us with your question!

You can use point.marker.enabled property to show it only for specific points.

Demo: https://jsfiddle.net/BlackLabel/kaqz16vc/
API: https://api.highcharts.com/highcharts/s ... er.enabled

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
khubbaib
Posts: 3
Joined: Tue Sep 27, 2022 11:57 am

Re: Need to add markers based on condition in Line Chart

Thank you for the help, Just tested and it works great, I have column chart and need same thing in that chart too, will it same or different approach, should i share that code here or create new thread?
khubbaib
Posts: 3
Joined: Tue Sep 27, 2022 11:57 am

Re: Need to add markers based on condition in Line Chart

Also is it possible to show multiple markers in same X-Axis value?
Like this Image
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Need to add markers based on condition in Line Chart

Hi,

You can achieve something like this by adding another series, this time of the scatter type, linking it to the previous series and setting the same symbol and marker color.

Demo: https://jsfiddle.net/BlackLabel/bc6fu7ah/
API: https://api.highcharts.com/highcharts/s ... r.linkedTo

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”