# Setting up a sparkline chart with a history enabled tag

**URL:** <https://forum.inductiveautomation.com/t/setting-up-a-sparkline-chart-with-a-history-enabled-tag/76955>\
**Category:** Module Development\
**Tags:** vision\
**Created:** [July 26, 2023, 4:49pm UTC](https://forum.inductiveautomation.com/t/setting-up-a-sparkline-chart-with-a-history-enabled-tag/76955 "2023-07-26T16:49:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Asjal\_Ahmad](https://avatars.discourse-cdn.com/v4/letter/a/9e8a1a/32.png) [@Asjal\_Ahmad](https://forum.inductiveautomation.com/u/Asjal_Ahmad)\
**Post date:** [July 26, 2023, 4:49pm UTC](https://forum.inductiveautomation.com/t/setting-up-a-sparkline-chart-with-a-history-enabled-tag/76955/1 "2023-07-26T16:49:51Z")

</div>

Title pretty much says it all. How can I set up a Sparkline chart with its `data` property bound to a tag value that has history enabled (realtime)?

This is the code I have. I'd also appreciate if you can suggest any ideas on how to improve the code.

```auto
package com.inductiveautomation.ignition.examples.ce.components.chemicalstoragetank;

import java.awt.*;
import java.util.Objects;

import com.inductiveautomation.factorypmi.application.components.SparklineChart;
import com.inductiveautomation.ignition.common.tags.model.TagManager;
import com.inductiveautomation.ignition.common.tags.model.TagPath;
import com.inductiveautomation.ignition.common.tags.model.event.InvalidListenerException;
import com.inductiveautomation.ignition.common.tags.model.event.TagChangeEvent;
import com.inductiveautomation.ignition.common.tags.model.event.TagChangeListener;
import com.inductiveautomation.ignition.common.tags.paths.parser.TagPathParser;
import com.inductiveautomation.vision.api.client.components.model.AbstractVisionComponent;

public class SparklineChartComponent extends AbstractVisionComponent implements TagChangeListener {

    private SparklineChart chart;

    private String tagPath;
    private TagManager tagManager;
    private TagPath parsedTagPath;

    private double RANGE_HIGH = 100.0;
    private double RANGE_LOW = 0.0;
    private Color LINE_COLOR = new Color(0,0,255);
    private float LINE_WIDTH = 1.5f;
    private double BORDER_INSET = 0.5;

    public SparklineChartComponent() {

        chart = new SparklineChart();

        chart.setRangeHi(RANGE_HIGH);
        chart.setRangeLo(RANGE_LOW);
        chart.setForeground(LINE_COLOR);
        chart.setLineWidth(LINE_WIDTH);
        chart.setBorderInset(BORDER_INSET);
        add(chart);

    }

    public String getTagPath() {
        return this.tagPath;
    }

    public void setTagPath(String newTagPath) {
        String old = this.tagPath;
        this.tagPath = newTagPath;
        if (!Objects.equals(old, newTagPath) && tagPath != null) {
            subscribeToTagValues();
        }
        firePropertyChange("tagPath", old, newTagPath);
    }

    @Override
    protected void onStartup() {
        super.onStartup();
        tagManager = context.getTagManager();
        if (tagPath != null) {
            subscribeToTagValues();
        }
    }

    @Override
    protected void onShutdown() {
        super.onShutdown();
        tagManager.unsubscribeAsync(parsedTagPath, this);
    }

    private void subscribeToTagValues() {
        try {
            parsedTagPath = TagPathParser.parseSafe(this.tagPath);
            tagManager.subscribeAsync(parsedTagPath, this);
        } catch (Exception e) {
            throw new RuntimeException(e);

        }
    }
    

    @Override
    public void tagChanged(TagChangeEvent tagChangeEvent) throws InvalidListenerException {
        
    }
}

```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [July 26, 2023, 5:08pm UTC](https://forum.inductiveautomation.com/t/setting-up-a-sparkline-chart-with-a-history-enabled-tag/76955/2 "2023-07-26T17:08:06Z")

</div>

I'll push you again to think through why you're doing this. Vision is entirely designed around the user in the designer setting up bindings. A component should _just_ hold data and react to that data changing, not attempt to automatically retrieve data.

That said, if you want to lean on existing facilities as much as possible, it looks like you want to get a [`QueryManager`](https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.30/com/inductiveautomation/factorypmi/application/gateway/QueryManager.html#getInstance()) instance, then register a [`TagHistoryQuery`](https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.30/com/inductiveautomation/factorypmi/application/gateway/TagHistoryQuery.html) created with [`RealtimeTagHistoryQueryParams`](https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.30/com/inductiveautomation/ignition/common/sqltags/history/RealtimeTagHistoryQueryParams.html). That will deliver a Dataset to your [`IQueryResponseListener`](https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.30/com/inductiveautomation/factorypmi/application/gateway/IQueryResponseListener.html) every time the polling re-evaluates.

---

<div class="post-metadata">

**Author:** ![Asjal\_Ahmad](https://avatars.discourse-cdn.com/v4/letter/a/9e8a1a/32.png) [@Asjal\_Ahmad](https://forum.inductiveautomation.com/u/Asjal_Ahmad)\
**Post date:** [July 26, 2023, 5:27pm UTC](https://forum.inductiveautomation.com/t/setting-up-a-sparkline-chart-with-a-history-enabled-tag/76955/3 "2023-07-26T17:27:55Z")

</div>

Is there any way I can embed this spark line chart in another component, and expose the sparkline chart's `data` property to the parent component so that it is available in the vision property editor?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [July 26, 2023, 5:45pm UTC](https://forum.inductiveautomation.com/t/setting-up-a-sparkline-chart-with-a-history-enabled-tag/76955/4 "2023-07-26T17:45:04Z")

</div>

Give your 'parent' component a Dataset property named `data` in the bean info, and 'forward' the `getData`/`setData` calls from the parent component into the inner sparkline.
