jQuery flotcharts - tooltip shows value of the first graph only

Question

I'm using flotCharts and when i use two or more bar graphs, on hovering the bar it shows the value of the last graph loaded only, and the other graphs get the same value of the first. Here is the code:

HTML:

<div class="flot-chart">
    <div class="flot-chart-content" id="flot-chart-@ControlID"></div>
</div>

JavaScript:

var series_@ControlID = [
    @foreach (var serie in Model.Series)
    {
        <text>
            {
                label: '@serie.Name',
                @DisplayGraphType(serie)
                data: [
                    @foreach (var point in serie)
                    {
                        <text>
                            [@point.Item1, @point.Item2],
                        </text>
                    }
                ]
            },
        </text>
    }
];

var xlabels = [
    @foreach (var lbl in Model.Labels)
    {
        <text>[@lbl.Item1, "@lbl.Item2"],</text>
    }
];

function getLabel(xval) {
    var lbl = xval;
    xlabels.forEach(function(e){
        console.log(parseInt(e[0]) == parseInt(xval));
        if (parseInt(e[0]) == parseInt(xval)) {
            lbl = e[1];
        }
    });
    return lbl;
}

$(function () {
    $.plot($("#flot-chart-@ControlID"), series_@ControlID, {
        series: {
            lines: {
                lineWidth: 2,
                fill: @((Model.Series.Count() == 1).ToString().ToLower()),
            },
            bars: {
                barWidth: 0.6,
                align: "center"
            },
            points: {
                fill: @((Model.Series.Count() == 1).ToString().ToLower()),
            }
        },
        xaxis: {
            ticks: xlabels,
            tickDecimals: 0
        },
        colors: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Series.Select(o => o.Color).ToArray())),
        grid: {
            color: "#999999",
            hoverable: true,
            clickable: true,
            borderWidth: 0,
        },
        legend: {
            show: true
        },
        tooltip: true,
        tooltipOpts: {
            content: function(label, xval, yval) {
                var content = getLabel(xval) + ": " + yval;
                return content;
            },
        }
    });
});

the @ControlID value is a Guid and it is automatically generated randomly and it's always different between charts.

In the example below, when i hover to the second bar of the graph, it shows the second bar value of the other graph (only the xaxes is wrong):

Answer 1

I fixed it, the problem was that i was overwriting the same variable because i included them more than once for each graph. The solution is to change the method names to make them unique using he IDs, as Raidri said in the comments:

var series_@ControlID = [
    @foreach (var serie in Model.Series)
    {
        <text>
            {
                label: '@serie.Name',
                @DisplayGraphType(serie)
                data: [
                    @foreach (var point in serie)
                    {
                        <text>
                            [@point.Item1, @point.Item2],
                        </text>
                    }
                ]
            },
        </text>
    }
];

var xlabels_@ControlID = [
    @foreach (var lbl in Model.Labels)
    {
        <text>[@lbl.Item1, "@lbl.Item2"],</text>
    }
];

function getLabel_@(ControlID)(xval) {
    var lbl = xval;
    xlabels_@(ControlID).forEach(function(e){
        console.log(parseInt(e[0]) == parseInt(xval));
        if (parseInt(e[0]) == parseInt(xval)) {
            lbl = e[1];
        }
    });
    return lbl;
}

$(function () {
    $.plot($("#flot-chart-@ControlID"), series_@ControlID, {
        series: {
            lines: {
                lineWidth: 2,
                fill: @((Model.Series.Count() == 1).ToString().ToLower()),
            },
            bars: {
                barWidth: 0.6,
                align: "center"
            },
            points: {
                fill: @((Model.Series.Count() == 1).ToString().ToLower()),
            }
        },
        xaxis: {
            ticks: xlabels_@ControlID,
            tickDecimals: 0
        },
        colors: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Series.Select(o => o.Color).ToArray())),
        grid: {
            color: "#999999",
            hoverable: true,
            clickable: true,
            borderWidth: 0,
            @if (Model.LimitLine != null)
            {
                <text>
                    markings: [
                        { color: '#000', lineWidth: 1, yaxis: { from: @Model.LimitLine, to: @Model.LimitLine }},
                    ]
                </text>
            }
            },
        legend: {
            show: true
        },
        tooltip: true,
        tooltipOpts: {
            content: function(label, xval, yval) {
                var content = getLabel_@(ControlID)(xval) + ": " + yval;
                return content;
            },
        }
    });
});