46
Views
4
Comments
Solved
Spider chart - Icon in center
Question

Hi all.


Im trying to insert an image in the center of a spider chart.

I have this chart:


What I want is to add the logo of the school in the center of it.

Thanks in advance,

PM.

2018-07-02 08-58-59
Miguel Prego
Solution

Hi Pedro.


In the AdvancedFormat_Init you can add this:


SyntaxEditor Code Snippet

series: [     
      {
        type: 'area',
        name: 'Middle Point',
        marker: {
          symbol: " + SchoolIcon + ",
          width: 50,
          height: 50
        },
          format: '{}'
      }
]


With this, just add a new point to your list of values so that the icon is represented by some data.


Best regards,

Miguel Prego.



UserImage.jpg
Pedro Mota

Miguel Prego wrote:

Hi Pedro.


In the AdvancedFormat_Init you can add this:


SyntaxEditor Code Snippet

series: [     
      {
        type: 'area',
        name: 'Middle Point',
        marker: {
          symbol: " + SchoolIcon + ",
          width: 50,
          height: 50
        },
          format: '{}'
      }
]


With this, just add a new point to your list of values so that the icon is represented by some data.


Best regards,

Miguel Prego.



Hi Miguel.


Thanks for the help, it worked like a charm!!


PM.


2018-09-27 18-20-33
Swatantra Kumar
Champion

Is there any extension supporting the spider chart?

2019-11-01 16-10-49
Nélio Dionisio

Hi Pedro,


Well, put your school logo in the back ground of your container and put the Graph on top of that. So say you have:

This is be in your code and you CSS would look like:


.containerGraph {

    background-image:url(schoolLogo.jpg);

    background-position:center;

    width:700px;

    height:400px;

}

For this to work tho, you must have height and width specified to certain values and the graph must be transparent. If it doesn't work, try to change graphic in the background of the container and the image on top.


I hope it helps,

2018-07-02 08-58-59
Miguel Prego
Solution

Hi Pedro.


In the AdvancedFormat_Init you can add this:


SyntaxEditor Code Snippet

series: [     
      {
        type: 'area',
        name: 'Middle Point',
        marker: {
          symbol: " + SchoolIcon + ",
          width: 50,
          height: 50
        },
          format: '{}'
      }
]


With this, just add a new point to your list of values so that the icon is represented by some data.


Best regards,

Miguel Prego.



UserImage.jpg
Pedro Mota

Miguel Prego wrote:

Hi Pedro.


In the AdvancedFormat_Init you can add this:


SyntaxEditor Code Snippet

series: [     
      {
        type: 'area',
        name: 'Middle Point',
        marker: {
          symbol: " + SchoolIcon + ",
          width: 50,
          height: 50
        },
          format: '{}'
      }
]


With this, just add a new point to your list of values so that the icon is represented by some data.


Best regards,

Miguel Prego.



Hi Miguel.


Thanks for the help, it worked like a charm!!


PM.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.