score:-1

i could not find a right solution to my actual problem of using options, but resolved it by creating legends using ul/li and defining style for each of li.

<style>
                #line-legend
                {
                    list-style: none;
                    padding: 5px;
                    margin-left: 5px;
                    margin-top: 5px;
                    background-color: #ffffff;
                    text-align: left
                }
                #line-legend li
                {
                    height: 1.2em;
                    padding-left: 15px;
                    margin-bottom: 4px;
                    list-style: none;
                    spanrow=2;
                }
                .legcat
                {
                    display: block;
                    padding-left: 1px;
                    background-color: #ffffff;
                }
                .leg4
                {
                    background-color: #ffee00;
                }
                .leg3
                {
                    background-color: #ff0000;
                }
                .leg2
                {
                    background-color: #0000ff;
                }
                .leg1
                {
                    background-color: #00ff00;
                }
                </style>
                <div> 
                    <ul id="line-legend">
                        <li class="leg1"><span class="legcat">legend 1</span></li>
                        <li class="leg2"><span class="legcat">legend 2</span></li>
                        <li class="leg3"><span class="legcat">legend 3</span></li>
                        <li class="leg4"><span class="legcat">legend 4</span></li>
                    </ul>
                </div>

score:3

the problem ist the jinja2 specific convention {% and %} in their control structure. to avoid parsing problem you have to add \ before each % and {} to prevent these issues.

so in your specific case:

var copts = { legendtemplate : "<ul class=\"<%=name.tolowercase()%>-legend\"><% for (var i=0; i<datasets.length; i++)\{\%><li><span style=\"background-color:<%=datasets[i].linecolor%>\"></span><%if(datasets[i].label)\{\%><%=datasets[i].label%><\%\}%></li><\%\}%></ul>"}

var mylinechart = new chart(buyers).line(data,copts);

Related Query

More Query from same tag