Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
igDataChart with two dimensional legend
posted

I want to create a scatter data chart with two dimensional legend.

For Edit fiddle - JSFiddle - Code Playground it will generate with single dimensional like below

For the custom data

[{
    Country: "US",
    Element: "A",
    Population: 197,
    Population_Unit: "1,000,000 People",
    Value: 94323,
    Value_Unit: "1,000,000 Int. $",
    Year: 1964
  }, {
    Country: "US",
    Element: "A",
    Population: 194,
    Population_Unit: "1,000,000 People",
    Value: 93700,
    Value_Unit: "1,000,000 Int. $",
    Year: 1963
  }, {
    Country: "USA",
    Element: "B",
    Population: 191,
    Population_Unit: "1,000,000 People",
    Value: 90275,
    Value_Unit: "1,000,000 Int. $",
    Year: 1962
  }, {
    Country: "USA",
    Element: "A",
    Population: 189,
    Population_Unit: "1,000,000 People",
    Value: 89816,
    Value_Unit: "1,000,000 Int. $",
    Year: 1961
  }]

How to custom the legend to achieve it based on Country & ElementA to show like below which show as table:

Its result show Country  as first column and show Element as first row and then draw different graph for different county and different color for different Element.

Parents
  • 740
    Offline posted

    Hello Edward,

    I have been looking into your question and regarding the following:

    How to custom the legend to achieve it based on Country & ElementA to show like below which show as table:

    I assume that an image that describes the desired result should be shown below this sentence, however, it seems that it is not attached.

    Having this in mind, to ensure that your question is addressed correctly, could you please provide further details on the exact requirements? If possible, it would be great if you could try to attach the image again.

    Additionally, I have prepared a small sample trying to demonstrate a possible configuration and it could be found here.

    Please let me know if this is an accurate demonstration of what you are trying to achieve.

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Software Developer

  • 30
    Offline posted in reply to Riva Ivanova

    It was confused that my image lost again.

    For current result, the image is here Current Result

    The Expected result is https://i.sstatic.net/4aYObfCL.png

    I am wondering how to custom the legend based on the original source data, instead of only showing the X, Y data.

  • 740
    Offline posted in reply to Edward Zhou

    Hello Edward,

    Thank you for following up!

    I have been looking into your additional question:

    I am wondering how to custom the legend based on the original source data, instead of only showing the X, Y data.

    And what I can say, as mentioned in our Data Legend topic here, is that:

    The igDataLegend is a component that works much like the Legend, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot area of the igCategoryChart and has a persistent state that remembers the last hovered point when the user's mouse pointer exits the plot area. It displays this content using a set of three type of rows and four types of columns.

    Having the abovementioned in mind, the igDataLegend does provide options for customizations such as value formatting (sections Data Legend Value Formatting & Data Legend Value Mode) and styling (section Data Legend Styling), however, the displayed values are predefined based on the provided data chart and they update based on the mouse movement. More useful information on how the values are displayed could be found in the Data Legend Rows and Data Legend Columns sections.

    Additionally, regarding the data chart display requirements, unfortunately, it seems that the provided links cannot be accessed.

    /community/resized-image/__size/900x500/__key/communityserver-discussions-components-files/1028/8054.access.JPG

    I am not sure why your initial image was not displayed, however, in order for me to attach the above image link, I performed the following steps:

    Click the "Insert" button.
    Click the "Insert image/video/file" button.
    Select "File Upload" from the "From" option.
    Click the "Browse" button.
    Adjust the dimensions.
    Click the "OK" button.
    Click on the added image and the click the "Convert to link" option.
    (Please note that there is a size limit of 1 MB.)

    Also, you have mentioned:

    Its result show Country  as first column and show Element as first row and then draw different graph for different county and different color for different Element

    Could you please clarify what you refer to with "first column" and "first row" in the context of a scatter data chart?

    I have tried preparing a sample by following your clarifications, however, without a proper demonstration of the exact requirements, e.g., in the form of an image/screenshot, it is hard to determine what steps I should take to provide a possible solution.

    Please let me know if the attached image link is working as expected and you are able to open and view its content. If yes, please perfom the abovementioned steps in order to attach an image link like the above. However, if you continue to experience this or similar behavior, we could continue our discussion in a private support case.

    Thank you for your cooperation. Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Software Developer

  • 30
    Offline posted in reply to Riva Ivanova

    Can you access this link  https://i.sstatic.net/4aYObfCL.png which is my expected result?

    The first column is value from Country, and first row is value from Element.

    I have checked the Data Legend topic, could you share the demo for custom series row&value column?

    In conclusion, I need the legend show as table which values are from source,

Reply Children
No Data