Currently, web application contains Highchart spline-chart that's easy enough to convert into area-chart. My question is two-fold:
A. How to update area-chart color with values that are not on y-axis, so in my example 'count' would be on y-axis however color of area chart would be according to 'sentiment'.
B. How can multiple thresholds be set for different ranges of values in 'sentiment' (I'm assuming through if/else statements in Fetch API?)
Many thanks in advance!
Data structure looks like this:
{'count': [14, 25, 23, 10],
'sentiment': [5, 4, 1, 3],
'halfhour': ['11-06-2021, 12:00','11-06-2021, 12:30', '11-06-2021, 13:00', '11-06-2021, 13:30']}
JS code:
<script>
$(document).ready(function(){
lineChartOptions = {
chart: { renderTo: 'chart-areaid',
defaultSeriesType: 'spline' // change this to area-chart
},
title: {
text: ''
},
xAxis: { type: 'datetime',
categories: []
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {text: 'Value',
margin: 80}
},
series: [{
name: 'reddit_stream',
animation: false,
data: []
}]
}
const lineChart = Highcharts.chart('chart-areaid', lineChartOptions)
setInterval(() => {
fetch('/reddit_line_data')
.then( resp => resp.json())
.then(data => { lineChart.update({ xAxis: { categories: data.halfhour},
series: [{ data: data.count}]},
true, false, false)}); }, 1000)
</script>
Aucun commentaire:
Enregistrer un commentaire