CODEWITHSUNDEEP
jqueryflotbar-chart
Robert Lee
Robert Lee

Reputation: 1561

categorizing flot bar chart color based on common values

I currently have a flot bar chart that has a list of city and states but I am having a hard time trying to find a good method to set the same color of each bar based on the state when the bar chart is listed based on city.

I would like to use the same colors that is defined in the flot auto-generated colors in a ascending manner which is the reason why I set the data array this way. But I need to change it so that the cities within the same state have the same bar color. In this example http://jsfiddle.net/u8S9X/ the bar chart colors are auto generated based on the data array but from here I am stuck on trying to figure out the best method to categorize the color based on the state for each city.

Here is a snippet of the code:

var data = [
    {data: [[0, 1],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 1],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 2],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 2],[4, 0],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 2],[5, 0],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 4],[6, 0],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 7],[7, 0]]},
    {data: [[0, 0],[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 1]]}   
];

$.plot($("#placeholder"), data, {
    series: {
        lines: {
            fill: true,
        },
        bars: {
            show: true,
            align:'center',
            barWidth: 0.8,
        }   
    },
    xaxis: {
        ticks: [[0, "CITY, CO"],[1, "CITY, GA"],[2, "CITY, MO"],[3, "CITY, MO"],[4, "CITY, MS"],[5, "CITY, NJ"],[6, "CITY, NJ"],[7, "CITY, WA"]]
    },
    yaxis: {
        min: 0
    }
});

Upvotes: 0

Views: 3107

Answers (2)

Mark
Mark

Reputation: 108567

You need to modify your data structure so that the same states are grouped into each series:

 var data = [
    {data: [[0, 1]]},  //CO
    {data: [[1, 1]]},  //GA
    {data: [[2, 2],[3, 2]]},  //MO
    {data: [[4, 2]]},  //MS
    {data: [[5, 4],[6, 7]]},  //NJ
    {data: [[7, 1]]}  //WA
];

Here's the updated fiddle.

enter image description here

Upvotes: 1

Raidri
Raidri

Reputation: 17560

You can specify the color for each data series like in this updated fiddle:

    {data: [[0, 0],[1, 0],[2, 2],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0]], color: 'green'},

You can set this on the server-side when generating the data or with a javascript function which reads the labels array.

Upvotes: 0

Related Questions