score:0

Accepted answer

You need to format your data to the series structure required by Highcharts. The rest of the requirements are achievable by using chart options - please check xAxis and yAxis properties in API.

var data = <?= $json_data?>

var series = [{
        name: "temperature",
        data: []
    },
    {
        name: "humidity",
        data: [],
        yAxis: 1
    }
];

data.forEach(function(dataEl) {
    series[0].data.push([
        new Date(dataEl.Timestamp).getTime(),
        Number(dataEl.temperature)
    ]);
    series[1].data.push([
        new Date(dataEl.Timestamp).getTime(),
        Number(dataEl.humidity)
    ]);
});

Highcharts.chart('container', {
    series: series,
    yAxis: [{
            title: {
                text: 'temperature'
            }
        },
        {
            title: {
                text: 'humidity'
            },
            opposite: true
        }
    ],
    xAxis: {
        type: 'datetime'
    }
});

Live demo: http://jsfiddle.net/BlackLabel/aw95vek6/

API Reference: https://api.highcharts.com/highcharts/series.line.data

score:0

you can achive with below code but when you choosing chart first know the purpose and create json data accroding to the series use apexcharts for free

<script type="text/javascript">
    var data=[{"Timestamp":"10:04 02/01/21","temperature":"5","humidity":"66"},{"Timestamp":"10:19 02/01/21","temperature":"6","humidity":"65"},{"Timestamp":"10:35 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"10:50 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"11:06 02/01/21","temperature":"6","humidity":"64"},{"Timestamp":"11:21 02/01/21","temperature":"7","humidity":"63"},{"Timestamp":"11:34 02/01/21","temperature":"10","humidity":"66"},{"Timestamp":"04:21 02/01/21","temperature":"15","humidity":"64"},{"Timestamp":"04:36 02/01/21","temperature":"16","humidity":"61"},{"Timestamp":"04:51 02/01/21","temperature":"15","humidity":"59"},{"Timestamp":"05:07 02/01/21","temperature":"15","humidity":"60"},{"Timestamp":"05:22 02/01/21","temperature":"14","humidity":"61"}];
   console.log(data);
   var timestamp=[];
   var temperature=[];
   var humidity=[];
   $.each(data, function(i, item) {
   console.log(data[i]);
    timestamp.push(data[i].Timestamp);
    temperature.push(data[i].temperature);
    humidity.push(data[i].humidity);
   
});

 Highcharts.chart('container', {

  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },

  xAxis: {
     categories: timestamp,
  },

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

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'temperature',
    data: temperature
  }, {
    name: 'humidity',
    data: humidity
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

</script>

Related Query

More Query from same tag