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

Message ListMessage List     Post MessagePost Message

  click on the legend and that the line is highlighted
Posted by SoLoPiErDo on Jun-01-2012 03:24
| Reply | Monitor
I have a multi-linear chart with 6 lines that often overlap.

when we put the wanted posters in the legend of each line (onmouseover), will highlight the corresponding line, increase in size, or color change, any action that could be identified visually.

I have no code here: (

But I add 6 layer2 (one per line) and funtion returns the map as a string to be stored in an array.

thank you very much

  Re: click on the legend and that the line is highlighted
Posted by SoLoPiErDo on Jun-01-2012 03:27
| Reply | Monitor
Sorry, is in PHP, miss said this :(

  Re: click on the legend and that the line is highlighted
Posted by Peter Kwan on Jun-02-2012 11:32
| Reply | Monitor
Attachments:
Hi SoLoPiErDo,

In ChartDirector, the charts are drawn on the server side. To modify a chart, you would need to send a request to the server to update the chart.

In the simplest case, you can use an onmouseover handler. When the mouse moves over the legend entry, you can send a request to the server. The server charting script can be designed to draw the chart with a particular line highlighted.

I have attached an example for your reference. The example is modified from the "Custom Clickable Charts" sample code. The charting code is modified so highlight a particular line. The image map for the legend box is configured to request a server update when the mouse moves over a legend entry.

Hope this can help.

Regards
Peter Kwan
customclick.php
<?php
require_once("../lib/phpchartdir.php");

# The data for the line chart
$data0 = array(50, 55, 47, 36, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58,
    59, 73, 77, 84, 82, 80, 84);
$data1 = array(36, 28, 25, 33, 38, 20, 22, 30, 25, 33, 30, 24, 28, 36, 30, 45, 46,
    42, 48, 45, 43, 52, 64, 70);

# The labels for the line chart
$labels = array("Jan-04", "Feb-04", "Mar-04", "Apr-04", "May-04", "Jun-04", "Jul-04",
    "Aug-04", "Sep-04", "Oct-04", "Nov-04", "Dec-04", "Jan-05", "Feb-05", "Mar-05",
    "Apr-05", "May-05", "Jun-05", "Jul-05", "Aug-05", "Sep-05", "Oct-05", "Nov-05",
    "Dec-05");

# Create an XYChart object of size 600 x 360 pixels, with a light blue (EEEEFF)
# background, black border, 1 pxiel 3D border effect and rounded corners
$c = new XYChart(600, 360, 0xeeeeff, 0x000000, 1);
$c->setRoundedFrame();

# Set plotarea at (55, 60) with size of 520 x 240 pixels. Use white (ffffff) as
# background and grey (cccccc) for grid lines
$c->setPlotArea(55, 60, 520, 240, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);

# Add a legend box at (55, 58) (top of plot area) using 9 pts Arial Bold font with
# horizontal layout Set border and background colors of the legend box to Transparent
$legendBox = $c->addLegend(55, 58, false, "arialbd.ttf", 9);
$legendBox->setBackground(Transparent);

# Reserve 10% margin at the top of the plot area during auto-scaling to leave space
# for the legends.
$c->yAxis->setAutoScale(0.1);

# Add a title to the chart using 15 pts Times Bold Italic font. The text is white
# (ffffff) on a blue (0000cc) background, with glass effect.
$title = $c->addTitle("Monthly Revenue for Year 2000/2001", "timesbi.ttf", 15,
    0xffffff);
$title->setBackground(0x0000cc, 0x000000, glassEffect(ReducedGlare));

# Add a title to the y axis
$c->yAxis->setTitle("Month Revenue (USD millions)");

# Set the labels on the x axis. Draw the labels vertical (angle = 90)
$labelsObj = $c->xAxis->setLabels($labels);
$labelsObj->setFontAngle(90);

# Add the data sets to the line layer
$c->addLineLayer($data0, 0xff00ff, "Enterprise");
$c->addLineLayer($data1, 0x00ff00, "Consumer");

$highLight = isset($_GET["highLight"]) ? (int)($_GET["highLight"]) : 0;
$layer = $c->getLayer($highLight);
$layer->moveFront();
$layer->setLineWidth(3);

if (isset($_GET["highLight"])) {
    header("Content-type: image/png");
    print($c->makeChart2(PNG));
    exit();
}

# Create the image
$chart1URL = $c->makeSession("chart1");

# Create an image map for the chart
$chartImageMap = $c->getHTMLImageMap("xystub.php", "",
    "title='{dataSetName} @ {xLabel} = USD {value|0} millions'");

# Create an image map for the legend box
$legendImageMap = $legendBox->getHTMLImageMap("", "", "onmouseover='streamChart({layerId})'");
?>
<html>
<body style="margin:5px 0px 0px 5px">
<script type="text/javascript">
var currentChart = "";
function streamChart(id) {
    document.getElementById("myChart").src = "?highLight=" + id;
}
</script>
<img id="myChart" src="getchart.php?<?php echo $chart1URL?>" border="0" usemap="#map1">
<map name="map1">
<?php echo $chartImageMap?>
<?php echo $legendImageMap?>
</map>
</body>
</html>

  Re: click on the legend and that the line is highlighted
Posted by SoLoPiErDo on Jun-03-2012 18:52
| Reply | Monitor
thank u very much i will try this, unfortunally i dont have source code here and i cant write my function of chart creator, anyway proves this solution and I will write tomorrow if I did well or not my case.

thank you very much, tomorrow rewrit

  Re: click on the legend and that the line is highlighted
Posted by Daniel on Aug-24-2013 05:41
| Reply | Monitor
Hi Peter,

Is there any way to do this in Java?


Thanks.

  Re: click on the legend and that the line is highlighted
Posted by Peter Kwan on Aug-25-2013 00:37
| Reply | Monitor
Attachments:
Hi Daniel,

Yes. The method is the same.

In the simplest case, you can use an onmouseover handler. When the mouse moves over
the legend entry, you can send a request to the server. The server charting script can be
designed to draw the chart with a particular line highlighted.

I have translated the original sample from PHP to JSP/Java for your reference.

Hope this can help.

Regards
Peter Kwan
customclick.jsp
customclick.jsp
3.29 Kb

  Re: click on the legend and that the line is highlighted
Posted by Daniel on Aug-26-2013 22:26
| Reply | Monitor
Hi Peter,

I'm not sending anything to a server, the chart is being drawn locally on the user's machine.
The only exchange is getting the data from a server.  The example in jsp doesn't really
provide a good example on handling mouse events.  An example in just Java would be very
helpful!

Thanks,

Daniel

  Re: click on the legend and that the line is highlighted
Posted by Peter Kwan on Aug-27-2013 02:44
| Reply | Monitor
Attachments:
Hi Daniel,

For desktop programs, it is very simple - just redraw the chart when the mouse is over an legend entry. To detect mouse move over a hot spot, the event to listen to is the HotSpotMotion event. I have attached an example based on Java SWING for your reference.

Hope this can help.

Regards
Peter Kwan
Customclick.java
Customclick.java
3.69 Kb

  Re: click on the legend and that the line is highlighted
Posted by gjlockon on Jun-19-2017 13:01
| Reply | Monitor
I want to know how to finish this work using mfc? thankyou.

  Re: click on the legend and that the line is highlighted
Posted by Peter Kwan on Jun-20-2017 02:12
| Reply | Monitor
Attachments:
Hi gjlockon,

I have just ported the code to MFC as attached.

To try the code, please unzip it, and copy the "helloworld" directory to the "ChartDirector/mfcdemo" subdirectory, which should replace the original "helloworld" sample code in that directory. Then you can start the Visual Studio solution "ChartDirector/mfcdemo/mfcdemo.sln", choose "helloworld" as the start up project, and run it.

(Note: The above project assumes the 32-bit edition of ChartDirector for C++.)

Regards
Peter Kwan
helloworld_highlight_line.zip
helloworld_highlight_line.zip
34.20 Kb

  Re: click on the legend and that the line is highlighted
Posted by gjlockon on Jun-22-2017 17:17
| Reply | Monitor
Hello Peter
Thank you so much for your prompt reply.
I do really appreciate  your  help.
the code works perfectly.
Best regards,
gjlockon