Can we have tooltip and title for Linear Gauge Chart ?

by WaseelAkbari » Tue Dec 06, 2016 1:58 am

Can we have tooltip and title for Linear Gauge Chart ?
User avatar
WaseelAkbari
 
Posts: 16
Joined: Tue Nov 29, 2016 5:25 pm
Location: Greater Los Angeles Area

by Dmitry Kozlov » Wed Dec 07, 2016 1:14 pm

Hi,
Unfortunately, this chart type does no support tooltips.
User avatar
Dmitry Kozlov
 
Posts: 129
Joined: Wed Nov 12, 2014 3:24 pm

by WaseelAkbari » Wed Dec 07, 2016 5:21 pm

Thanks for your reply Dmitry Kozlov.
Can we display Label and Chart title on Linear Gauge Chart or that is also not being supported?
User avatar
WaseelAkbari
 
Posts: 16
Joined: Tue Nov 29, 2016 5:25 pm
Location: Greater Los Angeles Area

by YuriyMedvedev » Thu Dec 08, 2016 2:59 pm

hi! To add chart title and show values you can replace or extend Dashboard -> Advanced with this code (in "Chart_title" set custom title):
Code: Select all
var handlers = {};
handlers.preRender = function(config, logger, proc, el) {
  logger.debug('Configuration: ', config);
  var Chart_title = "Plumsail chart";
 
  if($("#chart_title").length){ $("#chart_title").val(Chart_title);
      } else {
    el.before("<h2 id='chart_title' style='text-align: center;'>" + Chart_title + "</h2>");}
 
  var values = "value: "+ config.pointer[0].value;
 
  if($("#chart_legend").length){
    $("#chart_legend").val(values);
  } else {
    el.before("<div id='chart_legend'>" + values + "</div>");}
  return true;
}
YuriyMedvedev
 
Posts: 14
Joined: Mon Sep 26, 2016 3:05 pm

by WaseelAkbari » Thu Dec 08, 2016 6:05 pm

Hi YuriyMedvedev,

Thanks for the reply. I have three chart in a web part page and I have added your script on all three chart to be able to show the title and value for all three charts but it show the title and value of one chart only at a time, after refreshing the page the title and value switch from first chart to second chart and then with another refresh the title and value are visible only third chart as you can see in attached screenshot. Also I was wondering if we can convert the value from 31.538461538461536 % to 31% only.
Attachments
percentdone.png
percentdone.png (8.52 KiB) Viewed 562 times
User avatar
WaseelAkbari
 
Posts: 16
Joined: Tue Nov 29, 2016 5:25 pm
Location: Greater Los Angeles Area

by YuriyMedvedev » Fri Dec 09, 2016 12:18 pm

Hi! Sorry, here is fixed version:

Code: Select all
var handlers = {};
handlers.preRender = function(config, logger, proc, el) {
  logger.debug('Configuration: ', config);
  var Chart_title = "Plumsail chart";
 
  var el_id = el.attr("id");
   console.log(el_id);
  if($("#"+ el_id +"_chart_title").length){ $("#"+ el_id +"_chart_title").val(Chart_title);
      } else {
    el.before("<h2 id='"+ el_id +"_chart_title' style='text-align: center;'>" + Chart_title + "</h2>");}
 
  var values = "value: "+ Math.round(parseFloat(config.pointer[0].value),-1);

  if($("#"+ el_id +"_chart_legend").length){
    $("#"+ el_id +"_chart_legend").val(values);
  } else {
    el.before("<div id='"+ el_id +"_chart_legend'>" + values + "</div>");}
  return true;
}
YuriyMedvedev
 
Posts: 14
Joined: Mon Sep 26, 2016 3:05 pm

by WaseelAkbari » Fri Dec 09, 2016 6:51 pm

Thank you very much YuriyMedvedev !Image
User avatar
WaseelAkbari
 
Posts: 16
Joined: Tue Nov 29, 2016 5:25 pm
Location: Greater Los Angeles Area

by WaseelAkbari » Sat Dec 17, 2016 1:19 am

Hello YuriyMedvedev,
1- Can we show the value on the top of the pointer (Progress bar). Please see the image for an example.
2- Can we update the font family on the Chart title and remove the extra space between the title and the chart?
Attachments
Required.png
Required.png (31.25 KiB) Viewed 527 times
User avatar
WaseelAkbari
 
Posts: 16
Joined: Tue Nov 29, 2016 5:25 pm
Location: Greater Los Angeles Area

by YuriyMedvedev » Mon Dec 19, 2016 2:58 pm

Oh, sorry. Unfortunately, this feature is not supported now. Currently, you can specify a static position for your text only.
And to remove the extra space between the title and the chart you can use this code in Dashboard->Advanced:
Code: Select all
config.title.margin = {bottom: '-1'};
YuriyMedvedev
 
Posts: 14
Joined: Mon Sep 26, 2016 3:05 pm


Return to Dashboard Designer for SharePoint 2013