You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@click.apache.org by Andre Gustavo Lomonaco <lo...@ipplus.com.br> on 2010/12/21 03:05:51 UTC

Using HighCharts JavaScript Chart Library in Apache Click

Hi guys,

I wanna to use the JavaScript HighCharts Library with Apache Click (http://www.highcharts.com)

One way to use the HighCharts is include the Chart Data inside the <head></head> , as below

My question is : I can create the <head></head> text below using my Database, but how can I pass this text to ApacheClick ???
                        I need to change my Html Template ???? 

Thanks in Advanced

My Best Regards,

Andre Lomonaco

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>
  
  
  <!-- 1. Add these JavaScript inclusions in the head of your page -->
  <script type="text/javascript" src="/assets/js/highcharts/jquery.min.js"></script>
  <script type="text/javascript" src="/assets/js/highcharts/highcharts.js"></script>
  
  <!-- 1a) Optional: add a theme file -->
  <!--
   <script type="text/javascript" src="../js/themes/gray.js"></script>
  -->
  
  <!-- 1b) Optional: the exporting module -->
  <script type="text/javascript" src="/assets/js/highcharts/modules/exporting.js"></script>
  
  
  <!-- 2. Add the JavaScript to initialize the chart on document ready -->
  <script type="text/javascript">
  
   var chart;
   $(document).ready(function() {
    chart = new Highcharts.Chart({
     chart: {
      renderTo: 'container'
     },
     title: {
      text: 'Browser market shares at a specific website, 2010'
     },
     plotArea: {
      shadow: null,
      borderWidth: null,
      backgroundColor: null
     },
     tooltip: {
      formatter: function() {
       return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
      }
     },
     plotOptions: {
      pie: {
       allowPointSelect: true,
       cursor: 'pointer',
       dataLabels: {
        enabled: false
       },
       showInLegend: true
      }
     },
        series: [{
      type: 'pie',
      name: 'Browser share',
      data: [
       ['Firefox',   45.0],
       ['IE',       26.8],
       {
        name: 'Chrome',    
        y: 12.8,
        sliced: true,
        selected: true
       },
       ['Safari',    8.5],
       ['Opera',     6.2],
       ['Others',   0.7]
      ]
     }]
    });
   });
    
  </script>
  
 </head>
 <body>
  
  <!-- 3. Add the container -->
  <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
  
    
 </body>
</html>

Re: Using HighCharts JavaScript Chart Library in Apache Click

Posted by Bob Schellink <sa...@gmail.com>.
Hi Andre,

Yeah, you could retrieve it from your DB, add the content to a Page model, then reference it your
template.

MyPage.java:
addModel("headInclude", getHeadScriptsFromDb());

border-template.htm:
...
<head>
$!headInclude
</head>
<body>
...
</body>

Btw you don't have to add the script in the <head>. Many devs prefer to add it at the bottom of the
page instead. So you could include the scripts in your page template instead of the border-template.

Hope this helps.

Kind regards

Bob


On 21/12/2010 13:05, Andre Gustavo Lomonaco wrote:
> Hi guys,
>  
> I wanna to use the JavaScript HighCharts Library with Apache Click (http://www.highcharts.com)
>  
> One way to use the HighCharts is include the Chart Data inside the <head></head> , as below
>  
> My question is : I can create the <head></head> text below using my Database, but how can I pass
> this text to ApacheClick ???
>                         I need to change my Html Template ???? 
>  
> Thanks in Advanced
>  
> My Best Regards,
>  
> Andre Lomonaco
>  
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
> <html>
>  <head>
>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
>   <title>Highcharts Example</title>
>   
>   
>   <!-- 1. Add these JavaScript inclusions in the head of your page -->
>   <script type="text/javascript" src="/assets/js/highcharts/jquery.min.js"></script>
>   <script type="text/javascript" src="/assets/js/highcharts/highcharts.js"></script>
>   
>   <!-- 1a) Optional: add a theme file -->
>   <!--
>    <script type="text/javascript" src="../js/themes/gray.js"></script>
>   -->
>   
>   <!-- 1b) Optional: the exporting module -->
>   <script type="text/javascript" src="/assets/js/highcharts/modules/exporting.js"></script>
>   
>   
>   <!-- 2. Add the JavaScript to initialize the chart on document ready -->
>   <script type="text/javascript">
>   
>    var chart;
>    $(document).ready(function() {
>     chart = new Highcharts.Chart({
>      chart: {
>       renderTo: 'container'
>      },
>      title: {
>       text: 'Browser market shares at a specific website, 2010'
>      },
>      plotArea: {
>       shadow: null,
>       borderWidth: null,
>       backgroundColor: null
>      },
>      tooltip: {
>       formatter: function() {
>        return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
>       }
>      },
>      plotOptions: {
>       pie: {
>        allowPointSelect: true,
>        cursor: 'pointer',
>        dataLabels: {
>         enabled: false
>        },
>        showInLegend: true
>       }
>      },
>         series: [{
>       type: 'pie',
>       name: 'Browser share',
>       data: [
>        ['Firefox',   45.0],
>        ['IE',       26.8],
>        {
>         name: 'Chrome',   
>         y: 12.8,
>         sliced: true,
>         selected: true
>        },
>        ['Safari',    8.5],
>        ['Opera',     6.2],
>        ['Others',   0.7]
>       ]
>      }]
>     });
>    });
>     
>   </script>
>   
>  </head>
>  <body>
>   
>   <!-- 3. Add the container -->
>   <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
>   
>     
>  </body>
> </html>
>  
>  
>