Javascript in LiveReport Page

Description
tonylixu
Posts: 1
Joined: Mon Nov 28, 2016 4:09 pm

Javascript in LiveReport Page

Postby tonylixu » Mon Nov 28, 2016 4:18 pm

Hi Everyone:

Is it possible to use HighChart javascript in the "LiveReport page"? For example, the "stock chart" from the polarion documentation (http://www.highcharts.com/docs/getting- ... irst-chart)?

The follow source code is working in a Chrome browser but not in a Polarion "LiveReport page". Appreciate any help. Thanks!

Code: Select all

<html>
<body>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

<script>
$(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2012',
            data: [1052, 954, 4250, 740, 38]
        }]
    });
});
</script>

</body>
</html>

Cody
Posts: 3
Joined: Tue Nov 22, 2016 1:57 pm

Re: Javascript in LiveReport Page

Postby Cody » Mon May 22, 2017 9:13 am

Try this...

Code: Select all

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript" >

    var options = {
      chart: {type: 'bar', renderTo: 'container'},
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2012',
            data: [1052, 954, 4250, 740, 38]
        }]
    };
   new Highcharts.Chart(options);
   
</script>


BidiM
Posts: 1
Joined: Fri Aug 16, 2019 12:09 pm

Re: Javascript in LiveReport Page

Postby BidiM » Fri Aug 16, 2019 12:15 pm

The second code indeed works.

However, we don't seem to get the zones working. While the exact same code works on the jsfiddle from theHighCharts webside.

The second code probably uses the highcharts embedded into Polarion?
While the first code attempts to import the latest version of highcharts as part of the script?

Following code should draw part of the line dotted. But getting solid line in Polarion in script block widget.
Again, works fine on jsfiddle/highcharts.

Code: Select all

<script>
    var options =
    {
        chart: {type: 'line', renderTo: 'container2'},
        series:
        [
          {
            name: 'scope',
            data: [[0,400],[10,400]]
          },
          {
            name: 'progress',
            data: [[3,0],[10,400]],
            zoneAxis:'x',
            zones:
            [
              {
                value: 5,
                dashStyle: 'solid'
              },
              {
                dashStyle: 'dot'
              }
            ]
          },
          {
            name: 'worstcase projection',
            data: [[5,120], [12,400]]
          }
        ]
    };
   new Highcharts.Chart(options);
   
</script>


UPDATE: replacing highcharts.js and exporting.js in the Polarion installation, fixed it. Indeed, Polarion is using an older version of highcharts by default.


Return to “Polarion Application Lifecycle Management (ALM)”

Who is online

Users browsing this forum: No registered users and 21 guests