Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to give solid colors to bar charts in flot

I need to give solid colors to bar charts... I have followed this link Bar chart Example

But i want to give solid colors and also i need to change colors myself... how to do it...

like image 207
coderslay Avatar asked Feb 16 '12 12:02

coderslay


People also ask

How do I change the color of my bar graph bar?

In a chart, click to select the data series for which you want to change the colors. On the Format tab, in the Current Selection group, click Format Selection. tab, expand Fill, and then do one of the following: To vary the colors of data markers in a single-series chart, select the Vary colors by point check box.

Can we Colour bar graph?

Use color wisely Another consideration is on how you should use color in your bar charts. Certain tools will color each bar differently by default, but this can distract the reader by implying additional meaning where none exists. Instead, color should be used with purpose.

Should bars on a bar graph be the same color?

Based on the best practice Data Visualization Solutions second bar chart is recommended as all bar charts are represented by the same color, It makes easy for the user to compare values across all bars.

When to use a bar chart?

a Bar Graph. Bar graphs are used to compare things between different groups or to track changes over time. However, when trying to measure change over time, bar graphs are best when the changes are larger.


1 Answers

First off, read the API.txt, it answers all your questions. Two things you need to do then. When you specify that you want bars, set fill: 1, which tells flot to make the colors 100% opaque. To specify a colour per series, just add a color:'red' to each data object.

So you end up with a data object like this:

var data = [
    {label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
    {label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
    {label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
];

And flot options like this:

{
    series: {
        stack: 1,
        bars: {
            show: true,
            barWidth: 0.6,
            fill:1
        }
    }
}

See it in action here: http://jsfiddle.net/ryleyb/kKdxt/

like image 116
Ryley Avatar answered Oct 08 '22 14:10

Ryley