ASE Home Page Products Download Purchase Support About ASE
ChartDirector General
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Real-time chart: separating lines
Posted by Philip on Sep-12-2020 03:28
| Reply | Monitor
I'm working on a project that involves data acquisition (DAQ). The DAQ machine converts analog signals into voltage values. The DAQ machine has 8 channels so there will be 8 lines in the real-time XY chart. On the y-axis is voltage. If the machine that is being monitored is working properly, the values for the 8 lines are about the same so you see a lot of overlap of the lines. If one line has different values it may be hard to see because of all the overlap. Separating the lines would allow a user to inspect an individual line.

There are two solutions:
1. Programmatically add a button that toggles from one graph with 8 lines to 8 vertically stacked graphs with 1 line each. For the 8 graphs the y-axis would still be labelled.

2. Programatically add a dialog to allow a user to make lines visible/invisible. A user could hide 7 lines so only the 8th line is visible. You could then apply measurement cursors to the 8th line to get values.

Are both scenarios possible?

Philip

  Re: Real-time chart: separating lines
Posted by Peter Kwan on Sep-14-2020 19:50
| Reply | Monitor
Hi Philips,

Yes, both scenarios are possible and it is easy to implement with ChartDirector.

The exact details depend on your programming language edition of ChartDirector, and whether you are writing a web or desktop application. You may refer to the "Interactive Financial Chart" below to see how it works in practice:

https://www.advsofteng.com/doc/cdnet.htm#financedemo.htm

On the left side of the above example, there are many controls that can add or move lines.

In brief, if you add 8 lines to the same chart, the code can be like:

void drawChart()
{
..... create chart object as usual .....

layer.addDataSet(data0, 0x5588cc, "Alpha");
layer.addDataSet(data1, 0xee9944, "Beta");
layer.addDataSet(data2, 0x99bb55, "Gamma");
.... add more lines ....

..... display the chart ......
}

You just need to change the above to followings to hide/show individual lines:

void drawChart()
{
..... create chart object as usual .....

if (... checkbox1 is checked ...)
    layer.addDataSet(data0, 0x5588cc, "Alpha");
if (... checkbox2 is checked ...)
    layer.addDataSet(data1, 0xee9944, "Beta");
if (... checkbox3 is checked ...)
    layer.addDataSet(data2, 0x99bb55, "Gamma");
.... add more lines ....

..... display the chart ......
}

No matter what the user does (whether checked or unchecked any text box), your code just need to call "drawChart()" again, and the chart will always reflect what user selection.

To add a toggle between drawing "1 chart with 8 lines" to "8 charts with 8 lines", you just need to writing something like:

void drawChart()
{
    if (... need to draw 8 charts ...)
        draw_8_charts();
    else
        draw_1_chart();
}

The draw_8_charts and draw_1_chart are two functions to draw the 2 kinds of chart.

To draw 8 charts stacked up, you can use a loop to draw 8 individual XY charts, then put them into a MultiChart to stack them up.

Regards
Peter Kwan