Custom Charts

Webinar 34 in the "I Didn't Know ClearPoint Could Do That!?!" webinar series

The data visualizations of your dreams are just a few clicks away! Learn how to leverage the myriad options for charting in ClearPoint – from colors and labels to custom JSON and creating your very own chart types.

Happy reporting!

 

Webinar 34 – Transcript

Introduction (0:00)

 

• Hello everyone and welcome to the “I didn’t know ClearPoint could do that!?!” webinar series
• Today, we are showing you how to take your charts to the next level.
• Before we get started, here are your smiling hosts, I’m Catherine
• Andy: And I’m Andy
• Catherine: And as a few housekeeping announcements,
  • We will be recording this session and will make it available within a week
  • Webinar will last about 25 minutes with time for questions
  • Submit questions to Support@clearpointstrategy.com
  • Any that we don’t get to at the end, we’ll follow up with via email
• On our last installment, we walked through automating evaluations for objectives and measures – I’d highly recommend checking out the recording on our blog, vimeo channel, or in the support center – just search ‘Webinar’
• You can pretty much consider today the custom chart olympics, and we’re going for gold.

Agenda (0:48)

• We’ll do a refresher on all of the great customizations you can take advantage of without manually tweaking the chart JSON.
• Then, we’ll go beyond the basics, and show you some pre-coded customizations you can apply to your charts using the JSON library
• We’ll show you how to view and adjust the JSON of your existing charts,
• Then, we’ll even show you how to take your customizations and save them as new presets for chart types.

Summit Announcement (1:15)

• Andy: Now, as many of you know, one of the training sessions at our Annual Strategy and Performance Management Summit in Fort Lauderdale in 2 weeks will be on custom charts. Think of this webinar as a great prerequisite for attending this training.
• Catherine: Yeah, we’re really looking forward to seeing everyone! And it’s about time for some warm and sunny weather.
• Andy: This can’t come soon enough. Anyway, we want to make sure that the training is as beneficial as possible for everyone. So if you have charts that you want to set up in ClearPoint, but you aren’t sure how, we want to hear from you! Reach out to us at support@clearpointstrategy.com with your ideal charts, and we’ll help you get going – we’ll also use a selection of these charts during training, so please please send them our way!

 

Catherine: Alright, let’s get charting! Per usual, we are flying the friendly skies at upward air. We’re going to hang out in the Eastern Division – showing some love to our home coast for Valentine’s Day.

 

Let’s click into our “% of on time departures” measure. Andy, can you give us the run-down on ClearPoint’s built in chart editing options?

 

Front-end CPS Customizations (2:22)

• Andy: Sure thing, Catherine. I think the best way to approach customizing charts is to think of it by level. There are essentially 3 levels and each one gets progressively more complex.
  • The first level is the normal ClearPoint front end that you are all probably familiar with.  This should always be your go-to choice before attempting to jump into JSON. Let’s spend 5-10 minutes reviewing our standard chart features.
    • Any chart in ClearPoint can be edited instantly by a double click.  Just click somewhere such as the header and an edit window will open.
    • The Chart Type dropdown in the middle of the page should be your starting point when customizing a new chart. If you open the dropdown you will see a list of charts, OR you can click on View Chart types if you want to see how your data will look on each.  I’m going to change this to a bar.
    • On the chart tab we will also see some of the basic options for editing the chart.
    • You can make changes such as giving it a title, x-axis title, or choosing whether or not to show the legend. Any changes can be viewed instantly by clicking the Refresh Preview button.
    • This button is my best friend when editing charts
      • Catherine: Wait, I thought that I was your best friend when editing charts……
    • Andy: ………

 

Chart Periods (4:10)

• Moving on to chart periods……This is where you control which periods to include on the X Axis. By default, it is going to display ‘All periods’ that are in your data table
• You can change this to a specific reporting frequency, or select which periods you want to display.
• Catherine: We recommend you exercise the same caution when creating chart reporting frequencies as you do when creating them for measures.
• Andy: Yeah definitely. Whenever possible, utilize an existing reporting frequency and then use the periods to display option to control what periods are included.
• For example, in this chart, we have Monthly data going back 3 years, but I really only care to see the most recent 12 months. I can set periods to display to last N periods, and now we only have the 12 most recent data points.
• Catherine: And for those of you that want to only see the current Fiscal or Calendar year, those options exist too.
• Andy:  If I select ‘Current Calendar Year’, I can see every month from 2018.

 

Y-Axis Format (5:48)

• On the Y axis tab, we can control things like the title or number format. We can also control the minimum and the maximum Y axis values that will show. ClearPoint will try to be smart based on the values it is charting, but sometimes, it might make more sense to put in your own hard mins or maxes.
• For example, it is kind of hard to compare our values in this chart because they are so similar. If I change the Y min to something more fitting, like 75. I can get a better view of how each period compares.

 

Chart Series (6:28)

• To make changes to a single series, the Chart series tab is going to be where you should head. This is where you can control which series to include. To include a series, just check its box.
• If you click the arrow for a given series, things like the shape, color, or data labels can also be altered.
• For example, I might want to change my Actual to blue and add data labels
• Maybe I want my Target to be area.
• When you are happy with the chart, click save to apply the changes.

 

Adding a new chart (7:41)

• Now, let’s say you wanted more than one chart for your measure.  New charts are very easy to add, so let’s do that quick before we move on to custom JSON charts.
• If you edit a measure, go to the Charts tab.
• You can use the plus icon to add a new chart.
• All you need to do is give it a name, pick the chart type,  and select the series to chart.
• If I save out of these windows, the chart can now be added to the measure detail page simply by editing the layout.

 

Custom Chart Format JSON tab (8:39)

• Catherine: Awesome, this just goes to show how many customization options you have in ClearPoint. Now, there may be some advanced chart options you don’t see here – like grouping stacked bars, fancy legends, and more. And that’s where our JSON library comes into play.
  • Let’s go into the Expenses measure to take a look.
• So what is JSON exactly, other than a common name for men and a line of natural body washes sold at Target?
• JSON is a data format that ClearPoint uses to power the charting engine, known as  HighCharts.
• Andy: And JSON is short for JavaScript Object Notation, since we know you were curious.
• Catherine: right. And JSON is text-heavy, so even though there’s a specific syntax to follow, it can be pretty straightforward to read what is happening in plain English. We’ll see that in just a minute.

 

Browse JSON library (9:36)

• Now, we wanted to make it as easy as possible to grab some JSON options beyond what ClearPoint’s front-end customizations can do. So we’ve got a library all set up where you can browse through and apply new formats.
• If the front-end of ClearPoint is the Level 1 of chart adjustments, then you can consider the JSON library to be Level 2 –
  • you are making adjustments to the JSON beyond what you can do with ClearPoint’s preset options, but you don’t need to start from scratch.
  • The JSON library is a great way to take advantage of these further customizations even when the JSON format is brand-new to you.
• Let’s double click into our chart.
  • We’re going to work with the chart legends today, so we’ll make sure that those are enabled.
  • Then, let’s head over to the Custom Chart Format JSON
• And a quick note on the format of this tab – any JSON being used for the chart will appear here in this text box – but again, don’t feel that you need to start from scratch!
  • The three buttons at the bottom are the huge time savers that we’ll be looking at today.
• To see some JSON customization options, we’ll click into Browse Chart JSON.
  • This is going to show us our pre-built options, using the series we’ve selected for the current measure.
  • We’ve got pie charts, split stacked columns, and even a waterfall chart here.
• For this example, let’s say we want to adjust our legend and give it a bit more flair.
• We’ll click on Custom Legends, and then click on Use Chart JSON to apply it to our chart
• Andy: Here in this text box that was previously empty, we can now see some JSON has been entered.
• Catherine: Yup, and we can see it on our chart right away, too.
• Now let’s take a closer look at the JSON
  • We can see here the part of the chart that’s being customized –
    • we have “legend” in quotations, followed by an open bracket, then customizations for several attributes of the legend, each separated by a comma.
    • Then at the end of the legend customizations, there’s a close bracket.
  • Each of these properties is called a “key”, and the condition specified for the key is called a “value”.
  • Again, they appear in plain enough english here that we can see where we can make adjustments, which is great.
  • For example, the “enabled” key will determine whether the legend is shown, or enabled, on our chart – we can see “true” here rather than “false”.
  • Then below, we see “align”: “left”. This horizontally aligns the legend to the left of the chart.
    • Andy: Now that these keys are in place in our JSON window, we can make small tweaks by changing the value specified.
    • Catherine: So for our legend alignment, we could easily swap out left for “right”.
    • When we refresh preview, the change has occurred.
  • We can also see other properties here, like the vertical alignment for the legend – so again, let’s make a quick tweak.
  • Instead of having “top” here in our quotations, I’m going to swap it out and fill in “middle”. This will vertically align the legend to the middle of our chart.
• Let’s click refresh here, and we can see our changes appear on the chart.
• Andy: Now it’s important to mention a few things that will change in the edit chart window once there is custom JSON in place – several of the default options are no longer available.
  • Andy: Don’t worry, you don’t need to memorize these – a message will pop up reminding you what you can and can’t edit, but we want to point them out here too.
  • Catherine: Right, so, clicking back onto the chart tab, you’ll see that in place of a chart type, ClearPoint directs you to the custom format tab.
  • On the Chart Periods tab, you are still able to determine which periods display on the chart.
  • Clicking onto the Y-Axis tab, you can no longer select the format for each of the y-axes, but the minimum and maximum values can still be adjusted from here.
  • On the Chart Series tab, you can still select which series should display on the chart, but the visual settings must be adjusted through JSON.
• Catherine: Let’s go ahead and save this chart.
  • So again, using the JSON library is a great way to swap out customizations without having to know too much about the JSON format!
  • It’s a perfect way for beginners to avoid starting from scratch.

Get Chart JSON (14:56)

• Andy: Our custom chart library is a great place to get started with customizations ideas, but we know this library is far from comprehensive. Highcharts has 10s of thousands of customizations that can be done!
• If the library options were level 2, you can think of the “Get Chart JSON” button as level 3, because it will often require that you jump into the actual Highcharts documentation for the answers.
• Let’s say you’ve been working on a chart from the standard ClearPoint UI, but it is not quite what you want it to be yet. “Get Chart JSON” will be your best bet.
• If I open up my Variance chart for editing, and go to the JSON tab, I will see a button called “Get Chart JSON”
• When you click on the “Get Chart JSON” button, the window is going to load with the current JSON that your chart is using.
• Just as we saw with Catherine’s example using the library, heading down this path will disable some of the standard ClearPoint UI, so we highly recommend getting your chart as close to perfect as possible before pulling your JSON up like this.
• Once you have your JSON, you need to find the place to add your customization.
• Let’s say I wanted to make some changes to my title.
• If I scroll down, I will eventually found the Title object, which is where I will make my changes.
• In this example, we can see that the standard ClearPoint font size is 14 pixels. If I want to make mine bigger, simply change to something like 20, and watch it grow.
• We might also take advantage of the font color property and change this to red, and refresh.
• As you make changes, this top bar will let you know if your current setup is invalid. Green means your JSON formatting looks good, red means something isn’t quite right.
  • For example, if I accidentally delete a quotation mark, it will let us know that this chart no longer works, and we’ll find that we cannot save the chart.
  • As soon as as I add my quotation mark back, the message will light up to green and I will be good to go.
• Catherine: What if the property you want to change isn’t in the standard chart JSON? For example, I didn’t see anything about the aligning the title in our JSON…
• Andy: This is when you’ll want to jump over to Highcharts documentation.
• As I mentioned, ClearPoint uses Highcharts to power its charts, so this will be where you’ll want to look for additional customizations.  We will include a link to these pages once this webinar is published, but you can always Google these as well. “Highcharts Demo” is a great place to go for some inspiration. Not everything on this page is possible, such as a line chart with 500,000 data points, but there are still some cool things on display here.
• The other useful page is going to be the Highcharts API.  This is a full list of the 10s of thousands of customizations I mentioned before.  For example, if I wanted to further customize my chart title, I would go to title, where I can see what other options are possible.
• If you are unsure of what something means or how to use it, such as verticalAlign, just click into one of the “try it” examples and you’ll be able to play with that property.
  • I can see that it is currently set to bottom, so let’s try middle.
  • I can refresh my chart, just as we do in ClearPoint, with the Run button in the upper left hand corner.
  • After refreshing, I can see that this moves my title up and down vertically.
  • If I wanted to try this in ClearPoint, I could just jump over and add it to my chart.
  • After my last property under Title, I will put a comma and hit enter.
  • Next, I will type my property, using proper formatting.
  • “verticalAlign” : “bottom”

Add Custom Chart Type (20:53)

• Alright, so now we’ve got a super cool and customized chart that is exactly the way we want to see it.
• Chances are, we might want to use this chart more than once – for example, if we have this same Expense measure with the same Variance chart in multiple scorecards in the account – chances are we want them to be consistent.
• So do we really have to restrict our front-end options and use JSON for every chart we want to display this way?
  • Fortunately, there’s an easier way both to replicate and tweak this chart.
  • On the Custom Chart Format JSON tab, we’ve got one more option here, and that is to Add Custom Chart Type.
  • Clicking this option allows us to take the JSON for this chart, and turn it into a default chart type that you can assign to new charts, just like numbers 1 through 10 in the Chart Type list.
• We’ll click Add Custom Chart Type for our new chart, and save it as “Variance” by clicking Add.
  • ClearPoint is going to pop up a window double checking that we want to save this chart type, and it will also tell us that it’s going to set our new chart type as the type for this chart we’re viewing now.
  • Now, our edit chart window has changed.
    • We’re back on the Chart tab, and we can see it’s using our Custom Legend type.
  • Right off the bat, I see that our JSON has been wiped clean from the Custom Chart Format JSON tab. And here’s where things get awesome.
  • If I click back on the Chart Series tab, I’ll see that I can now apply further customizations from the front-end, as if it was a default chart.
    • So this is great – we’ve taken advantage of custom JSON, but we could still make some adjustments without having to go back into the JSON.
  • Let’s save one more new chart type using our chart with the custom legend. I’ll double click to edit the chart, and go on back to the Custom Chart Format JSON
    • We’ll click to Add Chart Type, label it ‘Right Middle Legend’, and add to switch this chart over to using our new chart type.
    • So saving a new chart type is particulary valuable when you’ve set something up using the JSON library –
      • There might be instances where the library option has overwritten some of our front-end customizations –
      • This allows us to go back and set those series shapes back to what they were.
      • Now, we have our original chart PLUS a cool legend.
      • And let’s go ahead and
    • So once these custom chart types are created, administrators have the ability to manage them right from admin options.
      • Let’s go take a look.
    • I’ll click on Chart Options, and onto the Custom Chart Types tab. We’ll see our Custom Legend and Variance charts there.
      • We can delete or duplicate chart types here, or I can click edit if I want to make some adjustments.
      • So let’s say I’ve decided I want the background color of my legend to be white – I can replace this hex code with #FFFFF
        • And I’ll make my border color black – #000000.
      • Let’s save and go back to our Expenses measure. So all charts currently using this custom chart type get updated  – and any future charts created will show this format also.

 

Awesome! So we’ve covered a lot of ground today, and we’re sure you’ve got some burning questions.

 

Questions (25:50)

• How do I change my chart colors using JSON?
  • Andy: That is a good question.  While we can see color options in the JSON of our chart, we highly recommend sticking to the normal ClearPoint UI for customizations like color. ClearPoint’s charting UI is designed to cover common customizations like color, so this should be where you look first when making changes to things like color.

 

• If you edit a property using JSON, but later decide you want to go back to the default Clearpoint settings, is there a method to override the JSON and return to the original settings?
  • Catherine: The easiest way to do this –
    • If you’ve already switched over to a new custom chart type, you can just switch back to one of ClearPoint’s defaults, and that will remove any JSON-only customizations you’ve applied
    • Then, if you’re working with a chart and you’ve got some custom JSON applied in your custom format tab, you can simply remove it – I like to use ctrl+A to select all, and then delete the JSON – and the customizations will be removed from your chart.

 

Andy: Alright, we’re reaching the end of our time here today…

• So, as a recap, it is always best to look for what you need in ClearPoint’s default options before switching over to JSON.
• When you do want to extend your reach beyond those options, you can check in the JSON library, to see if the options have been set up for you already.
• And if that still doesn’t do the trick, you can grab the JSON from your existing chart, make some tweaks, then save it as a new preset chart type for other users in your account to utilize in the future.

 

Catherine: And as a reminder, we’d still love to see the charts your hearts desire in ClearPoint! Please send them our way at support@clearpointstrategy.com – we’ll help you get going, and this is especially important if you are attending training at our annual summit.

That’s all for now, thanks so much for joining us today, and we hope to see you next time on the “I Didn’t Know ClearPoint Could Do That!?!” webinar series. Happy reporting!

 

———————————————

For more resources on HighCharts and JSON, please see the following links:

• HighCharts Demo (for some chart-spiration)
• HighCharts JS API Reference (for a full list of keys)
• JSON Data Types (for those curious to learn more about the syntax)