Business Graphics Tool - Series

Hello All,
I have developed a Graph using the Business Graphics charting tool. The application is a Web Dynpro application.
My graph has to display two lines (or range of values). In order to do that, I have created two Data Series, to which I pass values at run time. The Graph is appearing correctly.
How ever some of the values in both the series are the same. Hence the two lines criss-cross each other. At this point the values displayed on the graph becomes jumbled up.
I also saw an option for creating 'Series' objects. Here we can set whether the labels should appear on the left side of the line, its format etc. etc. But I am not finding a way to interlink the Series object, with the Data Series object. The setting would be like:-
Data Series 1 would be using Series Object 1 (in which the value labels would appear on the left side of the line)
Data Series 2 would be using Series Object 2 (in which the value labels would appear on the right side of the line)
Any help is appreciated. TIA
PKS.

Hi,
the connection between your customizing settings and the data is done using a customizing ID, i.e. tell WD the ID of each series and use exactly the same ID in the chart designer when creating the customizing settings (please note that you can easily rename the default names as desired).
Regards, Kai

Similar Messages

  • Dynamic Values in Business Graphics Tool Tip

    hi,
    I am using business graphics ui element in my webdynpro application.I am able to get the graghical output correctly.I want to have tool tip in my graph so when I place the cursor on a point, the tool tip should give the corresponding value.I have used the following code
    try
         String[] catLabels = {
                        "Team 1", "\1Tomoko Akino", "\1Hans Bosch", "\1Marvin Smith",
                        "Team 2", "\1Jose Vega", "\1Bao Yin", "Out of office" };
            String[][] pointCustomizing = {
                        { "approved", "cancelled", "approvedPartTime" },
                        { "approved" },
                        { "approved" },
                        { "sent", "approvedPartTime", "notsentPartTime", "notsent"},
                        { "approved", "zSeveralEntries", "zSeveralEntries",
                          "zSeveralEntries", "zSeveralEntries", "zSeveralEntries",
                          "zSeveralEntries" },
                        { "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice" }
            String[][] pointLabels = {
                        { "1", "2", "2", "2", "4", "3", "3", "3", "1", "1", "2", "1",
                          "2", "1", "1" }
            String[][][] timeValues = {
                        { { "20020528", "20020606" }, { "20020606", "20020608" },
                          { "20020610", "20020611" } },
                        { { "20020531", "20020606" } },
                        { { "20020607", "20020613" } },
                        { { "20020527", "20020601" }, { "20020606", "20020607" },
                          { "20020612", "20020613" }, { "20020617", "20020619"} },
                        { { "20020531", "20020606" }, { "20020531", "20020601" },
                          { "20020601", "20020602" }, { "20020602", "20020603" },
                          { "20020603", "20020604" }, { "20020604", "20020605" },
                          { "20020605", "20020606" } },
                        { { "20020527", "20020528" }, { "20020528", "20020529" },
                          { "20020529", "20020530" }, { "20020530", "20020531" },
                          { "20020531", "20020601" }, { "20020603", "20020604" },
                          { "20020604", "20020605" }, { "20020605", "20020606" },
                          { "20020606", "20020607" }, { "20020607", "20020608" },
                          { "20020610", "20020611" }, { "20020611", "20020612" },
                          { "20020612", "20020613" }, { "20020617", "20020618" },
                          { "20020618", "20020619" }}
            String s[]={"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14",};
            IPrivateSBusinessGraphicsSampleView.ICategoryNode catNode = wdContext.nodeCategory();
            for (int catIndex = 0; catIndex < catLabels.length; ++catIndex)
               IPrivateSBusinessGraphicsSampleView.ICategoryElement  catElement = catNode.createCategoryElement();
               catNode.addElement(catElement);
               catElement.setDescription(catLabels[catIndex]);
            // loop over series
            IPrivateSBusinessGraphicsSampleView.ISeriesNode seriesNode = wdContext.nodeSeries();
            for (int seriesIndex = 0; seriesIndex < timeValues.length; ++seriesIndex)
               IPrivateSBusinessGraphicsSampleView.ISeriesElement seriesElement = seriesNode.createSeriesElement();
               seriesNode.addElement(seriesElement);
               // set series attributes (...)
               IPrivateSBusinessGraphicsSampleView.IPointNode pointNode = seriesElement.nodePoint();
               // loop over points
               for (int pointIndex = 0; pointIndex < timeValues[seriesIndex].length; ++pointIndex)
                 IPrivateSBusinessGraphicsSampleView.IPointElement
                           pointElement = pointNode.createPointElement();
                 pointNode.addElement(pointElement); 
                 String ename = s[pointIndex];
                 wdComponentAPI.getMessageManager().reportSuccess("name:"+ename);
                 pointElement.setStartValue(timeValues[seriesIndex][pointIndex][0]);
                 pointElement.setEndValue(timeValues[seriesIndex][pointIndex][1]);
                 pointElement.setCuId(pointCustomizing[seriesIndex][pointIndex]);
                 pointElement.setLabel(pointLabels[seriesIndex][pointIndex]);    
                 pointElement.setToolTip(ename );
         catch(Exception e)
                 wdComponentAPI.getMessageManager().reportSuccess("exc2:"+e);
    By the above code ,I am getting the tool tip with the value "a" in all locations.
    But I need to have different values in the tooltip corresponding to the location.
    Please Help....
    Thanks in advance,
    Shamila

    hi,
    Still  I did not get the dynamic tool tip..........
    In wdDoInit() I have written the following code
    try
         String[] catLabels = { "Team 1", "\1Tomoko Akino", "\1Hans Bosch", "\1Marvin Smith",
                   "Team 2", "\1Jose Vega", "\1Bao Yin", "Out of office" };
            String[][] pointCustomizing = {
                        { "approved", "cancelled", "approvedPartTime" },
                        { "approved" },
                        { "approved" },
                        { "sent", "approvedPartTime", "notsentPartTime", "notsent"},
                        { "approved", "zSeveralEntries", "zSeveralEntries",
                          "zSeveralEntries", "zSeveralEntries", "zSeveralEntries",
                          "zSeveralEntries" },
                        { "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice", "outOfOffice",
                          "outOfOffice", "outOfOffice", "outOfOffice" }  };
                    String[][] pointLabels = {{ " ", " ", " " },{ " " },{ " " },{ " ", " ", " ", " "},{ " ", " ", " ", " ", " ", " ", " " },
                                  { "1", "2", "2", "2", "4", "3", "3", "3", "1", "1", "2", "1", "2", "1", "1" } };
                  String[][][] timeValues = {{        { "20020528", "20020606" },
                          { "20020606", "20020608" },
                          { "20020610", "20020611" } },
                        {  { "20020531", "20020606" } },
                        {   { "20020607", "20020613" }  },
                        {   { "20020527", "20020601" },
                          { "20020606", "20020607" },
                          { "20020612", "20020613" },
                          { "20020617", "20020619"} },
                        { { "20020531", "20020606" }, { "20020531", "20020601" },
                          { "20020601", "20020602" }, { "20020602", "20020603" },
                          { "20020603", "20020604" }, { "20020604", "20020605" },
                          { "20020605", "20020606" } },
                        { { "20020527", "20020528" }, { "20020528", "20020529" },
                          { "20020529", "20020530" }, { "20020530", "20020531" },
                          { "20020531", "20020601" }, { "20020603", "20020604" },
                          { "20020604", "20020605" }, { "20020605", "20020606" },
                          { "20020606", "20020607" }, { "20020607", "20020608" },
                          { "20020610", "20020611" }, { "20020611", "20020612" },
                          { "20020612", "20020613" }, { "20020617", "20020618" },
                          { "20020618", "20020619" }}  };
            String s[]={"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14",};
            IPrivateSBusinessGraphicsSampleView.ICategoryNode catNode = wdContext.nodeCategory();
            IPrivateSBusinessGraphicsSampleView.ICategoryElement  catElement;
            for (int catIndex = 0; catIndex < catLabels.length; ++catIndex)
                catElement = catNode.createCategoryElement();
               catNode.addElement(catElement);
               catElement.setDescription(catLabels[catIndex]);
             // loop over series
            IPrivateSBusinessGraphicsSampleView.ISeriesNode seriesNode = wdContext.nodeSeries();
            for (int seriesIndex = 0; seriesIndex < timeValues.length; ++seriesIndex)
               IPrivateSBusinessGraphicsSampleView.ISeriesElement seriesElement = seriesNode.createSeriesElement();
               seriesNode.addElement(seriesElement);
               // set series attributes (...)
               IPrivateSBusinessGraphicsSampleView.IPointNode pointNode = seriesElement.nodePoint();
               IPrivateSBusinessGraphicsSampleView.IPointElement  pointElement;
               // loop over points
               for (int pointIndex = 0; pointIndex < timeValues[seriesIndex].length; pointIndex++)
                 //IPrivateSBusinessGraphicsSampleView.IPointElement
                 pointElement = pointNode.createPointElement();
                 pointNode.addElement(pointElement); 
                 String ename = s[pointIndex];
                  wdComponentAPI.getMessageManager().reportSuccess("name:"+ename);
                 pointElement.setStartValue(timeValues[seriesIndex][pointIndex][0]);
                 pointElement.setEndValue(timeValues[seriesIndex][pointIndex][1]);
                 pointElement.setCuId(pointCustomizing[seriesIndex][pointIndex]);
                 pointElement.setLabel(pointLabels[seriesIndex][pointIndex]);    
                  pointElement.setToolTip(ename );
    catch(Exception e){        wdComponentAPI.getMessageManager().reportSuccess("exc2:"+e);    }
    In wdDoModifyView() I have written the following code
    try
         IWDBusinessGraphics graph = (IWDBusinessGraphics)view.getElement("BusinessGraphics");
         IWDAbstractSeries allSeries[] = graph.getSeriesList();
         IWDSimpleSeries series;
         wdThis.wdGetAPI().getComponent().getMessageManager().reportSuccess("length : "+allSeries.length+" value:"+allSeries[0]);
         for(int j=0;j<allSeries.length;j++)
           series = (IWDSimpleSeries)allSeries[j];
          for(int i=0;j<wdContext.nodeSeries().size();i++)
              wdContext.nodeSeries().setLeadSelection(i);
              series.setTooltip(series.getValue());
      catch(Exception e)
         wdThis.wdGetAPI().getComponent().getMessageManager().reportSuccess("exc modify :"+e);
    The node structure is
    Root Node
    >Category>Description
    >Series>Point-->CuId
    >Series>Point-->endvalue
    >Series>Point -->Startvalue
    >Series>Point -->label
    >Series>Point --->Tooltip
    In BusinessGraphis seriesSource-Series node ,tooltip-Series.Point.ToolTip is mapped
    In Category description-Category.Description is mapped
    In Series pointsource-Series.Point, tooltip-series.point.tooltip is mapped
    In Point CustomisingId-eries.point.cuId.label-Series.label, tooltip-series.point.Tooltip,valuesource -series.point is mapped
    In Numericvalue value-series.point.startvalue is mapped
    In Numericvalue value-series.point.endvalue is mapped
    When I deploy my application I am getting <b>java.lang.ClassCastException</b> Exception at the line  <b>series = (IWDSimpleSeries)allSeries[j];</b>
    What is reaseon?.....
    Please help..............
    I want to get dynamic value in the tool tip of the graph.
    Thanks in advance,
    Shamila,

  • Business graphics: customize x axes

    Hi all,
      I have a special requirement from a customes and I don't know how to satisfy this.
    I have successfully implemented a Business graphic with series (not simpleseries) and now I need to customize the x axes which contains the hours of 1 month.
    The customer requirement is to have a label and the corresponding grid line only each sunday at 12:00:00.
    I'm trying with Chart Designer with no luck.
    How can I achieve this?
    Thanks
    Stefano

    >
    Kai Gutenkunst wrote:
    > Hi,
    > you use a TimeAxis in your chart; is that correct?
    > Then you can use a value range for displaying such a line (and a caption).
    > In the chart designer right-click on TimeAxis-GridLine and create a new value range. Set the Start and End properties to the desired date/time and fill the property Caption.
    > Regards, Kai
    Hi Kay,
      currently I don't use a time axis because reading the documentation I was convinced that it is only for graphics like gannt and similar.
      In my case I need 2 axes, the x axes is for time (quarter hour) and the y axes is for values. The table rapresenting the values is like this:
    Time   Value
    00:15   287
    00:30   290
    00:45   302
    01:00   299
    01:15   306
    Should I use time TimeAxis?
    Thank you
    Stefano

  • How to use series in business graphic ui element

    Hi All,
    How to use the series in business graphic ui element? my requirement is i have to display the sales in selected months in graph(these values dont know at design time).
    Regards
    Srikanth

    Hi,
    Use the dynamic node  and bind this node to the BG source node and series nodes.
    Create a node and bind this node to the BG source and the value that you want to shown in series has to be bound to that attribute of the node and similarly with the category.
    Check out for the dynamic node creation and bind this node to the BG.
    Regards,
    Lekha.

  • Business Graphics : Set label for a Simple Series

    I need to set label to simple series of Business graphics object. Since the Label property is not bindable; i am looking for the alternative way to achieve this. (Any attempt to pass the context would give error msg: Method bindLabel( String) is undefined for the type IWDSimpleSeries)
    I want to have a string value in each points in graph (Line Graph), not i legend.
    tips will be highly appreciated.
    Thanks,
         Vinod V

    Hi Vinod,
    The label property for IWDPoint should solve your purpose.
    IWDPoint API 'label' property - This property is used to specify an optional text to be displayed for a point in a business graphic.
    Refer SAP NetWeaver Library http://help.sap.com/saphelp_nw04s/helpdata/en/1f/20ef3d5e10af5ee10000000a114084/frameset.htm
    Kind Regards,
    Nitin
    Edited by: Nitin Jain on Apr 8, 2009 4:40 PM

  • Business Graphics : Display values for simple series ?

    Hi ,
    I have a some 5 simple series per category.. I am using a column chart . I would like to display the numerical values on top of each of the columns, ? How can i do it ?
    And is there any proper documentation on Business Graphics UI element other than the help.sap and weblogs on the sametopic ?
    Thanks and Regards
    Bharathwaj

    Hi ,
    Thanks for the answer.. By trial and error I had figured out the values.. but am stuck in another problem..
    I have two points created in the chart designer.. each one has its own color.. Now am using this to change the color of a single series .. depending on some value.. point 1 or point 2 will be selected..
    In this scenario ,my legend still shows me the old ones i.e just an yellow icon..
    If i add more info and captions.. for points.. I get .. the proper legend.. But the default legend set also exists. Any ideas on how to remove this .. or
    to display the proper legend in some other way..
    Thanks and Regards
    Bharathwaj..

  • Business Graphics- tooltip with series values

    Hi all,
    I'm using the Business Graphics UI element.
    I have a simple series and I want to show the series' values in the tooltip of the series.
    However, the tooltip property is not bindable for simple series.
    I tried using Series (not simple series), the tooltip works but I get multiple values for each category.
    See attached snapshot (I want the graph to look like the left graph but with tooltips...)
    http://img70.imageshack.us/img70/2977/businessgraphicsop4.jpg
    Basically, I need to see the values in a tooltip on a category based chart.
    Is it possible to create category based chart by using Series and not SimpleSeries?
    How do I solve it?
    Thanks,
    Omri

    Hi,
    I've change the context a little and now it's looks like this:
    Context:
    Category (Node, singleton)
    --> Series (Node, non singleton)
    > value (Value attribute)
    -->Text (Value attribute)
    UI: (UI Element, property, propertyValue)
    Business Grpahics -- seriesSource -- Category
    --Category -- description -- Category.txt
    --Series -- label -- Category.txt
    --Series -- pointSource -- Category.Series
    SeriesPoint -- tooltip -- Category.Series.Value
    SeriesPoint -- valueSource -- Category
    NumericValue -- value -- Category.Series.Value
    Thanks,
    Omri

  • Business Graphics - Series Label

    Hi,
    I have 1 Category and 4 series in a Business Graphics. I want to display the Series Labels dynamically, and i have to map to the Context Variables for the Labels. But, i am not seeing any option to map the Label property to the Context Variable.
    Any Ideas? Please let me know.
    Thanks

    Hi,
    I assume you are currently using the SimpleSeries in your application. Try to use Series with Points und Values. It is more complicated, but gives you more possibilities such as binding labels etc.
    Hope that helps
    Jens

  • Business graphics/series:series/Point" Role "Values":A minimum 1 object(s)

    Hi All,
    I am getting an error:
    Webdynpro generation: metadata constraint of component component_name is violated: Point "// WebDynpro/View:com.domain.ProjectViewName/RootUIelementcontainer/...../ business graphics/series:series/Point" Role "Values":A minimum 1 object(s) is required.
    I am using pie chart for graphics.
    Thanks and regards,
    Hanif Kukkalli

    Hi ,
    When you create a series , you have to create a series -> series_point->point ->numerical or time value..
    Blogs by Marcin Galczynski
    /people/sap.user72/blog/2006/05/01/advanced-business-graphics--time-scatter
    Or you can use a simple series
    /people/sap.user72/blog/2005/03/23/business-graphics-in-webdynpro
    Regards
    Bharathwaj

  • How to add series to Business Graphics control dynamically?

    Hi Experts,
    How to add series to Business Graphics control dynamically?
    I tried the method add_series( ) but could not use it properly.
    If you have any clues of using it, let me know.
    I need it urgently.
    Best Regards,
    Arti.

    I'm not sure what ADD_SERIES method you are refering to. The only programable API for the Business Graphics that I found was this one:
    http://help.sap.com/saphelp_nw70/helpdata/EN/42/e61cd068dc3ee4e10000000a1553f7/frameset.htm
    I've not ever tried it, but you not just add the series UI element like any other dynamic UI manipulation during the WDDOMODIFYVIEW?
    http://help.sap.com/saphelp_nw70/helpdata/EN/11/ba74412cba127de10000000a155106/frameset.htm

  • Setting series color in the Business Graphics UI element

    Hi all,
    I'm using the Business Graphics UI element in my Web Dynpro application.
    I set the color for various properties using chart designer, then I add the generated XML in the doModifyView method: bg.setDirectCustomizing(xml file) and most of it works.
    However, when I change the series' color, I don't see any change in the xml file (see snapshot).
    http://img90.imageshack.us/my.php?image=graphjy1.jpg
    My xml starts with <SAPChartCustomizing> and ends with </SAPChartCustomizing>.
    How can I set the series' color using the custom xml file?
    Thanks,
    Omri

    Hi,
    as the connection between your data and the customizing settings works via IDs you have to make sure that you set exactly the same ID for a data series as defined in the chart designer.
    In case that you use point customizing make sure that you do not set an ID for the points of your series. Instead set the series customizing ID for the series only! Keep in mind that point customizing always overwrites series customizing if both are defined.
    Regards, Kai

  • Problem with Business Graphics

    Hai,
    I am using Business graphics , I Used to display the simple series in a <b>coloumns</b> graph.
    I want to display the total amount of the graph in top of every coloumn..
    I want to display the value of the coloumn at the top of the coloumn.
    i need the above graph as
    3
    2
    1
       |----
    How to display the values in graph like this.....
    regards,
    Message was edited by: Naga Raju Meesala

    hai,
      my context structure is like this
        +ABC
           series2(double)
           series3(double)
           series4(double)
           series5(double)
           series6(double)
    My UIElement Structuer
         +BG1
            Category1
             SimpleSeries2
             SimpleSeries3
             SimpleSeries4
             SimpleSeries5
             SimpleSeries6
    code is like this..
    IPrivateFBGAppView.IAbcNode aNode = wdContext.nodeAbc();
         IPrivateBGAppView.IAbcElement elm;
    elm = wdContext.createAbcElement();
         elm.setCategoryText("Cat");
            elm.setSeries2(32);     
            elm.setSeries3(23);
            elm.setSeries4(45);
            elm.setSeries5(32);
         elm.setSeries6(18);
         al.add(elm);
    regards,
    Message was edited by: Naga Raju Meesala

  • Problem with Business Graphic:

    Hi Everybody!
    I am working with a UI control Business Graphic in WebDynpro Java,
    I need to change the text of the legend, and is taking an automatic value, what is the property in the Chart Designer where I can adjust this?
    Thanks in advance for your help.
    Edited by: Briger Palacios on Jul 6, 2011 11:16 PM

    Hi Briger,
    For Changing ur own legend , just write the label property of "SimpleSeries" ,which comes under  your "BusinessGraphics" .
    As many simple series will be there, that much no of legend is require, so just write your label of each simple series.
    if any doubt , plz let me knw.
    Regards
    Brajesh Kumar

  • I want to display total count on the top of a Column in  business graphics

    Hi All ,
        How can I display total count of the column say for example no. of employees in a series of column chart type in business graphics.
    Any type of help would be much appreciated.
    Thanks
    Uday

    Hi Vishweshwara,
    following is the code i wrote. please check the correctness of the code.
    int seriescount = 0;
    for(int i=0;i<nodesize;i++){
    IGraphDataElement catele = gdNode.createGraphDataElement();
    switch(i){
    case 0:   
       if(wdContext.currentContextElement().getQ().equals("Q1")){
         catele.setCategory("Q1");
           catele.setKRA_Series1(Q1_KRA);
           catele.setApp_Pln_Series2(Q1_AP);
           catele.setRev_App_Series3(Q1_RA);
           catele.setEnd_Rev_Series4(Q1_ERP);
           catele.setApp_Procss_Series5(Q1_AIP);
           catele.setApp_overall_Series6(Q1_AOP);
           seriescount = seriescount+1; break;}
            break;
    case 1:       
       if(wdContext.currentContextElement().getQ().equals("Q2")){
           catele.setCategory("Q2");
           catele.setKRA_Series1(Q2_KRA);
           catele.setApp_Pln_Series2(Q2_AP);
           catele.setRev_App_Series3(Q2_RA);
           catele.setEnd_Rev_Series4(Q2_ERP);
         catele.setApp_Procss_Series5(Q2_AIP);
         catele.setApp_overall_Series6(Q2_AOP);
            seriescount = seriescount+1; break; }
                 break;
    case 2:       
    if(wdContext.currentContextElement().getQ().equals("Q3")){
         catele.setCategory("Q3");
         catele.setKRA_Series1(Q3_KRA);
         catele.setApp_Pln_Series2(Q3_AP);
         catele.setRev_App_Series3(Q3_RA);
         catele.setEnd_Rev_Series4(Q3_ERP);
         catele.setApp_Procss_Series5(Q3_AIP);
         catele.setApp_overall_Series6(Q3_AOP);
         seriescount = seriescount+1; break;}
                 break;
    case 3:   
    if(wdContext.currentContextElement().getQ().equals("Q4")){
         catele.setCategory("Q4");
            catele.setKRA_Series1(Q4_KRA);
         catele.setApp_Pln_Series2(Q4_AP);
         catele.setRev_App_Series3(Q4_RA);
         catele.setEnd_Rev_Series4(Q4_ERP);
         catele.setApp_Procss_Series5(Q4_AIP);
         catele.setApp_overall_Series6(Q4_AOP);
            seriescount = seriescount+1; break;}
                 break;
    case 4: if(wdContext.currentContextElement().getQ().equals("All")){
           wdContext.nodeGraphData().invalidate();
         wdContext.currentContextElement().setGraphVisibility(WDVisibility.NONE);
         wdThis.onActiondropdownaction(wdEvent);
    }default:
    wdContext.nodeGraphData().addElement(catele);
    Thanks
    Uday

  • Legend not appearing for Chart Type columns/bars in business graphics

    Hi Experts,
    I'm not able to make the legend appear in web dynpro screen.As such graphs is coming but the legends are not appearing at runtime. When i customize the graph using t-code 'BS_ANLY_CD'  or right-click on business graphics, the legends are appearing in customizing preview but not in runtime.
    Could anybody help me out in this issue?
    Below is the screenshot of the same.
    Thanks in advance.
    Regards,
    Bob.

    Its solved .Solution is below.
    You just need to add the label description for both the series then the legend will automatically come as shown below.

Maybe you are looking for