This is a migrated thread and some comments may be shown as answers.

How can i sync the time frame of two charts

1 Answer 63 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Fabrizio Paolo
Top achievements
Rank 1
Fabrizio Paolo asked on 27 Oct 2020, 10:29 AM

Hi, 

I just want to know if it's possible to show the same time frame in two charts, this means that if the time frame of one chart is changed the second one update automatically.

 

I'll post here my code

const GraficoWFP = () => {
 
    return (
        <div style={{ paddingLeft: "12,5%", paddingRight: "12,5%" }}>
            <div style={{ display: "inline-block", padding: "5px" }}>
                <div className="col-6">
                    <div className="k-card">
                        <Chart
                            style={{
                                height: 450,
                                width: 500,
                                cursor: "ew-resize"
                            }}
                            pannable={{ lock: "y" }}
                        >
                            <ChartTitle text="Afghanistan" />
                            <ChartLegend position="bottom" orientation="horizontal" />
                            <ChartTooltip shared={true} render={sharedTooltipRender} />
                            <ChartValueAxis>
                                <ChartValueAxisItem title={{ text: "Rainfall (mm)" }} />
                            </ChartValueAxis>
                            <ChartCategoryAxis>
                                <ChartCategoryAxisItem
                                    categories={cat}
                                    crosshair={crosshair}
                                    axisCrossingValue={0 && cat.length}
                                    min={36}
                                    max={72}
                                    justified={!0}
                                    labels={{ content: (item) => { return labels[item.value] } }}
                                />
                                <ChartCategoryAxisItem
                                    categories={totalMonths}
                                    justified={!1}
                                    min={12}
                                    max={24}
                                />
                            </ChartCategoryAxis>
                            <ChartSeries>
                                {seriesBar.map((item, idx) => (
                                    <ChartSeriesItem
                                        key={idx}
                                        type="column"
                                        tooltip={{ visible: true }}
                                        data={item.data}
                                        name={item.name}
                                        color={item.color}
                                    />
                                ))}
                            </ChartSeries>
                        </Chart>
                    </div>
                </div>
            </div>
            <div style={{ display: "inline-block", padding: "5px" }}>
                <div className="col-6">
                    <div className="k-card">
                        <Chart
                            style={{
                                height: 450,
                                width: 500,
                                cursor: "ew-resize"
                            }}
                            pannable={{ lock: "y" }}
                        >
                            <ChartTitle text="Afghanistan" />
                            <ChartLegend position="bottom" orientation="horizontal" />
                            <ChartTooltip shared={true} render={sharedTooltipRender} />
                            <ChartValueAxis>
                                <ChartValueAxisItem title={{ text: "Variation from Average" }} />
                            </ChartValueAxis>
                            <ChartCategoryAxis >
                                <ChartCategoryAxisItem
                                    categories={cat}
                                    crosshair={crosshair}
                                    axisCrossingValue={0 && cat.length}
                                    min={36}
                                    max={72}
                                    justified={!0}
                                    labels={{ content: (item) => { return labels[item.value] } }}
                                />
                                <ChartCategoryAxisItem
                                    categories={totalMonths}
                                    justified={!1}
                                    min={12}
                                    max={24}
                                />
                            </ChartCategoryAxis>
                            <ChartSeries>
                                {seriesLine.map((item, idx) => (
                                    <ChartSeriesItem
                                        key={idx}
                                        type="line"
                                        tooltip={{ visible: true }}
                                        data={item.data}
                                        name={item.name}
                                        color={item.color}
                                        markers={{ size: 2 }}
                                    />
                                ))}
                            </ChartSeries>
                        </Chart>
                    </div>
                </div>
            </div>
 
        </div>
    )
}

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 28 Oct 2020, 08:31 AM

Hello, Fabrizio,

This can be done by binding both Charts to the same variable in the state that controls the timeframe.

If you share more details on how the time frames are determined I can provide more to the point suggestion.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
Fabrizio Paolo
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or