Operations Dashboard Tip and Tricks

all right good afternoon everyone I'm Erin and this is my colleague Dave today we're going to be talking about operations dashboard and showing you some cool tips and tricks so I'm gonna go through configuring the dashboard layout and configuring some actions to kind of bring your dashboard to life all right so here I have an example dashboard that's mostly complete just to give a brief brief overview of what we're seeing here so on the Left we have some different Point assignments representing work that has to be done on the Left we have another feature layer that has a list of workers and then up here at the top we have several different indicators showing the stat the number of assignments in certain statuses so we have assigned unassigned in progress and completed and then finally in the center here we have the map so in the map you can see there's different assignments there's different workers and then additionally there's different polygons representing certain boroughs in the New York City area so you might be wondering oh there's quite a bit of extra space up here maybe I want to combine these elements together so that I can drag them around in a more easy way so one thing you can do is hover over the can element click drag item if you hold the shift key down it brings it turns a green indicating that you can group this with another element so if we group it together it'll group these as one group additionally we can drag this over here hold down shift again grab bring those two together as a single group and then in addition to that you can drag actual group and group that group to another group so now I have one large group at the top representing the status of different assignments it's a this highlights how I can move this entire group maybe to the bottom of my dashboard like this I'm sort of having to move four separate elements I just move four at a time pretty and pretty nice additional thing you might want to the I want to show is how you can stack elements so for example maybe I want to add a legend to my dashboard to show what with things in the map are represented by so I can add a map legend very simple it will put it over here if I drag over and I want to stack it behind my assignments list here I can just drag to the center boom it stacks it on top of each other so I have a list in one tab here and I have the map legend behind it this can say to you some serious screen real estate when you're designing your dashboard so now maybe I want to be able to interact with this dashboard I want to go to click on one of these workers here and actually have it effect with what this shows so for example maybe I want to click on one of my workers here and zoom the map to that location and flash it I can hover over the list here go to configure actions this brings up a an action dialog I can click add action zoom add my target the dissymmetric dispatcher map that I have addition in addition to zooming I can add a flash action again flash on the map I can click done so now if I click on one of these workers I can actually zoom my map to that location and flash so that's pretty neat so one of the one of the common things that we've done the common questions that we've gotten on the forums and on geonet and whatnot is how can I configure the zoom so maybe this zoom is actually zooming too far not zooming enough one of the things you can actually do you can open the dashboard JSON in NGO assistant here and actually make a manual edit for a property that's not exposed to the user interface right now so I want to view an item's JSON I will select my dashboard here so you can see it brings up all this JSON here in my dashboard if I search for a property called flash repeats you can see that right now it's shown as three maybe I want to actually edit this to make it flash six times for example so I will move that make it six additionally maybe I want to zoom to a different scale so I can say point zoom scale and I will make this the default is ten thousand right now so maybe I want to zoom in farther I will make this five thousand so just click Save if I go back to my dashboard over here refresh it'll pick up that change and now when I click on one of these workers you can see that it zoomed in to a tighter area and then the flashing is still continuing since I told it to flash six times this highlights the fact that there are some capabilities they're not exposed to the UI but you can edit these if you really need to so you might be saying well that's cool air and like I can click here and see the worker flash it maybe I want to actually filter all these assignments so I can go back to my worker list here configure actions again add another action I'll add a filter I add a target I want to filter the assignments on the map so I check that box now you see here I get a source field and a target field so my workers are represented they have an ID an object ID so I'll use that for the first field and then my assignments they have a worker ID so these two fields map together so now if I click done and I click on one of these and i zoom out you can see that only the assignments that are assigned to that worker are shown on the maps this highlights how you can configure actions between multiple unrelated layers so if we want to add additional actions to maybe filter some of these indicators down here you can add more add another target I want to filter the actual workers on the map there's no configuration because this layer is the same as they are used in a list I mean maybe I want to filter the assignments list same idea select the object ID and select the worker ID click done now my assignment list here will update as I quit and you can see that how they refreshed so that's interesting so one other thing that you can do as far as filtering is you can filter by the actual map extent so maybe I want to drag the map and have my assignments filter it and my workers filter so I can go to configure actions on the map at the top here you see there's there's different sources so there's the map there's the workers there's the assignments and then there's this other layer of the district's so I can say when the map extent changes I want to add an action I want to filter I will filter in this case the indicator is at the bottom so I add all four of those indicators and one two three four click done and then now you can see it shows zero zero because there's no assignment in my view if i zoom out and select those you can see it shows all my assignments by zoom and say to this area you see how I'm the map changing the map extent updates these different indicators here so this how I tell you can use the map extent to filter other visualizations in your dashboard so that's cool one other interesting thing that we've added to dashboard in the previous release is you can have a header panel here so let us add a quick simple header panel and in this header panel and you can actually add new elements called selectors so you can add you might want to add a category selector so in this case I want to select those assignments in the map by the City Boro that it they can they're within so in this case I'll make it by the district with a title here and then I will select features I'll select the polygon my polygon layer NYC Burroughs select that scroll down I want to display the borough name here so you can see in my drop down as Manhattan Bronx Brooklyn Queens etc so that's a simple configuration I can go to the actions tab add an action filter this time I want to filter of the assignments but I want to filter it spatially so here you're given two choices since it's based on features that have geometry you can filter by a field are we filter by the geometry so I'll select spatial I'll also do that same thing for the workers here so now if I click done let me actually move so now if I select like Manhattan for example I only see the assignments in Manhattan on the map if I select Staten Island there's nothing shown because there's no assignments down there so this highlights how you can use another layer another polygon layer to refine the view of your map and refine what you see in other visualizations one other cool thing that I want to show today is how you can use date selectors to filter your data so again in the header panel here I can go add a date selector I want to filter by the due date for example so here you have a couple options you can use to find options date or the date picker so I want to have some predefined options for my users on the dashboard maybe I wanted to filter by the date is the due date was today so I give it a title of today I say is for the operator and then I have a couple different options here so today yesterday tomorrow etc I'll just go with today and then maybe I also want to add one for tomorrow so I can say is the date tomorrow maybe I want to also add one additional option to show all dates so I'll add a none option provide a new title a new label all dates so now on the drop-down I have a choice between all dates today and tomorrow if I go to the actions tab here I can add an action so I want to filter and this time let's filter those indicators so I can filter the indicator so it's provided a date from my date put my date selector here and I want to filter the due date so I'll do this for a few of those indicators real quick so now you see it adds an additional drop down here where I can select assignments they're due today and you see that those are reflected down here and the different indicators if I want to modify this I can say how many assignments are due tomorrow so this lets you make this allows your dashboard to be very interactive and you don't have to create predefined filters either in your web map or in specific visualizations one other interesting thing that I'd like to highlight today before I turn it over to Dave is how you can embed a dashboard into other web apps or other websites that you might have so if we jump over to this very simple HTML code here it's it's just one file index.html I've created a div here close that div and then inside of here I provided a title so a dashboard invited into a website all I have to do is add one line here iframe I can provide my dashboard here that shared publicly within the organization and externally and then if I jump back you can actually see this in action so this is an example of an embedded dashboard and it looks pretty cool you really wouldn't even know that it's a dashboard so I'll turn it over to Dave now he wants to talk about configuring charts in general dashboard design great pretty cool huh I'm gonna need your display alright so I'm gonna cover some design related tips and tricks for operations dashboard and I'd like to start off just by talking about color as a concept colors and contrast can influence where a user's eyes go immediately when they see it it can also connect data between your elements so in this dashboard the colors on this indicator and these indicators align with the symbol colors in the map colors can also create a sense of authenticity when you use your branding colors it can create a certain aesthetic or even a VOC emotion such as discomfort or relief looks like I'm having some internet issues so hopefully it works alright and another technique is to let the base map influence the the colors of your dashboard so in this case I'm using the same blue throughout the base map and my elements and I'm also using the text color of the labels in the base map for my text on the dashboard next I want to talk about some tips for the elements themselves and starting off with the serial chart if you're fairly new to operations dashboard this serial chart is a is a chart that can visualize your data as a bar chart column chart area chart line chart or combinations and so in the top here I have more or less a default configuration and I'm using a date field and I'm I'm allowing the application to to pin it in two days below I'm visualizing it as an area chart and one technique I used is I'm showing the labels above the points and because I'm showing the labels I can remove the value axis the y-axis because it's not really necessary anymore along the bottom here on my category axis I have used a different pattern that I am showing right here to show the day of week because in crimes that's relevant to to show and then on the first of the month you can specify a different labeling pattern and so I'm showing the month in the year I realized that my uh let's try this all right hopefully you can see that better now next I want to talk about the list element there's some some cool tricks that you can do to save vertical space or to give some tech visual effect so on the Left I have the name of the feature and then what looks like a tag and what I'm doing is I'm customizing the HTML within the rich text editor and I'm applying a background color and actually extracting that color code from a field and and then I'm also floating that text to the right and when there's a collision then the text just pops up above in the middle I'm using an inline block to present this kind of media item effect and I'm applying a left border color to create that vertical line and again when space is constrained they just wrap underneath and on the right again I'm using a float left float right technique just to to kind of separate the information visually and then consolidate it vertically this I want to talk about indicators indicators are very popular and they're actually you can use them in a lot of different ways this is a relatively simple indicator but I am using a custom SVG so here you have a pretty good catalog of icons that can help tell a story of what the data represents and we're actually adding to this list in the upcoming release next month but if you do need a custom icon you can paste your SVG source code in here and there you go now it might be distracting especially since this is animated so maybe we only want this to display when you know a threshold has been reached so if there's been one or more crimes I can define or I can I can visualize it differently so by defining a reference value of one I'm able to turn on conditional formatting and that creates two previews so when my when my reference value has been reached I can I can show it a different indicator than when it's below the reference value the you can also define a statistic based reference and here I'm basically doing another query so I'm in my and my value I'm querying for the number of crimes in the last 28 days excluding today and then I want to compare that to last year at this time to see whether crimes are up or down compared to last year so here I'm doing another statistic and I'm constraining it to is before the last 365 days and was within the last 393 28-day difference again I have conditional formatting on and here I'm using a different colored text based on where it falls above the value or above the reference or below and down here I've turned on prefixing just to simplify the number that's displayed so this is in thousands and moving on to pie charts pie charts are can be effective although they they can easily be abused and misused typically you shouldn't have more than three to four categories on a pie chart otherwise you're better off using something like a cereal chart or a bar chart if you do have a data set like this where you have several large slices and then several small slices you can use what's called grouping percentage so by by adding a grouping percentage I'm clustering them into an other category and then the bottom charts just show some aesthetic techniques that you can use you can add an inner radius and an outline color to create this effect you can also offset your labels in a negative direction to be over top of your chart and coming next month we are really excited to introduce the ability to use your charts to drive actions on other elements through selection so I've configured this so that when I click on the blue bar which represents larceny I'm filtering my other elements on this date base chart I can I can select the last three days and everything updates to show the last three days and I can also constrain this to the Central Police Division all right and just a little a trick I did in my web map I actually have symbols that are scale dependent so they get larger as i zoom in to help you see them when you're at the street level and to minimize the noise when they're when you're out at the city level and I'm also making the crimes within the last 24 hours larger than the older crimes and I'm doing that through an arcade expression just taking the difference from now to the dispatch date in hours and then I'm also passing in the view scale which is a variable available right here and just adding a factor for when it's less than 24 hours old and with that I think we're going to open it to questions so I know that was a whirlwind but we have a lot of fun stuff that we want you guys to start utilizing so the question was whether you can use a time slider either within your map or on the dashboard like for instance it's it's the one that's in a belt available in the map viewer the answer is not at this time it is something that is on our radar though is this what you're talking about yes no okay so within the list this is where you would type in what you want displayed in each list item and if you click source that's where you put in your HTML code so the question is how do you deselect in your list if you want to show everything so you it depends how you configured the selectors so you can configure it to always have one option selected or in that one example I added a none type so the none type means that nothing is selected so there's no query sent to filter so you could select none which I defined as all dates in my example so all dates represents there's no date filter they answer it oh so yeah so on the list there's two types of selection there's multi selection and single selection and so in the list if I click on an item in the list it gets selected if I click that again it becomes unselected which will give you back everything yep question in the back would you like them to the question was whether these are going to be available online I think we can make that work Derek in the back is volunteering to write some blogs about this yes no sooner yeah so the question was about pie charts and I think you were getting at the ability to select on the chart and then have it reflect in the map and yes I didn't demo that but that is coming with the next release you'll be able to select on the chart on the pie chart and and apply a filter action on your map layer or other elements yes I don't know it's not a lack back when is the release I believe it's planned for April 10 but don't hold me to that [Music] sure so the the question was about whether we have any samples with polygon data and that is temporal in nature let's chat afterwards I don't think we have another demo theater after this so are we good - just keep answering questions yes yeah right yes so like what I demoed was using what we call selectors so when you create a selector and then you save your dashboard and publish it and share it with other people they have access to those selectors so you can create those different types of queries and you can use multiple selectors and they get ANDed together so you can further refine the view on the map they cannot create their own it's whatever the - the dashboard owner the dashboard author creates those selectors defines what's available in those dropdowns and then the user can use those yeah so the question was about basically updating the symbology based on a selection from the chart short answer no there's there's not a way to override the symbology you could apply like a flash action that would you know draw attention to it or you could simply filter so you like in this example I click the blue bar and my bar chart and I'm filtering to just show blue points on the map yes no the question was about the layout if there's any way to easily distribute the elements evenly short answer is no we have heard that request and so we're talking about it why don't if you have more questions you can just come up and talk to us thanks for coming

Channel: Esri Events

Views: 19,674

Rating: 4.9615383 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Esri Developer Summit 2018, Esri DevSummit 2018, Esri Technical Sessions, Operations Dashboard

Id: Ou3mokGsLGA

Length: 33min 7sec (1987 seconds)

Published: Thu May 10 2018