CODEWITHSUNDEEP
javascriptjqueryhtmlhighcharts
Munir
Munir

Reputation: 759

Display highchart dashstyle (svg) in select element

I am trying to show a select element with highchart dashstyles. I need to show the dashstyle svg in each option.

Here is my fiddle just to better explain: http://jsfiddle.net/m2rqsx8e

The original fiddle: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/

How can I do this with jquery and/or bootrstap? I've found a similar question here, but uses ExtJS.

Code:

<script src="http://code.highcharts.com/highcharts.js"></script>

<select id="container"> </select>
<script>
var renderer;
$(function () {
    var dashStyles = [
        'Solid',
        'ShortDash',`enter code here`
        'ShortDot',
        'ShortDashDot',
        'ShortDashDotDot',
        'Dot',
        'Dash',
        'LongDash',
        'DashDot',
        'LongDashDot',
        'LongDashDotDot'
    ];

    $.each(dashStyles, function (i, dashStyle) {
        $('#container').append('<option value="'+dashStyle+'"></option>');
        renderer = new Highcharts.Renderer(
        $('#container').find('option').last()[0],
        200,
        10
        );
        renderer.text(dashStyle, 10, 30 * i + 20)
            .add();

        renderer.path(['M', 10, 30 * i + 23, 'L', 390, 30 * i + 23])
            .attr({
                'stroke-width': 2,
                stroke: 'black',
                dashstyle: dashStyle
            })
            .add();
    });
});
</script>

Upvotes: 0

Views: 353

Answers (1)

Munir
Munir

Reputation: 759

I didn't find a way. So what I did was use a jQuery plugin (ddslick) to render images on dropdown. I believe it's not the best option, but solved my problem and I will let it here as an alternative.

The code is something like that:

<select for="dashstyle" id="dashStyles" name="dashStyle">
    <option value="Solid" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/Solid.png") %>" ></option>
    <option value="ShortDash" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/ShortDash.png") %>" ></option>
    <option value="ShortDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/ShortDot.png") %>" ></option>
    <option value="ShortDashDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/ShortDashDot.png") %>" ></option>
    <option value="ShortDashDotDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/ShortDashDotDot.png") %>" ></option>
    <option value="Dot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/Dot.png") %>" ></option>
    <option value="Dash" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/Dash.png") %>" ></option>
    <option value="LongDash" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/LongDash.png") %>" ></option>
    <option value="DashDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/DashDot.png") %>" ></option>
    <option value="LongDashDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/LongDashDot.png") %>" ></option>
    <option value="LongDashDotDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/LongDashDotDot.png") %>" ></option>
</select>

Upvotes: 1

Related Questions