Change Highcharts Graph based on two Select inputs

Viewed 74

I have an array of data of the following format:

[["sno","day","status","data1","data2","data3","data4"],
 ["1","01-12-2020","success","23","66","53","34"],
 ["2","02-12-2020","success","12","9","8","6"],
 ["3","03-12-2020","success","10","11","16","13"],
 ["4","04-12-2020","success","34","43","54","34"],
 ["5","01-12-2020","fail","45","26","36","44"],
 ["6","02-12-2020","fail","12","15","11","13"],
 ["7","03-12-2020","fail","34","43","33","29"],
 ["8","04-12-2020","fail","23","34","31","23"]
]

to display the particular text in Highcharts I used the Following code:

    var weekData = [["sno","day","status","data1","data2","data3","data4"],["1","01-12-2020","success","23","66","53","34"],["2","02-12-2020","success","12","9","8","6"],["3","03-12-2020","success","10","11","16","13"],["4","04-12-2020","success","34","43","54","34"],["5","01-12-2020","fail","45","26","36","44"],["6","02-12-2020","fail","12","15","11","13"],["7","03-12-2020","fail","34","43","33","29"],["8","04-12-2020","fail","23","34","31","23"]] ;

    //console.log(weekData);

    function change()
    {
        var valStatus = document.getElementById("statusSelect");
        status = valStatus.value;
        //console.log(status);
        
        if(status == 'success')
        {
            const successValues = weekData.filter((x)=>x[2] === "success"); //New Cases
            console.log(successValues);
            return successValues;
        }

        else if(status == 'fail')
        {
            const failValues = weekData.filter((x)=>x[2] === "fail"); //New Cases
            console.log(failValues)
            return failValues;
        }
    }

    function getCol(matrix, col){
       var column = [];
       for(var i=0; i<matrix.length; i++){
          column.push(matrix[i][col]);
       }
       return column;
    }

   function chartCreate()
   {
    change();

        const toNumbers = arr => arr.map(Number);
        var getstat= change();
        var day = getCol(getstat,1);
        console.log(day);
        var sdata1 = toNumbers(getCol(getstat,3));
        console.log("data 1" ,sdata1);
        var sdata2 = toNumbers(getCol(getstat,4));
        console.log(sdata2);
        var sdata3 = toNumbers(getCol(getstat,5));
        console.log(sdata3);
        var sdata4 = toNumbers(getCol(getstat,6));
        console.log(sdata4);

For the full program You can check my fiddle : https://jsfiddle.net/abnitchauhan/L27n0wfs/

the problem is that when I am status select box, The Chart is not updating.

Also I feel that this code is quite lengthy when the datasets will increase overtime. is there any efficient approach to display this data on Highchart's based on the same select options.

2 Answers

I made an update to JS code. See if this is what you want:

    var weekData = [["sno","day","status","data1","data2","data3","data4"],["1","01-12-2020","success","23","66","53","34"],["2","02-12-2020","success","12","9","8","6"],["3","03-12-2020","success","10","11","16","13"],["4","04-12-2020","success","34","43","54","34"],["5","01-12-2020","fail","45","26","36","44"],["6","02-12-2020","fail","12","15","11","13"],["7","03-12-2020","fail","34","43","33","29"],["8","04-12-2020","fail","23","34","31","23"]] ;

    //console.log(weekData);

    function change()
    {
        var valStatus = document.getElementById("statusSelect");
        status = valStatus.value;
        //console.log(status);
        
        if(status == 'success')
        {
            const successValues = weekData.filter((x)=>x[2] === "success"); //New Cases
            console.log(successValues);
            return chartCreate(successValues);
        }

        else if(status == 'fail')
        {
            const failValues = weekData.filter((x)=>x[2] === "fail"); //New Cases
            console.log(failValues)
            return chartCreate(failValues);
        }
    }

    function getCol(matrix, col){
       var column = [];
       for(var i=0; i<matrix.length; i++){
          column.push(matrix[i][col]);
       }
       return column;
    }

   function chartCreate(stat)
   {

        const toNumbers = arr => arr.map(Number);
        var getstat= stat;
        var day = getCol(getstat,1);
        console.log(day);
        var sdata1 = toNumbers(getCol(getstat,3));
        console.log("data 1" ,sdata1);
        var sdata2 = toNumbers(getCol(getstat,4));
        console.log(sdata2);
        var sdata3 = toNumbers(getCol(getstat,5));
        console.log(sdata3);
        var sdata4 = toNumbers(getCol(getstat,6));
        console.log(sdata4);

 var options = {
  chart:{
      renderTo: 'chart',
      defaultSeriesType: 'line'
  },

   title: {
        text: 'dummy'
    },

    subtitle: {
        text: ' '
    },

    yAxis: {
        title: {
            text: ' ',
            //tickPointInterval: 250
        },
         minorTickInterval: 'auto',
        // tickInterval: 4,
    },

    xAxis: {
      
       labels :{
        minorTickInterval: 'auto',
        formatter: function(){   
         return day[this.value];
       }
       },
         
        tickInterval: 10
       
    },

    credits: {
     enabled: false
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
           // pointStart: 0
        }
    },

  tooltip: {
   // split: true,
    formatter: function() {
      var points = this.points,
        tooltipArray = ['day: <b>' + day[this.x] + '</b><br/> Value : <b>'+ this.y +'</b>']

      

      return tooltipArray;
    }
  },
  series: [
  {
    name: 'Check',
    data: sdata1
  }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
};
    var chart = new Highcharts.Chart(options);

  $("#dataSelect").on('change', function(){
    //alert('f')
    var selVal = $("#dataSelect").val();
    if(selVal == 'data1' || selVal == '')
    {
        options.series = [{name: 'Data', data: sdata1}];
         options.yAxis = [{tickInterval:undefined,  minorTickInterval: 'auto'}];
    }
    else if(selVal == 'data2')
    {
        options.series = [{name: 'Data', data: sdata2}]
    }
    else if(selVal == 'data3')
    {
        options.series = [{name: 'Data', data: sdata3}];
         options.yAxis = [{tickInterval:undefined,  minorTickInterval: 'auto'}];

    } 

        else if(selVal == 'data4')
    {
        options.series = [{name: 'Data', data: sdata4}];
         options.yAxis = [{tickInterval:undefined,  minorTickInterval: 'auto'}];
    } 
     var chart = new Highcharts.Chart(options);    
});
}

change();

Your code looks very complex and does not fully work. In this case, I will suggest using the series setData method mixed with the change event listener. My example is a bit simplified, but I think it might be the right way.

document.getElementById('dataSelect').addEventListener('change', () => {
  const selectorValue = document.getElementById('dataSelect').value

  chart.series[0].setData(data[selectorValue])
});

API: https://api.highcharts.com/class-reference/Highcharts.Series#setData
Demo: https://jsfiddle.net/BlackLabel/nfz0a9bm/

Related