Search code examples
javascriptjqueryasp.netjquery-pluginsflot

Jquery Flot Chart label not showing


So I am learning flot charts, but I am having a difficult time getting the label to show up or the legend when using options. Certain of the options will work (like the fill and fillColor of the lines), but not others? Banging my head on desk

For some reason it doesn't show up at all in jsfiddle, but it does in my web app.

<h1>Flot Examples</h1>
<div id="placeholder" class="placeholder" style="width:500px; height:300px; background-color:darkcyan;"  runat="server">

<script type="text/javascript">
    var data, data1, dataTime, options, chart;
    var date = new Date(); //2015
    var date1 = date.setDate(date.getDate());
    var date2 = date.setDate(date.getDate() - 365); //2015
    var date3 = new Date(date.getFullYear() - 2, date.getMonth() - 5, date.getDate() - 6);

    dataTime = [
        [date1, 1],
        [date2, 3],
        [date3, 6]
    ];
    data2 = [dataTime];

    data1 = [
        [1, 4],
        [2, 5],
        [3, 6],
        [4, 9],
        [5, 7],
        [6, 6],
        [7, 2],
        [8, 1],
        [9, 3]
    ];
    data = [data1];
    options = {
        series: {
            //bars: { show: true }
            lines: {
                show: true,
                // fill: true,
                //fillColor: "#000000"
            },

        },
        xaxis: {
            mode: "time"
        },
        yaxis: {
            min: 1
        },
        selection: {
            mode: "x"
        },
        grid: {
            show: true
        },
        //   clickable: true,
        // hoverable: true,
        shadowSize: 20,
        highlightColor: "#ffffff", //this is the color of the circle that appears
        label: {
            string: "invisible"
        },
        tooltip: true,
        legend: {
            show: true,
            labelBoxBorderColor: "#ffffff",
            position: "ne",
            margin: 10,
            backgroundColor: "#66ccff",

        }

    };

    $(document).ready(function() {
        //  chart1 = $.plot($('<%= placeholder.ClientID %>'), data, options);
        chart1 = $.plot($(".placeholder"), data2, options);
    });
</script>![enter image description here][1]

Solution

  • I'd recommend this plugin for axis labels: https://github.com/markrcote/flot-axislabels. It lets you add a label for both x and y axis really simply.