How to Apply CSS rules to Charts

OL Connect Professional Designer
1

My client wants to keep the graphics look identical to the one used on the GMC. To keep the same appearance and size of the bars I think I need to apply some css rule to do this. Can anyone help me with this?

Img_Post
Img_Post386×659 49.3 KB

Any help would be appreciated.

2

Hi @GB1,

First of all, welcome on our OL Learn forum!

IMPORTANT
Please read this ‘post (link)’ before you start reading this post.

I assume that, based on the shared screenshot, you would like to apply a pattern to each graph? If so then I would like to suggest you to execute the following steps:

  1. Add the image which you would like to use as pattern to the Images folder inside your OL Connect Template.
  2. Insert the Bar Chart element in your Print Context Section via: Insert > Business Graphic > Insert Bar Chart.
  3. Make changes in the Insert Bar Chart window wherever needed and click on OK.
  4. Right click on the inserted Bar Chart element and select the option Chart....
  5. Go to the Source tab of the Chart Properties window and add the following two properties to the object inside the graph array:
    • "pattern": "../Images/example.png" (Please replace example.png with whethever image and/or name you would like to use)
    • "lineAlpha": 0 (Required when you would like to remove the borders).

The result will look something like this:

Before:

"graphs": [
    {
        "labelText": "[[value]]",
        "fillAlphas": 1,
        "columnWidth": 0.8,
        "type": "column",
    }
]

After:

"graphs": [
    {
        "labelText": "[[value]]",
        "fillAlphas": 1,
        "columnWidth": 0.8,
        "type": "column",
        "pattern": "../Images/example.png",
        "lineAlpha": 0
    }
]

Source: ‘AmGraph | JavaScript Charts v. 3 | amCharts (link)’

3

Thanks for the reply.
I tried the sample code, I can see the result in preview mode but when printing the bars come out empty.

PrintResult

4

Any idea why the graphic when using pattern disappears in print or PDF?

5

Hi everyone,

The solution presented by @Marten works in Designer preview but not when generating PDF output.
We are close to winning a big deal with PlanetPress Connect and we really need to know if printing chart with patterns is not a feature available in the tool or is a bug. If it’s a bug, is there any workaround for it?

Appreciate any help.

6

Hi @GB1,

I am sorry to hear that. Unfortunately, I have not yet been able to find a workaround but I have shared the incident internally [internal reference TS-6879].

7

Hi @Marten,

Thanks for the feedback. I hope you get a solution as soon as possible. Our deadline for project submission is 12/19/2022.

8

Hi @GB1,

Hereby I will have to inform you that you can assume that what you would like to achieve is currently not possible in PlanetPress Connect. Unfortunately, there is also no workaround available for the steps as described in my previous ‘post (link)’, which show the expected result when viewing the Bar Chart element in Preview mode but not on the actual output side.

9

Hi @Marten,

Thanks for your reply. We are discussing with OL local representative the possibility of this problem being solved through programming (professional services).