Complex HighCharts graphics

Description
thomas.boll
Posts: 7
Joined: Wed Sep 02, 2015 12:34 pm

Complex HighCharts graphics

Postby thomas.boll » Thu Oct 22, 2015 5:20 am

Hello,

is it possible to create a highchart with different series types and 2 y-axis?

e.g.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-dual-axes/

I hope some one can help me, how make this.

Kind regards
Thomas

martins
Posts: 181
Joined: Thu Nov 05, 2009 3:24 pm

Re: Complex HighCharts graphics

Postby martins » Mon Nov 02, 2015 3:21 pm

Hello Thomas,

yes, it is possible but no, not out off the box.

As seen so many times with different features in Polarion, the highcharts implementation is just a 50% solution. The rest you have to do on your own :(

To solve this issue I developed three additional macros which I include in our global macro page:

Code: Select all

#macro( addHighchartDataSetMS $axis $type $name $values)
    #set($highchartTemp = $values.replace(':',','))
    #if ($highchartDataSetIndex == 0)
        #set($highchartDataSetIndex = $highchartDataSetIndex+1)
    #else
        #set($highchartSeries = "${highchartSeries},")
    #end
    #set($highchartSeries = "${highchartSeries}{name: '${name}', ")
    #set($highchartSeries = "${highchartSeries} type: '${type}', ")
    #set($highchartSeries = "${highchartSeries} yAxis: ${axis}, ")
    #set($highchartSeries = "${highchartSeries}data: [")
    #set($highchartSeries = "$highchartSeries$highchartTemp")
    #set($highchartSeries = "${highchartSeries}]}")
#end

#macro( initHighchartOptionsMS $yAxisTitles)
    #set($highchartTempIndex = 0)
    #set($highchartOptions = "{chart: {zoomType: 'xy'}, colors: [")
    #foreach($color in $highchartColors)
        #if ($highchartTempIndex == 0)
            #set($highchartTempIndex = 1)
        #else
            #set($highchartOptions = "${highchartOptions},")
        #end
        #set($highchartOptions = "${highchartOptions}'#${color}'")
    #end
    #set($highchartOptions = "${highchartOptions}], title: {text: '$highchartTitle'}, credits: {enabled:false}, ")
    #set($highchartOptions = "${highchartOptions}xAxis: {${highchartCategories}}, yAxis :[")
    #foreach($yAxisTitle in $yAxisTitles.split(":"))
        #if ($highchartTempIndex == 1)
            #set($highchartTempIndex = 2)
        #else
            #set($highchartOptions = "${highchartOptions},")
        #end
        #if ($yAxisTitle.substring(0,1).equals("~"))
            #set($highchartOptions = "${highchartOptions}{title: {text: '${yAxisTitle.substring(1)}'}, opposite: true}")
        #else
            #set($highchartOptions = "${highchartOptions}{title: {text: '${yAxisTitle}'}}")
        #end
    #end
    #set($highchartOptions = "${highchartOptions}], series: [${highchartSeries}]};")
#end

#macro( highchartEndMS $yAxisTitles )
    <div id="highchartBlockId_${highchartBlockId}" style="height:${highchartHeight}px;width:${highchartWidth}px;">
        {pre}
            #initHighchartOptionsMS($yAxisTitles)
            #initLocalization()
            #if ($isPDF || $context.getAction().equals("preview"))
                $highchartRenderer.generateChartFromVelocity($context.getContext().get("vcontext"), $context.getRequest().getHttpServletRequest())
            #else
                <script type="text/javascript">
                    Highcharts.setOptions({chart: {style: {fontFamily: 'Arial, Helvetica, \"sans-serif\"'}}, $loc});
                    var options = $highchartOptions
                    options.chart.renderTo = 'highchartBlockId_${highchartBlockId}';
                    $highchartAdditionalOptions

                    new Highcharts.Chart(options);
                </script>
            #end
        {/pre}
    </div>
#end
An example how this macros can be used:

Code: Select all

#highchartStart("My Test" "" 600 400)
#addHighchartDataSetMS(0 "line" "Apple" "10:20:30:25")
#addHighchartDataSetMS(1 "spline" "Orange" "20:15:30:35")
#addHighchartDataSetMS(2 "column" "Kiwi" "30:20:20:10")
#highchartEndMS("Val1:~Val2:Val3")

Kind regards

Martin


Return to “Polarion Application Lifecycle Management (ALM)”

Who is online

Users browsing this forum: No registered users and 4 guests