ChartDirector Support - View Thread 1593745568

ChartDirector Support

Forum Home

Search

Message List Post Message

[Jul-03-2020 11:06] Title Graph with variable Arrow image and Traffic Light (Bill)
- [Jul-03-2020 17:14] Re: Title Graph with variable Arrow image and Traffic Light (Peter Kwan)
  - [Jul-13-2020 09:02] Re: Title Graph with variable Arrow image and Traffic Light (Bill)
    - [Jul-14-2020 00:57] Re: Title Graph with variable Arrow image and Traffic Light (Peter Kwan)
      - [Jul-14-2020 07:37] Re: Title Graph with variable Arrow image and Traffic Light (Bill)
      - [Jul-14-2020 08:55] Re: Title Graph with variable Arrow image and Traffic Light (Bill)

Title Graph with variable Arrow image and Traffic Light

Posted by Bill on Jul-03-2020 11:06

Hi Peter,
    I have attach the graph screenshot. How do I display the following:

1. From Upper-Left in Graph Title portion, How do I display the Arrow image
     Arrow Up - value is 1
     Arrow Horizontal - value is 2
     Arrow Down - value is 3

2. From Upper-Right in Graph Title Portion, How do I display the traffic color
        Green - value is 1
        Yellow - value is 2
        Red - value is 3

Thanks in advance - Bill

Re: Title Graph with variable Arrow image and Traffic Light

Posted by Peter Kwan on Jul-03-2020 17:14

Hi Bill,

You can use BaseChart.addText to add custom shapes or images to anywhere you like in the chart. The following is an example to add custom shapes or images to various part of the chart.

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

For your particular case, you can use custom images for the various arrows, or you can use the ChartDirector built-in arrow symbol. For example:

string shape = "<*img=@arrow(0),width=20,height=20,color=0000FF,edgeColor=888888*>";
if (value == 2)
    shape = "<*img=@arrow(90),width=20,height=20,color=0000FF,edgeColor=888888*>";
else if (value == 3)
    shape = "<*img=@arrow(180),width=20,height=20,color=0000FF,edgeColor=888888*>";
c.addText(3, 0, shape);

Similarly, you can use the built in shape for the circle:

shape = "<*img=@circle,width=20,height=20,color=00FF00,edgeColor=888888*>";
if (value == 2)
    shape = "<*img=@circle,width=20,height=20,color=FFCC00,edgeColor=888888*>";
else if (value == 3)
    shape = "<*img=@circle,width=20,height=20,color=FF0000,edgeColor=888888*>";
c.addText(c.getWidth() - 3, 0, shape, "", 8, 0, Chart.TopRight);

See:

https://www.advsofteng.com/doc/cdnet.htm#BaseChart.addText.htm
https://www.advsofteng.com/doc/cdnet.htm#cdml.htm

Hope this can help.

Regards
Peter Kwan

Re: Title Graph with variable Arrow image and Traffic Light

Posted by Bill on Jul-13-2020 09:02

Im using this code. but it didn't display. not working. Let me know why?

//GRAPH 1 DETAILS (CML)
                XYChart c = new XYChart(1000, 300);
                c.setPlotArea(50, 30, 920, 236, 0xffffff, 0xffffff);
                //Add Legend
                string mytitle,title1,title2,title3;

                if (lblArea.Text.Trim().Length >0)
                {
                    title1 = "-" + lblArea.Text.Trim().Replace("','", ",") + "";
                }
                else
                {
                    title1 = "-CML";
                }

                if (lblPkg.Text.Trim().Length > 0)
                {
                    title2 = "-" + lblPkg.Text.Trim().Replace("','", ",") + "";
                }
                else
                {
                    title2="";
                }

                if (lblLine.Text.Trim().Length > 0)
                {
                    title3 = "-" + lblLine.Text.Trim().Replace("','", ",") + "";
                }
                else
                {
                    title3 = "";
                }

                mytitle = ddKPI.Text + title1 + title2 + title3;
                c.addTitle(mytitle + "[" + lblUOM.Text + "]", "Arial Bold", 12, 0xffffff).setBackground(Convert.ToInt32(GraphColor.Replace("#", "0x"), 16));

                //ARROW display
                int myarrow;
                myarrow = 1;

                string shape = "<*img=@arrow(0),width=20,height=20,color=0000FF,edgeColor=888888*>";
                if (myarrow == 2)
                    shape = "<*img=@arrow(60),width=20,height=20,color=0000FF,edgeColor=888888*>";
                else if (myarrow == 3)
                    shape = "<*img=@arrow(315),width=20,height=20,color=0000FF,edgeColor=888888*>";
                c.addText(c.getWidth() - 3, 0, shape, "", 8, 0, Chart.TopRight);

                //TRAFFIC LIGHT
                int mytraffic;
                mytraffic = 2;

                string tshape = "<*img=@circle,width=20,height=20,color=00FF00,edgeColor=888888*>";
                if (mytraffic == 2)
                    tshape = "<*img=@circle,width=20,height=20,color=FFCC00,edgeColor=888888*>";
                else if (mytraffic == 3)
                    tshape = "<*img=@circle,width=20,height=20,color=FF0000,edgeColor=888888*>";
                c.addText(c.getWidth() - 3, 0, tshape, "", 8, 0, Chart.TopRight);

Re: Title Graph with variable Arrow image and Traffic Light

Posted by Peter Kwan on Jul-14-2020 00:57

Hi Bill,

I have tried the following code, which is modified from your code. It works normally in my case. Both the arrow and the circle symbols are shown.

XYChart c = new XYChart(1000, 300);
c.setPlotArea(50, 30, 920, 236, 0xffffff, 0xffffff);

c.addTitle("Version = " + Chart.getVersion().ToString("x"), "Arial Bold", 12, 0xffffff).setBackground(0x008800);

//ARROW display
int myarrow;
myarrow = 1;

string shape = "<*img=@arrow(0),width=20,height=20,color=0000FF,edgeColor=888888*>";
if (myarrow == 2)
shape = "<*img=@arrow(60),width=20,height=20,color=0000FF,edgeColor=888888*>";
else if (myarrow == 3)
shape = "<*img=@arrow(315),width=20,height=20,color=0000FF,edgeColor=888888*>";
c.addText(3, 0, shape, "", 8, 0, Chart.TopLeft);

//TRAFFIC LIGHT
int mytraffic;
mytraffic = 2;

string tshape = "<*img=@circle,width=20,height=20,color=00FF00,edgeColor=888888*>";
if (mytraffic == 2)
tshape = "<*img=@circle,width=20,height=20,color=FFCC00,edgeColor=888888*>";
else if (mytraffic == 3)
tshape = "<*img=@circle,width=20,height=20,color=FF0000,edgeColor=888888*>";
c.addText(c.getWidth() - 3, 0, tshape, "", 8, 0, Chart.TopRight);

// Output the chart
viewer.Chart = c;

In your original code, the circle and the arrows are both drawn at the top-right corner. The circle overdrawn the arrow, so the arrow is not visible. In my test code above, I move the arrow to the top-left corner.

The circle symbol is supported since ChartDirector 5.1. The CDML arrow symbol is only supported in recent versions of ChartDirector.

Please try my code above. It just draw an empty chart with a title displaying the ChartDirector version and the arrow and circle symbols. Please let me know if it works in your case.

If the code above works, but it does not work in your code, is it possible create a complete example that I can try so I can reproduce the problem? There are many reasons why the symbols are not displayed. For example, the ChartDirector version may be too old, or there may be other things at the same position covering the symbols. With the complete code, we can see how your chart is configured.

Regards
Peter Kwan

Re: Title Graph with variable Arrow image and Traffic Light

Posted by Bill on Jul-14-2020 07:37

Still not showing. I created another graph for testing and only the graph title showing.

below my code and chartdirector version c#.net:
//GRAPH2
                XYChart c2 = new XYChart(1000, 300);
                c2.setPlotArea(50, 30, 920, 236, 0xffffff, 0xffffff);

                c2.addTitle("Version = " + Chart.getVersion().ToString("x"), "Arial Bold", 12, 0xffffff).setBackground(0x008800);

                //ARROW display
                int myarrow;
                myarrow = 1;

                string shape = "<*img=@arrow(0),width=20,height=20,color=0000FF,edgeColor=888888*>";
                if (myarrow == 2)
                    shape = "<*img=@arrow(60),width=20,height=20,color=0000FF,edgeColor=888888*>";
                else if (myarrow == 3)
                    shape = "<*img=@arrow(315),width=20,height=20,color=0000FF,edgeColor=888888*>";
                c2.addText(3, 0, shape, "", 8, 0, Chart.TopLeft);

                //TRAFFIC LIGHT
                int mytraffic;
                mytraffic = 2;

                string tshape = "<*img=@circle,width=20,height=20,color=00FF00,edgeColor=888888*>";
                if (mytraffic == 2)
                    tshape = "<*img=@circle,width=20,height=20,color=FFCC00,edgeColor=888888*>";
                else if (mytraffic == 3)
                    tshape = "<*img=@circle,width=20,height=20,color=FF0000,edgeColor=888888*>";
                c2.addText(c2.getWidth() - 3, 0, tshape, "", 8, 0, Chart.TopRight);

                WebChartViewer2.Image = c2.makeWebImage(Chart.PNG);
                WebChartViewer2.ImageMap = c2.getHTMLImageMap(WebChartViewer2.GetPostBackURL(), "", "title='{dataSetName}: W{xLabel}={value}" + lblUOM.Text + "'");

Re: Title Graph with variable Arrow image and Traffic Light
Posted by Bill on Jul-14-2020 08:55	\| Reply \| Monitor
It works only if I used picture from file. Still good as alternative. Thanks string shape = "<img=/images/KPI_ArrowUp.png,width=20,height=20,color=0000FF,edgeColor=888888>";