Show the latest labels in a bar chart with React.js using react-chartjs

Question

I am working on creating a bar chart in React.js using react-chartjs library. I am able to get the bar chart to display but since my data is huge and it is collected for every 10 seconds. The bar chart displays something like

My dataset for it looks like

var loadData = [{
    options: {
        elements: {
            rectangle: {
              borderWidth: 2,
              borderColor: 'rgb(0, 255, 0)',
              borderSkipped: 'bottom'
            }
        },
        responsive: true,
        legend: {
            position: 'top'
        },
        title: {
            display: true,
            text: 'ETL Load Chart'
        },
        scales: {
            xAxes: [{
                type: 'time',
                ticks: {
                    autoSkip:true,
                    maxTicksLimit:20
                }
           }]
        }
    },
    data: {
        labels: [],
        datasets: [
            {

                backgroundColor: "rgba(220,220,220,0.5)",
                data: []
            }
        ]
    }
}]

I am updating the the data with the help of a library immutability-helpers

case 'GET_LOAD_DATA_RECEIVED': 
            var payload = action.data.payload
            var dataValues = [], labelValues = [];
            payload.forEach(function(item){
                dataValues.push(parseInt(item['recs_upd']) + 1);
                labelValues.push(item['from_ts']);
            })
            return update(state, {
                0: {
                    data: {
                        labels: {
                            $push: labelValues
                        },
                        datasets: {
                            0: {
                                data: {
                                    $push: dataValues
                                }
                            }
                        }   
                    }
                }
            })
            break;

and I am calling the rendering of Chart like

<Bar data={this.props.loadInfo[0].data} options={this.props.loadInfo[0].options} width="600" height="250" />

I am using "react-chartjs": "^0.8.0", and "chart.js": "^1.1.1" I couldn't update to 2.0 in chart.js were I saw something called showXlabels being present since react-chartjs supports the current version.

Thanks for any help.

Pranesh Ravi · Answer 1 · 2016-11-02T07:27:59.750

1

Pass only the latest n number of data for every 10 seconds.

const updatedData = {...this.props.loadInfo[0]}

const newData = {
  data: {
    labels: [...updatedData.labels].reverse().slice(0, 30).reverse(),
    datasets: [...updatedData.datasets].reverse().slice(0, 30).reverse(),
  }
}

const newLimitedData = {...updatedData, ...newData }

<Bar data={newLimitedData.data} options={newLimitedData.options} width="600" height="250" />

Hope this helps!

edited Nov 02 '16 at 07:27

answered Nov 02 '16 at 07:17

Pranesh Ravi

18,642
9
46
70

This is an option but in this case I will have to have a login in the reducer to also dump the old data and that will be complicated. I want to achieve it with chart.js only. Here is a link which demostrates it using chart.js but I can't figure out how to use it with react-chartjs http://jsbin.com/yitep/5/edit?html,css,js,output. Anyways thanks for your help – Shubham Khatri Nov 02 '16 at 08:18
Old data will be always available in `this.props.loadInfo[0]` – Pranesh Ravi Nov 02 '16 at 08:19
Exactly, after a certain time there will be too much data collected which is also undesirable since it is not getting used anywhere. What I guess is that, the link of the jsbin demo doesn't have this problem. Presently I have done the same fix as you have suggested. But I want it to be temporary will I get a good answer – Shubham Khatri Nov 02 '16 at 08:20
If you use `$push: labelValues` in the reducer. I don't think theres a way to avoid dumping data in the store. You should clear the data after a timeout – Pranesh Ravi Nov 02 '16 at 08:25

Show the latest labels in a bar chart with React.js using react-chartjs

1 Answers1