How can I highlight a particular datapoint in chartjs, where my data is coming from json array?

Question

// here I am taking another json encoded data from phpfile

       $(document).ready(function () {

        showGraph();
    });


    function showGraph()
    {
        {

            $.post("phpfile.php",
            function (data)
            {
                console.log(data);
                 var name = [];
                var marks = [];
                var height=[];

//and here as I couldn't encode two json array's separetly I'm declaring it to a variable and then using it

   var jsonfile =[{"height":"85","st_name":"Name1"},{"height":"100","st_name":"Name3"},{"height":"92","st_name":"Name4"},{"height":"104","st_name":"Name5"},{"height":"91","st_name":"Name2"},{"height":"99","st_name":"Name6"},{"height":"140","st_name":"AI346"},{"height":"139","st_name":"abc"},{"height":"141","st_name":"def"},{"height":"140","st_name":"ghi"},{"height":"144","st_name":"jkl"},{"height":"130","st_name":"lmn"},{"height":"142","st_name":"opq"},{"height":"132","st_name":"rst"},{"height":"135","st_name":"xyz"},{"height":"135","st_name":"asdfsf"}];

//here I am reading the data from phpfile(1st Json array)

                    for (var i in data) {
                    name.push(data[i].st_name);
                    marks.push(data[i].height);


                }

//here i am trying to access data from second json

             for (var i=0;i<jsonfile.length;i++){
                    if(jsonfile[i].height==100)
                        { height.push(jsonfile[i].height)}
                }

//my graph function ,when I do this I am getting a single point with second json(height variable) but I need to highlight the particular point under a condition... I am not understanding how to do it.

           var chartdata = {
                    labels: name,


                    datasets: [
                        {
                            label: 'height',
                            fill:false,
                            lineTension:0.5,
                            backgroundColor: '#5B2C6F',
                            borderColor: '#5B2C6F',
                            pointHoverBackgroundColor: '#5B2C6F',
                            pointHoverBorderColor: '#5B2C6F',
                            data: marks

                            //data:height
                        },

                        {
                            label: 'weight',
                            fill:false,
                            lineTension:0.1,
                            backgroundColor: '#C0392B',
                            borderColor: '#C0392B',
                            pointHoverBackgroundColor: '#C0392B',
                            pointHoverBorderColor: '#C0392B',
                            data:height,
                            //data:height
                        }









                ]

                };

                var graphTarget = $("#graphCanvas");

                var lineGraph = new Chart(graphTarget, {
                    type: 'line',
                    data: chartdata,
                    options :{ 
                       scales:{
                         xAxes: [{
                                 display: false //this will remove all the x-axis grid lines
                                }]
                    }
                }


                });
            });
        }
    }
    </script>

Answer 1

i will try to improve this.

var data =[{"height":"85","st_name":"Name1","color":"rgba(85, 85, 255, 255)"},{"height":"100","st_name":"Name3","color":"rgba(255, 0, 0, 2)"},{"height":"92","st_name":"Name4","color":"rgba(85, 85, 255, 255)"},{"height":"104","st_name":"Name5","color":"rgba(85, 85, 255, 255)"}];


    var height = [];
    var label = [];
    var color = [];

    for(i = 0; i<data.length; i++){
        height.push(data[i]['height']);
        label.push(data[i]['st_name']);
        color.push(data[i]['color']);
    }

    var ctx = document.getElementById('myLine').getContext('2d');

    var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: label,
            datasets: [{
                data: height,
                pointBorderColor: color,
            }]  
        }     
    });