Getting extra color while drawing two charts using flot js

Question

Here my code

<div id="chart-revenue3" style="width:1100px; height:480px;" > </div>


         var series = [{
                data: [
                    [0, 100],
                    [1, 150],
                    [2, 125],
                    [3, 160],
                    [4, 95]
                ],
                label: "Generes",
                color:"#4598AE"
            },
            {
                data: [
                    [0, 104],
                    [1, 157],
                    [2, 178],
                    [3, 145],
                    [4, 78]], 
                label: "Playlists",
                color:"#8AA453"
            }, {
                data: [
                    [0, 55],
                    [1, 40],
                    [2, 60],
                    [3, 10],
                    [4, 20]
                ],
                label: "Home",
                color:"#A84745"
            }, {
                data: [
                    [0, 55],
                    [1, 40],
                    [2, 60],
                    [3, 10],
                    [4, 20]
                ],
                label: "Search",
                color:"#D98445"
            }, {
                data: [
                    [0, 55],
                    [1, 40],
                    [2, 60],
                    [3, 10],
                    [4, 20]
                ],
                label: "New and Hot",
                color:"#71598E"
            },
            {
              data: [
                    [0,150],
                    [1, 200],
                    [2, 250],
                    [3, 120],
                    [4, 90]
                ],
              label: "# Venues",
              points: { show: false },
              lines: { show: true,fill: false},
              yaxis: 2,
              color:"#81A0C1"
            }];

            var options = {
                xaxis: {
                    minTickSize: 1,
                    ticks: [[0,'Dafault'],[1,'Alternative'],[2,'Country'],[3,'Latin'],[4,'Rock']]
                }, yaxes: [
                        {                               
                        },
                        {                   
                            position: "right" , min:0, max: 1200,  tickSize: 200
                        }
                    ], 
                series: {
                    bars: {
                        show: true,
                        barWidth: .3,
                        align: "center",fillColor: {
                                            colors: [{ opacity: 1 }, { opacity: 1 } ]
                                        }                           
                    },
                    stack: true,
                    shadowSize:1
                },
                legend: { show: true, container: '#chart-revenue3-table' }
            };

            $.plot("#chart-revenue3", series, options);

so if i run this code am getting some extra color on bar chart..please give any idea

Answer 1

Ok, now I understand what you are trying to do. What you are missing is that you need to tell flot not to plot the # Venues series as a bar:

{
    data: [
        [0, 150],
        [1, 200],
        [2, 250],
        [3, 120],
        [4, 90]
    ],
    label: "# Venues",
    points: {
       show: false
    },
    lines: {
       show: true,
       fill: false
    },
    yaxis: 2,
    bars: {
       show: false             // <-- this is the bit you were missing
    },
    color: "#81A0C1"
}

http://jsfiddle.net/BrEJm/6/

The reason you need to do this is because in your options you set:

series: {
    bars: {
        show: true,
        //...
    }
}

And the way flot works is that it will merge those default set of series options with whatever explicit options you set for each series. So, even if you don't specify, all your series inherit bars.show = true.