---

Class ::xowiki::includelet::highcharts

::xowiki::includelet::highcharts create ... \
           [ -id id ] \
           [ -title title ]

Class Relations

• class: ::xotcl::Class
• superclass: ::xotcl::Object

::xotcl::Class create ::xowiki::includelet::highcharts \
     -superclass ::xotcl::Object

Methods (to be applied on instances)

• id (setter)

• pie (scripted)

  ::xo::Page requireJS urn:ad:js:jquery
  ::xo::Page requireJS urn:ad:js:highcharts
  ::xo::Page requireJS urn:ad:js:highcharts-theme
  set result "<div id='[:id]' style='width: 100%; height: 400px'></div>\n"
  set title ${:title}
  if {![info exists :id]} {set :id [::xowiki::Includelet html_id [self]]}
  set id [:id]
  set values [list]
  foreach {name value} $data {
    lappend values "\['[::xowiki::Includelet js_encode $name]', $value\]"
  }
  set values [join $values ",\n"]
  
  set nonce [security::csp::nonce]
  
  append result [subst -nocommands {
    <script type='text/javascript' nonce='$nonce'>
    var chart;
    chart = new Highcharts.Chart({
      chart: {
        renderTo: '$id',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: true
      },
      title: {text: '$title'},
      tooltip: {
        formatter: function() {
          if (this.point.name.length < 70) {
            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
          } else {
            return this.point.name.substr(0,70) + '... : ' + this.y +' %';
          }
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            color: Highcharts.theme.textColor || '#000000',
            connectorColor: Highcharts.theme.textColor || '#000000',
            formatter: function() {
              return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
            }
          }
        }
      },
      series: [{
        type: 'pie',
        name: '$names',
        data: [$values]
      }]
    });
    </script>
  }]
  return $result

• title (setter)

---