HTML Visualization Workout 001 - Moving Text

Difficulty 1/5

Moving Text

With the HTML VizCreator custom visuals for Power BI, you can create moving text with customizable features. You can choose the font and size of the text, and change colors dynamically based on specific properties. Additionally, you can highlight certain parts of the text to draw attention to important information.

PBIX File:

Please download the file from here.

HTML VizCreator Custom Visuals:

The HTML VizCreator visuals are developed by BI Samurai and they come in two versions: the Microsoft-certified HTML VizCreator Cert and the HTML VizCreator Flex, which is not Microsoft-certified but can access the internet and currently offers more functionality. In upcoming workouts, you’ll learn more about the differences between these two versions. For this particular challenge, you can use either one.

It’s important to note that a license is required to access the full functionality of the HTML VizCreator visuals. However, to be part of these workouts, you won’t need to purchase a license. The PBIX file available for download at the link above contains the latest pre-released versions of both visuals, along with an active license key.

As a side note, if you are a freelancer, Power BI consultant, Microsoft MVP, student, or have a similar role, you might be eligible for a free partner license. To find out more, reach out to partner@bisamurai.com and provide us with information about who you are, what you do, and why you believe you should receive a free partner license.

Goals of this workout:

  • Customize the color of the moving text, or select specific parts of the text to highlight with different colors.
  • Choose your preferred fonts and sizes to create a personalized look for the visual.
  • Incorporate at least one element that is dependent on another value, similar to how we adjusted the speed and direction of the moving text.

Help:

Moving text

Bold, italic, underline

Font size

Colors

Ask your questions in the workout channel and we’ll try to answer you as soon as we can.

Submission:

Post a GIF or screenshot of your moving text and upload your PBIX.

2 Likes

@PascalKiefer,

Thanks – this was awesome workout!

I stayed up way too late seeing how far I can take it, and by the end I felt like I’d gained superpowers and could control Power BI fonts with my mind… :grinning:

My Measure Code
Moving Text Brian = 

VAR SelFontFamily = [Harvest Font Family]
VAR SelFontCategory = [Harvest Font Category]
VAR SelColor = [Harvest Color]
VAR SelFontSize = [Font Size Value]
VAR SelFontEffect = 
    IF( ISBLANK( [Harvest Effects API Name] ),
        "none",
        [Harvest Effects API Name]
    )
VAR SelFontEffectClass = 
    IF( ISBLANK( [Harvest Font Effects Class] ),
        "none",
        [Harvest Font Effects Class]
    )
VAR SelFormattedEffectClass = [Harvest Formatted Class]

RETURN
"
  <head>
    <marquee direction='"&[SELECTED direction]&"'  scrollamount='"&[Speed Value]/3&"'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family="&SelFontFamily&"&effect="&SelFontEffect&"'>
    <style>
      h1 {
        color: " & SelColor & ";
        display: flex;
        align-items: center;
        height: 210px;
        font-family: "& SelFontFamily &"," & SelFontCategory &";
        font-size: "& SelFontSize &"px;
        class: "&SelFormattedEffectClass&"
      }
    </style>
    <h1> Amazing what you can learn just by goofing around...</h1>
  </head>

"

Pascal – one question. I couldn’t get the new beta Google Font Effects to work. Are those supported in VizCreator or was the problem just in my attempted implementation?

Thanks again for a great learning opportunity.

– Brian

BI Samurai Workout 001 - Moving Text - Brian Julius Solution.pbix (1.8 MB)

Hi @BrianJ
This is brilliant! It shows the endless possibilities of using HTML/CSS in Power BI. Thanks for preparing the report and being part of this workout.
About the Google Font Effects: I don’t think I’ve ever tried using them. Do you mind uploading your BPIX to the workout so I can take a look at the code and maybe figure out why the effects don’t work?

Thanks!

1 Like

@PascalKiefer ,

Thanks! - glad you liked it.

I have uploaded my PBIX to my earlier post, so you can see how I tried to implement the Google Font Effects.

Frankly, being able to create fonts in 3D, set them on fire, and make them glow like neon lights doesn’t sound well-aligned with data visualization best practices, but I’m eager to figure out how to do it anyway… :grinning:

Thanks again for a great workout - looking forward to Workout #2!

  • Brian

I’ve asked one of our experts to take a look at the effects. I’ll get back to you with an answer as soon as I know more. If it works, it might be a topic for a future workout :slight_smile:

1 Like

Hi @BrianJ
We did some research and have good news.
Font effects work! But, they only work in the Power BI Service and not in Power BI Desktop. In the future, we will most likely do much more in the service anyway so we can ignore this limitation in the Desktop. Try this measure to see what it looks like:

Measure =

"

@import url(https://fonts.googleapis.com/css?family=Changa+One&effect=anaglyph); div { font-family: 'Changa One', cursive; font-size: 50px; text-align: center; letter-spacing: 3px; color: rgba(33, 64, 83, 0.9); }
This is a font effect!

"