I am trying to display charts through highcharts with data from my servlet, but somehow it's not able to display data properly from my servlet(like its showing in console but after that I think I'm missing few steps). I am totally new to react js and this web development stuff, please help, I think its something with axios,
import React from 'react';
import SearchPanel from '../components/SearchPanel'
import { Grid } from '@material-ui/core';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import crossfilter from 'crossfilter2';
import axios from 'axios';
import App1 from '../components/App1';
export default class AnalyticsSection extends React.Component {
state = {
dataResults: [],
data : [],
};
componentDidMount() {
axios.get('http://localhost:8080/Internship_Backend/customer')
.then(response => {
console.log(response);
this.setState({ dataResults : response.data });
})
.catch(error => {
console.log(error);
});
var dataset = crossfilter(this.state.dataResults);
var bcodedim = dataset.dimension(d => d.business_code);
var bcodegrp = bcodedim.group().reduceSum(d => d.actualOpenAmount);
function prepareDataForHighcharts(groups){
var categories =[];
var data = [];
var gdata = groups.top(4);
gdata.forEach(d => {
categories.push(d.key);
data.push(d.value);
});
return{
categories : categories,
data : data
}
}
var tempObject = prepareDataForHighcharts(bcodegrp);
var options = {
chart: {
renderTo : 'container',
type : 'bar',
backgroundColor:'#1b1f38',
minWidth: 275,
height: '222px',
},
// colors: ['#FFFFFFa5 '],
title : {
text : "Total Amount by Company Code",
style:{
color: '#FFFFFFa5'
}
},
xAxis : {
type : 'category',
categories : tempObject.categories,
title: {
text: null
},
overflow : 'auto'
},
yAxis : {
min: 0,
// overflow : 'scroll'
// tickInterval: 10000,
},
tooltip: {
valueSuffix: ' dollars'
},
series : [{
// name : 'Count',
data : tempObject.data,
// data: [125, 100,85, 74, ]
}],
legend : {
enabled : false,
},
credits: {
enabled : false,
},
exporting: {
enabled : false,
},
plotOptions: {
}
}
var chart = new Highcharts.chart(options);
}
render (){
return (
<Grid container >
<Grid item xs style={{
minWidth: 275,
height: '225px',
margin: '2px 2px 10px ',
backgroundColor: "rgb(93,175,240,0.5)",
marginTop:'-10px',
marginLeft : '12px',
marginRight : '-5px'
}} >
<div id = 'container' align='center' style = {{ marginTop : '2px' }}> </div>
</Grid>
<Grid item xs style = {{
minWidth: 275,
height: '225px',
margin: '2px 2px 10px ',
backgroundColor: "rgb(93,175,240,0.5)",
marginTop:'0px',
marginLeft : '12px',
marginRight : '-5px'
}} >
<SearchPanel/>
< div align='center'>
</div>
</Grid>
</Grid>
);
}
}
the data in my servlet is in json format
I would process data further in the then callback and then store results in state.
const url = (() => {
const data = [{"pk_id":1,"acct_doc_header_id":539592086,"company_id":60,"document_number":39439082,"document_number_norm":39439082,"business_code":"pier9","create_year":"","document_line_number":0,"doctype":"RI","customer_number":218994,"customer_number_norm":218994,"fk_customer_map_id":-1,"customer_name":"pied piper","division":"","documentCreateDate":"Jul 5, 2018","documentCreateDateNorm":"Jul 5, 2018","posting_id":"","invoice_id":39439082,"invoice_id_norm":39439082,"totalOpenAmount":0.0,"totalOpenAmountNorm":0.0,"cust_payment_terms":60,"business_area":"","ship_to":"","clearingDate":"Sep 5, 2018","clearingDateNorm":"Sep 5, 2018","reason_code":"","isOpen":0,"debit_credit_indicator":"","payment_method":"","invoiceAmountDocCurrency":3925.91,"document_id":539592086,"actualOpenAmount":3925.91,"paidAmount":3925.91,"dayspast_due":2,"invoice_age":62,"disputed_amount":0.0}]
const blob = new Blob([JSON.stringify(data)], {
type: 'application/json'
})
return URL.createObjectURL(blob);
})()
const options = ({data, categories}) => ({
chart: {
type : 'bar',
backgroundColor:'#1b1f38',
minWidth: 275,
height: '222px',
},
title : {
text : "Total Amount by Company Code",
style:{
color: '#FFFFFFa5'
}
},
xAxis : {
type : 'category',
categories,
title: {
text: null
},
overflow : 'auto'
},
yAxis : {
min: 0,
},
tooltip: {
valueSuffix: ' dollars'
},
series : [{
data
}],
legend : {
enabled : false,
},
credits: {
enabled : false,
},
exporting: {
enabled : false,
},
plotOptions: {}
})
const prepareDataForHighcharts = (groups) => {
const categories = [];
const data = [];
const gdata = groups.top(4);
for(const {key, value} of gdata) {
categories.push(key);
data.push(value);
}
return {
categories,
data
}
}
const ReactHighcharts = ReactHighcharts;
const { Component, useState, useEffect } = React;
class AnalyticsSection extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
dataResults: [],
config: {}
}
}
componentDidMount() {
this.mounted = true;
axios.get(url)
.then(response => {
const dataResults = response.data;
if(!this.mounted) {
return;
}
const dataset = crossfilter(dataResults);
const bcodedim = dataset
.dimension(({business_code}) => business_code);
const bcodegrp = bcodedim.group()
.reduceSum(({actualOpenAmount}) => actualOpenAmount);
const obj = prepareDataForHighcharts(bcodegrp);
const config = options(obj);
this.setState(state => ({
isLoading: false,
config
}));
})
.catch(error => {
console.log(error);
});
}
componentWillUnmount() {
this.mounted = false;
}
render() {
const { isLoading, config } = this.state;
return <div>
{isLoading ? <div>Loading</div> : <ReactHighcharts config = {config}></ReactHighcharts>}
</div>
}
}
ReactDOM.render(
<AnalyticsSection />,
document.getElementById('root')
);<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://unpkg.com/[email protected]/bundle/ReactHighcharts.js"></script>
<script src="https://unpkg.com/crossfilter2@latest/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<div id="root"></div>