Chart/Dashboard Designer Help

Dashboard Designer
1

I am trying to add more information to the chart that I created. I found this example:

Use notes in charts created with SharePoint Charts

However, when I get the other information to display the font is very large and in a circle. I have 32 rows on my bar chart, and it is difficult to see the “extra” information because it overlaps the Y axis values and the “extra” information overlaps each other.

Can you provide any guidance on how I could better display the “extra” information? It is one field that is a text value. Ideally, I would have the “extra” information display by hovering over the bar (similar to how the count for the bar does).

I submitted a ticket for this, but have not gotten a response.

2

Dear @rhonda,
If the notes are too large, you can try to set the font size - https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/seriesdefaults.notes.label#seriesdefaults.notes.label.font

Like so:

    config.seriesDefaults.notes = {
        label: { font: "20px sans-serif" }
    };
3

Hi @Nikita_Kurguzov,
Thanks for this info. The link you sent was also very helpful!

There is something else that I am trying to do, but I can't figure out the proper syntax. I want to use a field in the SharePoint to change the color of the bar in the chart. Below is what I have, but I do not see any color changes. Can you help? Thanks in advance.... Rhonda

config.series.colorField = "Position";
config.series.colorField{
data:[
{value: 'ADMIN', Position: "green"},
{value: 'SUPERVISOR", Position: "red"}
]
}
4

Dear @rhonda,
You can do it for the series, like so:

var handlers = {};
handlers.preRender = function(config, logger) {

	logger.debug('Configuration: ', config);
	for (const i in config.series) {
     switch(config.series[i].name) {
      case 'Great':
        config.series[i].color = '#00ff00';
        break;
      case 'Satisfactory':
        config.series[i].color = '#ffff00';
        break;
      default:
        config.series[i].color = '#ff0000';
    }
	}
  
	return true;
}
5

Hi Nikita,

I am not able to get this to work. I do not get errors, but different colors are not showing up in my chart. Just a reminder that I am using the chart with SharePoint 2019 on-premise.

My first question: Does the word 'name' in the line
switch(config.series[i],name){
refer to the internal name of the column that I am using for a match in the Case statement? I have tried the internal name of the field, the display name of the field, and just the word 'name'.

Also, there is something wrong with the line
config.series[i].color = '#ff0000'
If I leave that statement in the code after the default (in the Case statement), my chart doesn't render properly. My labels are missing from the chart, but there are no errors displayed in the console of the Chart Preview.

However, if I comment out the line just after default, the chart renders as expected with the labels. This leads me to believe that the
config.series[i].color = '#fff000'
is not the right syntax?

I also tried
config.series[i].colorField = '#fff000'
which did not work either.

Thanks so much for your help with this.
Rhonda

6

Dear @rhonda,
In this case, I was using the value of the field which was transferred as the name of the series. To see what you have inside of your series, you can do this:

var handlers = {};
handlers.preRender = function(config, logger) {

	logger.debug('Configuration: ', config);
	console.log(JSON.stringify(config.series));
  
	return true;
}

And then show me info from your browser's console:

image
image1919×152 20.8 KB

7

Hello Nikita,

I sent a message with the console log instead of posting here.

Thank you, Rhonda

8

Good morning @Nikita_Kurguzov ,

I sent a message last evening with another attachment of the console. Please let me know if you did not receive it.

Thanks, Rhonda