Trying to plot a Line Graph from multiple objects (each object becoming a Line)

Question

So I have two json files, one that contains all objects i have a line to plot:

import { bairro1, bairro2, bairro3 } from "../Data/dataBairros" 
export const listaBairros = [
{ value: bairro1, label: "bairro1" },
{ value: bairro2, label: "bairro2" },
{ value: bairro3, label: "bairro3" }

and onde with the dataset that will go to the graphs from each object:

export const bairro1 = [

{ month: 'Jan', sales: 900 }, { month: 'Fev', sales: 1220},
{ month: 'Mar', sales: 1400 }, { month: 'Abr', sales: 3153 },
{ month: 'Mai', sales: 1321 }, { month: 'Jun', sales: 3132 },
{ month: 'Jul', sales: 1323 }, { month: 'Ago', sales: 2154 },
{ month: 'Set', sales: 1231 }, { month: 'Out', sales: 1212 },
{ month: 'Nov', sales: 1212 }, { month: 'Dez', sales: 1300 }
]
export const bairro2 = [
{ month: 'Jan', sales: 3526 }, { month: 'Fev', sales: 1120 },
{ month: 'Mar', sales: 1231 }, { month: 'Abr', sales: 3143 },
{ month: 'Mai', sales: 1121 }, { month: 'Jun', sales: 2312 },
{ month: 'Jul', sales: 1213 }, { month: 'Ago', sales: 2544 },
 { month: 'Set', sales: 1151 }, { month: 'Out', sales: 1142 },
{ month: 'Nov', sales: 1142 }, { month: 'Dez', sales: 1312 }
]
export const bairro3 = [ 

{ month: 'Jan', sales: 1900 }, { month: 'Fev', sales: 1112},
{ month: 'Mar', sales: 1451 }, { month: 'Abr', sales: 3123 },
{ month: 'Mai', sales: 1591 }, { month: 'Jun', sales: 3322 },
{ month: 'Jul', sales: 1215 }, { month: 'Ago', sales: 2524 },
{ month: 'Set', sales: 2231 }, { month: 'Out', sales: 1444 },
{ month: 'Nov', sales: 2212 }, { month: 'Dez', sales: 1130 }
]

On a jsx file i make a selection of all the objects i want plotted at the same time

const [selectedList, setSelected] = useState ([]);
<Multiselect
        options={listaBairros} 
        value={selectedList} 
        displayValue="label" 
        onChange={setSelected}
    />

But, from now on I simple don't know how to take the list of objetcs selected and plot a Line for each of those objects

I'm trying to use ChartComponent library (https://ej2.syncfusion.com/react/documentation/chart/getting-started/) However, i have to manually write a Line Series for each object instead of only the ones selected:

<ChartComponent primaryXAxis={{valueType:"Category"}}>
        <Inject services={[LineSeries, Category]}/>
            <SeriesCollectionDirective>

                <SeriesDirective type="Line" dataSource ={bairro1} xName="month" yName="sales"/>
                <SeriesDirective type="Line" dataSource ={bairro2} xName="month" yName="sales"/>
                <SeriesDirective type="Line" dataSource ={bairro3} xName="month" yName="sales"/>
                
            </SeriesCollectionDirective>
    </ChartComponent>

Please somone, I've been trying to do this for really long!!

Zoey · Accepted Answer · 2021-09-19 20:52:54Z

Pointings and content

Besides some typos and misunderstanding about you problem I think you're having trouble with the JSX syntax.

The official Reat documentation has a lot of beginner tutorials and explanations: https://reactjs.org/docs/introducing-jsx.html

Also, here's a good first link to know more about React Hooks:

Original: https://reactjs.org/docs/hooks-intro.html

In portuguese: https://pt-br.reactjs.org/docs/hooks-intro.html

"Solution"

Given a list of javascript objects you want to create a MultiSelect that when some options are selected they are automatically ploted in your graph.

Let's consider your bairro1 array:

export const bairro1 = [
  { month: 'Jan', sales: 900 }, { month: 'Fev', sales: 1220},
  { month: 'Mar', sales: 1400 }, { month: 'Abr', sales: 3153 },
  { month: 'Mai', sales: 1321 }, { month: 'Jun', sales: 3132 },
  { month: 'Jul', sales: 1323 }, { month: 'Ago', sales: 2154 },
  { month: 'Set', sales: 1231 }, { month: 'Out', sales: 1212 },
  { month: 'Nov', sales: 1212 }, { month: 'Dez', sales: 1300 }
];

The Hook problem

Then, in a component you use the useState hook to manage the multi select state, as:

const [selectedList, setSelected] = useState ([]);

What that means? In React, components values/state are immutable, so to update their values you need to overwrite them.

In other words, you can't do

const selectedList = [obj01, obj2];

So you need to do

setSelected(oldList => [objs03, ...oldList]);

Ploted it

Now you have your selectedList with your options, you can use it as an array.

<ChartComponent primaryXAxis={{valueType:"Category"}}>
  <Inject services={[LineSeries, Category]}/>
  <SeriesCollectionDirective>
    {selectedList.map((bairro, index) => 
      <SeriesDirective 
        id={`bairro-${index}`}
        type="Line"
        dataSource={bairro}
        xName="month"
        yName="sales"
      />
    )}
  </SeriesCollectionDirective>
</ChartComponent>

What I did? I mapped the selectedList, returning one individual component for each value into the selectedList.

map is a function known as a HOF or High Order Function, that means this function can receive other functions as arguments or return different functions in your body.

A simpler example could be:

const xs = [1, 2, 3, 4];
const doubleIt = x => x * 2;

xs.map(doubleIt); // [2, 4, 6, 8]

In your case we map a anonymous function that takes the element of the array and it's index to return a unique React Component.

You can find more about anonymous (arrow) functions here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

And a cool javascript ES6 guide here: https://flaviocopes.com/es6/

Collectives™ on Stack Overflow

Trying to plot a Line Graph from multiple objects (each object becoming a Line)

1 Answer 1

Pointings and content

"Solution"

The Hook problem

Ploted it

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Pointings and content

"Solution"

The Hook problem

Ploted it

Comments

Your Answer

Sign up or log in

Post as a guest

Related