Panning is applied with timeline/custom button
Panning can only be used with graphs having the construct as Graph, Gantt and Timeline.
Note: Panning with reflow
is now deprecated and will be removed in future Major Version Bump. Please use reflowMultipleDatasets
.
// axisData
const graphConfiguration = {
bindTo: "#root",
axis: {
x: {
type: Carbon.helpers.AXIS_TYPE.TIME_SERIES,
label: "Datetime",
lowerLimit: new Date(2016, 0, 1, 9, 0).toISOString(),
upperLimit: new Date(2016, 0, 1, 15, 59).toISOString()
},
y: {
label: "Temperature (degF)",
lowerLimit: 90,
upperLimit: 106
}
}
};
// graphData
const dataSet = {
key: "uid_1",
label: {
display: "Oral Temperature"
},
shape: Carbon.helpers.SHAPES.RHOMBUS,
color: Carbon.helpers.COLORS.BLUE,
values: [
{
x: new Date(2016, 0, 1, 10, 5).toISOString(),
y: 96.5
},
{
x: new Date(2016, 0, 1, 12, 15).toISOString(),
y: 98.7
},
{
x: new Date(2016, 0, 1, 14, 15).toISOString(),
y: 97.4
}
]
};
// panData
const panData = {
key: "uid_1", // key should already be present in the graph
values: [
{
x: new Date(2016, 0, 1, 10, 5).toISOString(),
y: 95
},
{
x: new Date(2016, 0, 1, 12, 15).toISOString(),
y: 92
},
{
x: new Date(2016, 0, 1, 14, 15).toISOString(),
y: 98
}
]
};
export const renderLineWithPanning = (id) => {
const axisData = graphConfiguration;
axisData.pan = {
enabled: true
};
const graphData = dataSet;
graphData.regions = [regions[0]];
const createGraph = () => {
graph.reflow();
};
const graph = Carbon.api.graph(axisData);
graph.loadContent(Carbon.api.line(graphData));
// Additional data-sets to be loaded here only, like:
graph.loadContent(Carbon.api.line(/* Data array */));
axisData.axis = graph.config.axis;
createPanningControls(id, {
axisData,
creationHandler: createGraph
});
return graph;
};
export const renderLinePanningWithDynamicData = (id) => {
const axisData = graphConfiguration;
axisData.pan = {
enabled: true
};
const graphData = dataSet;
graphData.regions = [regions[0]];
const createGraph = () => {
graph.reflow(panData);
};
const graph = Carbon.api.graph(axisData);
graph.loadContent(Carbon.api.line(graphData));
// Additional data-sets to be loaded here only, like:
graph.loadContent(Carbon.api.line(/* Data array */));
axisData.axis = graph.config.axis;
createPanningControls(id, {
axisData,
creationHandler: createGraph
});
return graph;
};
Property Name | Expected | Default | Description |
---|---|---|---|
enabled | boolean | undefined | Set to true when panning is needed |
- If panning is not provided then enabled will be false.