Hi, I recently saw a video on this article you guys published in LinkedIn and I have to say really awesome! I’ve being using ChartFactor and I’d love to accomplish something as you did in the video. Did u use any extra visualization library for some of the charts (trend, KPI and bars)? or you can accomplish that by using only CF?
I know that I can use some color configurations and so on, but don’t know how to get that.
Hi @oliver, I’m glad you liked the article. What you saw in the video was done only using ChartFactor, without any external visualizations libraries, the other thing is that there are not crazy tricks or anything to accomplish, just some color configuration as you already pointed and some CSS to help the visualization.
For example the trend at the top was accomplished by using something like this:
<!-- This would be the container with color -->
<div class="trend-widget">
<!-- The placeholder for the trend -->
<div id="trend"></div>
</div>
For the color definition for the Trend, we just need to set a transparent background (usually is white), then a palette with only the white for the line in the trend.
var color = cf.Color()
.theme({ background: 'transparent', font: 'white'})
.palette(['#FFF']);
And then we add some CSS:
/* The blue widget */
.trend-widget {
background-color: #0bf; // A light blue background
padding: 10px;
}
/* The placeholder div */
#trend {
width:99%;
height:140px;
background: transparent;
}
As you can see is pretty easy to do, let me know if this helped!
Thanks @eduardo, awesome. It did the trick. What about the KPI is also the same or is it built and the a the data is inserted in the HTML?
Hello @oliver and sorry for the delay. Well the KPI is just a div with an icon, a placeholder for the number and some CSS. The only thing we need to do is to query with a very simple aql like this:
cf.provider(PROVIDER)
.source(SOURCE)
.metrics(cf.Metric())
.element('kpi')
.execute()
.then(resp => {
var calls = resp.data[0].current.count;
$('.kpi-value').html(numeral(calls).format('(0,0)'));
})
So here formatting the value of calls (which is a number) with the help of the numeral library wich is not required at all, and the then we set that to the .kpi-value div.
I saw the article and I though myself opening a thread on this same subject but for my surprise it was already done lol. I would love to accomplish the same thing so I can use the answers above.
But one of the thing that impacted me the most was the Filter Control, so my questions are: Is this component also configurable like the others? By setting colors or so? How can I change the look for it?
Well, the Interaction Manager (previously called Filter Control) is a different component. To build a custom UI for it requires a little more work, but you’ll be able to have it in the exact way you want. The default UI is nothing else that a connection of DOM elements, the API and events that the IM exposes, and is what actually does all the work since they exposes all the required functionalities to handle the expected level of interactivity.
So you can build the UI components from scratch, for example how you are going to display the filters, their values, color, sizes, fonts, shapes, if you are going to use buttons, links, etc … anything. Once you have your design and behavior figured out, then you will connect these elements to the API.
Take a look at the API doc and the Events doc for more information on how you can use them. If you need help to building yours, let us know.
As @diego mentioned we also loved the Interaction Manager UI, is this code available somewhere so we can take a look to avoid the friction of creating a similar UI like that one from scratch?
Many people have asked for that UI, so in the last release we made it available as an out of the box skin for the Interaction Manager. You can enable it by using .set('skin', 'modern').
Yes, thank you, I didn’t know it was so simple. And since it is CSS I’ve created my own styles to modify it a little bit so it matches one of the apps. Does it support any other skins other than modern? Is there any doc about it?