Hi I have this reacr/flask app that when you put a keyword it sends it to flask check some data and then sents it back to react as the following json response:
I want to be able to plot these values using 'highcharts-react-official' package.
As of now im able to see my response on the console but nothing on the chart. I changed the dates into that timestamps but not sure if it's better or I should be using datetime, I can change it back if necessary.
My code is the following:
import React, { Component } from 'react';
import axios from 'axios';
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
class Keyword extends Component {
state = {
kws :[]
}
keyword = e => {
e.preventDefault();
axios.post("/trends",{search_keyword: document.getElementById("keywords").value})
.then((res) => {
const data = res.data
const keyword = data.data
console.log("first index", keyword[1])
this.setState({kws: keyword})
}
)}
render() {
const {kws =[]} = this.state
const options = {
title: {
text: 'My chart'
},
xAxis: {
type: 'datetime'
},
series: [{
data: kws
}]
}
return (
<HighchartsReact
highcharts={Highcharts}
options={options}
/>
);
}
}
Im looking to plot something like this:
Update: I Have updated the JSON response to be like this:
Would this be a better structure for plotting? If so what do I do to plot each keyword and its values like the graph above?
UPDATE2: I have updated my Json file
