Spider chart - Icon in center

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.

Is there any extension supporting the spider chart?

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,

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.



Solution

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.