Rectangle 27 3

There is some question regarding what you actually want but perhaps this will get you started. We will use an image of the R logo here together with a re-colored version of it flipped around a vertical line. First set up the images in pic and pic2. (These two could be replaced with any two images.) Then create the outline bars and finally fill them in. See this for more ideas: Wanted: repeated-pictogram visualization of population split

# grab image of R logo
URL <- "http://www.r-project.org/Rlogo.png"
download.file(URL, "Rlogo.png", mode = "wb")
library(png)
pic <- readPNG("Rlogo.png")

# create a pink flipped version (or read in another image)
pic2 <- pic
pic2[,, 1] <- pic2[,, 4] # make pink
pic2 <- pic2[, 200:1,] # flip 

# create outline of bars
counts <- table(mtcars$vs, mtcars$gear)
bp <- barplot(counts, col = "white")

# fill in with blue and pink reversed logos
for(i in seq_along(bp)) {
  # args are image, xleft, ybottom, xright, ytop
  rasterImage(pic, bp[i]-0.5, 0, bp[i]+0.5, counts[1,i])
  rasterImage(pic2, bp[i]-0.5, counts[1,i], bp[i]+0.5, sum(counts[,i]))
}

Update: R logo has changed so show new logo. Also flip the logo in addition to making it pink so difference can be seen in black and white as well. Added additional comments.

I want something of this form as you have provided. I have to study it so I can use it to generate some charts on my own. I am printing it black and white, so for clearer view of the charts, I want to fill various section of a stack as above with distinct objects. Thanks for your guidance.

How to create a stack bar chart with patterns rather than colours in R...

r bar-chart stacked-chart
Rectangle 27 18

Required: Splitting the data file

Both solutions require splitting up the data file into several files categorized by a column. Therefore, I've created a short ruby script, which can be found in this gist:

This script is used like this: In order to split up the data file data.csv into data.Category1.csv and data.Category2.csv, call:

# bash
ruby categorize_csv.rb --column 2 data.csv

# data.csv
# year   category   num_of_events_for_A   num_of_events_for_B
"2011";"Category1";"213";"30"
"2011";"Category2";"240";"28"
"2012";"Category1";"222";"13"
"2012";"Category2";"238";"42"
...

# data.Category1.csv
# year   category   num_of_events_for_A   num_of_events_for_B
"2011";"Category1";"213";"30"
"2012";"Category1";"222";"13"
...

# data.Category2.csv
# year   category   num_of_events_for_A   num_of_events_for_B
"2011";"Category2";"240";"28"
"2012";"Category2";"238";"42"
...

Strategy: One data file per category. One column per stack. The bars of the histogram are plotted "manually" by using the "with boxes" argument of gnuplot.

Downside: Bars have to be placed manually.

# solution1.gnuplot
reset
set terminal postscript eps enhanced 14

set datafile separator ";"

set output 'stacked_boxes.eps'

set auto x
set yrange [0:300]
set xtics 1

set style fill solid border -1

num_of_categories=2
set boxwidth 0.3/num_of_categories
dx=0.5/num_of_categories
offset=-0.1

plot 'data.Category1.csv' using ($1+offset):($3+$4) title "Category 1 A" linecolor rgb "#cc0000" with boxes, \
     ''                   using ($1+offset):3 title "Category 2 B" linecolor rgb "#ff0000" with boxes, \
     'data.Category2.csv' using ($1+offset+dx):($3+$4) title "Category 2 A" linecolor rgb "#00cc00" with boxes, \
     ''                   using ($1+offset+dx):3 title "Category 2 B" linecolor rgb "#00ff00" with boxes

Strategy: One data file per year. One column per stack. The histogram is produced using the regular histogram mechanism of gnuplot.

Downside: Since all categories are in one file, each category has the same color.

# solution2.gnuplot
reset
set terminal postscript eps enhanced 14

set datafile separator ";"

set output 'histo.eps'
set yrange [0:300]

set style data histogram
set style histogram rowstack gap 1
set style fill solid border -1
set boxwidth 0.5 relative

plot newhistogram "2011", \
       'data.2011.csv' using 3:xticlabels(2) title "A" linecolor rgb "red", \
       ''              using 4:xticlabels(2) title "B" linecolor rgb "green", \
     newhistogram "2012", \
       'data.2012.csv' using 3:xticlabels(2) title "" linecolor rgb "red", \
       ''              using 4:xticlabels(2) title "" linecolor rgb "green", \
     newhistogram "2013", \
       'data.2013.csv' using 3:xticlabels(2) title "" linecolor rgb "red", \
       ''              using 4:xticlabels(2) title "" linecolor rgb "green"

+1 nice work providing ups and downs for both approaches!

I also think, that splitting the data files is the only viable way to created those histograms. BTW: You can also accept your own answer :).

Thanks @Christoph, I thought I'd just wait a couple of days for maybe somebody adding a better way to do it.

Gnuplot Histogram Cluster (Bar Chart) with One Line per Category - Sta...

gnuplot histogram bar-chart
Rectangle 27 7

ZingChart does not have "Floating Bars" as a standard chart type, but you can easily achieve the same functionality with the hbar chart type. The offsetValues property controls the start point of a bar, and the values controls the end points.I have created a demo of this functionality here : http://demos.zingchart.com/view/SHJBSDJI

Feel free to reach out if you have any further questions - I am on the ZingChart team.

Thanks @coddee. I'll try this out. Is there a way to control the colours on your waterfall chart? That would give me what I'm looking for as well. I see there is an "options" hash available for your chart types, but I've not had a lot of luck tracking down documentation on that object.

@Brent For waterfall, we don't have a ton of documentation at the moment (we are working on a huge overhall) but I can point you to the zingchart.com/docs/chart-types/waterfall page. The options object has positive, negative, intermediate values. Under the hood, it's actually just a vertical-bar with some additional attributes. That means you can style each chart in a similar way you can style bar charts.(zingchart.com/docs/json-attributes-syntax/graph-objects/) Here's a demo : demos.zingchart.com/view/1M3VLVG6

Am I right to assume that "positive" value colors must be the same for all positive values? Can they vary?

@Brent Positive values must be the same color. If you really wanted to change the colors for each group, you will have to dig a bit deeper into the library's functionality to create your own visualization. My suggestion would be to use a standard vertical bar chart, utilize the method in the original post with offsetValues and values to adjust the placement of the bars. You can then add "rules" and "tokens" to each of the bars and to color them any way you want (Use the token %i and change the background color for each %i == n). More info : zingchart.com/docs/features/rules

ZingChart: Floating Bar Chart - Stack Overflow

charts zingchart
Rectangle 27 13

Your problem seem to come down to wrong data formatting. You need to make a matrix with the right row names structure to create plot that you want with base graphics. Here is your solution:

#your data...
d <- data.frame(row.names=c("1-2","2-3","3-4"), abc = c(10,80, 30), 
                def = c(15, 95, 55), ghi = c(20, 10, 80))
#but you make a matrix out of it to create bar chart
d <- do.call(rbind, d)
#...and you are sorted
barplot(d, beside = TRUE, ylim=c(0,100), legend.text = rownames(d), 
        args.legend = list(x = "topleft", bty="n"))

However, I sometimes like to use lattice for this kind of task. This time you don't even have to make matrix, you just keep your data.frame in original format:

d <- data.frame(column1=rep(c("1-2","2-3","3-4"), each=3), 
                column2=rep(c("abc", "def", "ghi"), 3), 
                column3=c(10, 15, 20, 80, 95, 10, 30, 55, 80))
require(lattice)
barchart(column3 ~ column1, groups=column2, d, auto.key = list(columns = 3))

plot - plotting grouped bar charts in R - Stack Overflow

r plot bar-chart
Rectangle 27 2

1 - Add a extender in Managed Bean with name of extender:

horizontalBarModel.setExtender("NAME");

2 - Create a javascript function in xhtml:

function NAME(){}

3 - Add a Canvas Overlay:

function NAME()
{
 this.cfg.canvasOverlay = {
                show: true,
                objects: [{verticalLine:{
                "shadow":"false",
                "lineWidth":5,
                "color":"rgb(255,0,0)",
                "x":50 
 }}]};

4 - This vertical/horizontal lines depend on the following files (using Primefaces 5.0):

jqplot.canvasOverlay.js

I used your approach, but I was not able to get the canvastOverlay working, I have asked a corresponding question here: stackoverflow.com/questions/35971088/

How to add a vertical line in a horizontal bar chart using primefaces ...

primefaces charts jqplot
Rectangle 27 2

Charting differs between different version of Excel and if not using something like VBA is probably best asked about on Super User if not already a question asked there (answers/guidance there may be more detailed than on SO) but since you clearly have a good understanding already maybe an example for Excel 2013 will get you started.

First, it often seems easier to arrange data in the way Excel expects, so that default settings are mostly applicable, rather than to make all the adjustment manually. So to start with I have changed your layout, preserving Start but converting Ends to durations throughout. For the sake of the image I have also chosen rows for the dates.

Select A1:G4 and as I think you are on the right lines with a Stacked Bar chart click that. Then click in the Plot area, Select Data and Switch Row/Column. Select each series (colour) in turn and format to suit (which probably means No fill for the first series).

Thanks for your response, but I can't get a chart working like your screenshot. No data appears inside, and Switch Row/Column is grayed out. How did you calculate your durations? What format are your cells in?

@Erica The times are Custom formatted as hh:mm and calculated merely as the differences between the End and Start dates. However even if formatted as Text you should still be able to switch Row/Column.

@pnuts , Hi Pnuts, how did you get the original data from the questions format to your format in your pic? Was there a formula you used? The format you have your data is what I need to do to get a stacked chaft.

@Jonathan I expect, for such a small sample, 'manually' but by formulae s/b possible - though a different question (and probably answered somewhere on SO already).

Create Bar Chart in Excel with Start Time and Duration - Stack Overflo...

excel time charts excel-2013
Rectangle 27 3

How about this, with ggplot2

# load libraries
library(ggplot2)
library(reshape2)
# load data
df1 <- read.table(header=TRUE, text=
"Date         var1     var2
2011-12-06  37608.1    12304.2
2011-12-07  76430.9    28617.7
2011-12-08  93112.3    33414.6
2011-12-09 100334.8    28112.0
2011-12-10  70474.0    23641.4
2011-12-11 231113.6    78172.5")
# reshape for plotting
df1.m <-melt(df1)
# make a quick plot
qplot(x = factor(Date), y = value, data = df1.m, geom = "bar", fill = variable)

Thanks Ben. It is not working for me. I have a data frame that was written in from a file. Date, var1 and var2 columns. I melt it and issue your qplot command but getting and error variable object not found.

when I do melt on my data frame, I get this error: Using as id variables Error in as.POSIXct.numeric(value) : 'origin' must be supplied

@mikesmith That means your real data frame isn't the same as the data you provided in your question. If you provide us with bad information, you will likely get misleading answers. Try editing your question so that it actually reflects the structure of your data. The functions str and dput may be useful here.

no bad data, it is the same. I have 3 columns date, var1 and var2. do you suggest I should convert date to str first before melting?

@joran I was able do the graph, I added my original quesion. Is there a way to modify the xaxis so that dates are little organized. Since there are too many data points, dates are not readable? thank you so much for your help. This site is great.

r - need to create a stack bar chart - Stack Overflow

r
Rectangle 27 2

You can sum first and then plot by Series.plot.bar:

df.sum(axis=1).plot.bar()
df = pd.DataFrame({1:[1,2,3],
                   2:[4,5,6],
                   3:[7,8,9]}, index=list('ABC')) * 0.8

print (df)
     1    2    3
A  0.8  3.2  5.6
B  1.6  4.0  6.4
C  2.4  4.8  7.2

print (df.sum(axis=1))
A     9.6
B    12.0
C    14.4
dtype: float64

df.sum(axis=1).plot.bar()

thanks, that's basically what I was looking for!

Actually in my case the mean value is needed not the sum, but still exactly the info I missed to continue, thanks again!

sum
mean

python - Create simple bar chart from data frame with many columns - S...

python pandas matplotlib bar-chart
Rectangle 27 1

You should be able to "fake it" by using stacked bars, but only providing multiple values for one bar. So your data variable would look something like this:

var data = google.visualization.arrayToDataTable([
    ['Label', 'Value 1', 'Value 2', 'Value 3'],
    ['Value 1', 25, 0, 0],
    ['Value 2', 0, 15, 10]
]);

Depending on how you want your graph to display you'll have to modify a few other display options, but the above should make the first bar be a single bar with the value of 25 and the second bar will be a stacked bar with two values.

You will, of course, have to set isStacked: true as well.

Google chart create stacked bar besides 2 "normal" bars - Stack Overfl...

charts stacked
Rectangle 27 1

You must use just one query, and fill the arrays in one loop. Your query must be:

"SELECT count(*) as num_rows, category from 
student WHERE category ='Full Time' or Category= 'Part Time'
Group by Category
  "

...

while($row1 = mysql_fetch_array($sql1))
{
$leg[] = $row1['category'];
$data[] = $row1['num_rows']
}

This will give an error message as 'Either X or Y data arrays contain non numeric values. Check that data is really specified as numeric data and not as strings'. Why is that?

$leg[] = $row1['num-rows']; $data[] = $row1['category'];

JpGraph: Create a PHP Bar chart using MySQL data - Stack Overflow

php mysql graph bar-chart jpgraph
Rectangle 27 1

I would suggest creating pre calculated data.frame. I'll do it with dplyr but you can use whatever you comfortable with:

library('dplyr')

df2 <- df %>% 
  arrange(Var2, desc(Var1)) %>% # Rearranging in stacking order      
  group_by(Var2) %>% # For each Gr in Var2 
  mutate(Freq2 = cumsum(Freq), # Calculating position of stacked Freq
         prop = 100*Freq/sum(Freq)) # Calculating proportion of Freq

df2

# A tibble: 9 x 5
# Groups:   Var2 [3]
   Var1  Var2  Freq Freq2     prop
  <chr> <chr> <dbl> <dbl>    <dbl>
1     C   Gr1     2     2 11.76471
2     B   Gr1     5     7 29.41176
3     A   Gr1    10    17 58.82353
4     C   Gr2    10    10 34.48276
5     B   Gr2     4    14 13.79310
6     A   Gr2    15    29 51.72414
7     C   Gr3    15    15 65.21739
8     B   Gr3     3    18 13.04348
9     A   Gr3     5    23 21.73913
ggplot(data = df2,
       aes(x = Var2, y = Freq,
           fill = Var1)) +
  geom_bar(stat = "identity") +
  geom_text(aes(y = Freq2 + 1,
                label = sprintf('%.2f%%', prop)))

Okay, I misunderstood you a bit. But I'll use same approach - in my experience it's better to leave most of calculations out of ggplot, it'll be more predictable that way.

df %>% 
  mutate(tot = sum(Freq)) %>% 
  group_by(Var2) %>% # For each Gr in Var2 
  summarise(Freq = sum(Freq)) %>% 
  mutate(Prop = 100*Freq/sum(Freq))

ggplot(data = df,
       aes(x = Var2, y = Freq)) +
  geom_bar(stat = "identity",
           aes(fill = Var1)) +
  geom_text(data = df2,
            aes(y = Freq + 1,
                label = sprintf('%.2f%%', Prop)))

Thanks a lot Andrey! I tried exactly that. However, the problem is that I do NOT want the percentages at each section of the bars (my formulation in the question might be misleading, I edited it slightly). What I actually want is one percentage above each bar representing the percentage of each Gr (Var2) with regard to all the data. Could you also help with that?

r - Adding percentages for the whole group in a stacked ggplot2 bar ch...

r ggplot2 bar-chart
Rectangle 27 1

It seems that there is no method to create column charts, so I tried to adapt the existing bar chart. Unfortunately I have no time to develop it further.

try this (making the necessary changes):

<?php

require('diag/sector.php');

class PDF_Diag extends PDF_Sector {
    var $legends;
    var $wLegend;
    var $sum;
    var $NbVal;


    function ColumnChart($w, $h, $data, $format, $color=null, $maxVal=0, $nbDiv=4)
    {

        // RGB for color 0
        $colors[0][0] = 155;
        $colors[0][1] = 75;
        $colors[0][2] = 155;

        // RGB for color 1
        $colors[1][0] = 0;
        $colors[1][1] = 155;
        $colors[1][2] = 0;

        // RGB for color 2
        $colors[2][0] = 75;
        $colors[2][1] = 155;
        $colors[2][2] = 255;

        // RGB for color 3
        $colors[3][0] = 75;
        $colors[3][1] = 0;
        $colors[3][2] = 155;

        $this->SetFont('Courier', '', 10);
        $this->SetLegends($data,$format);

        // Starting corner (current page position where the chart has been inserted)
        $XPage = $this->GetX();
        $YPage = $this->GetY();
        $margin = 2; 

        // Y position of the chart
        $YDiag = $YPage + $margin;

        // chart HEIGHT
        $hDiag = floor($h - $margin * 2);

        // X position of the chart
        $XDiag = $XPage + $margin;

        // chart LENGHT
        $lDiag = floor($w - $margin * 3 - $this->wLegend);

        if($color == null)
            $color=array(155,155,155);
        if ($maxVal == 0) 
        {
            foreach($data as $val)
            {
                if(max($val) > $maxVal)
                {
                    $maxVal = max($val);
                }
            }
        }

        // define the distance between the visual reference lines (the lines which cross the chart's internal area and serve as visual reference for the column's heights)
        $valIndRepere = ceil($maxVal / $nbDiv);

        // adjust the maximum value to be plotted (recalculate through the newly calculated distance between the visual reference lines)
        $maxVal = $valIndRepere * $nbDiv;

        // define the distance between the visual reference lines (in milimeters)
        $hRepere = floor($hDiag / $nbDiv);

        // adjust the chart HEIGHT
        $hDiag = $hRepere * $nbDiv;

        // determine the height unit (milimiters/data unit)
        $unit = $hDiag / $maxVal;

        // determine the bar's thickness
        $lBar = floor($lDiag / ($this->NbVal + 1));
        $lDiag = $lBar * ($this->NbVal + 1);
        $eColumn = floor($lBar * 80 / 100);

        // draw the chart border
        $this->SetLineWidth(0.2);
        $this->Rect($XDiag, $YDiag, $lDiag, $hDiag);

        $this->SetFont('Courier', '', 10);
        $this->SetFillColor($color[0],$color[1],$color[2]);
        $i=0;
        foreach($data as $val) 
        {
            //Column
            $yval = $YDiag + $hDiag;
            $xval = $XDiag + ($i + 1) * $lBar - $eColumn/2;
            $lval = floor($eColumn/(count($val)));
            $j=0;
            foreach($val as $v)
            {
                $hval = (int)($v * $unit);
                $this->SetFillColor($colors[$j][0], $colors[$j][1], $colors[$j][2]);
                $this->Rect($xval+($lval*$j), $yval, $lval, -$hval, 'DF');
                $j++;
            }

            //Legend
            $this->SetXY($xval, $yval + $margin);
            $this->Cell($lval, 5, $this->legends[$i],0,0,'C');
            $i++;
        }

        //Scales
        for ($i = 0; $i <= $nbDiv; $i++) 
        {
            $ypos = $YDiag + $hRepere * $i;
            $this->Line($XDiag, $ypos, $XDiag + $lDiag, $ypos);
            $val = ($nbDiv - $i) * $valIndRepere;
            $ypos = $YDiag + $hRepere * $i;
            $xpos = $XDiag - $margin - $this->GetStringWidth($val);
            $this->Text($xpos, $ypos, $val);
        }
    }

    function SetLegends($data, $format)
    {
        $this->legends=array();
        $this->wLegend=0;
        $this->NbVal=count($data);
    }
}


$pdf = new PDF_Diag();
$pdf->AddPage();


$data[0] = array(470, 490, 90);
$data[1] = array(450, 530, 110);
$data[2] = array(420, 580, 100);


// Column chart
$pdf->SetFont('Arial', 'BIU', 12);
$pdf->Cell(210, 5, 'Chart Title', 0, 1, 'C');
$pdf->Ln(8);
$valX = $pdf->GetX();
$valY = $pdf->GetY();
$pdf->ColumnChart(110, 100, $data, null, array(255,175,100));
//$pdf->SetXY($valX, $valY);

$pdf->Output();


?>

pdf - How to create Double bar diagram using fpdf php? - Stack Overflo...

php pdf bar-chart fpdf
Rectangle 27 3

You want to use Chart.js plugins. They let you handle some events triggered through the chart creation such as the initialization, the resize, etc.

You also want to use createLinearGradient to create a gradient color usable in a canvas :

var gradient = ctx.createLinearGradient(0,0,200,0); // Dimensions of the color rectangle
gradient.addColorStop(0,"green"); // First color
gradient.addColorStop(1,"white"); // Second color

You first have to add the two colors of the gradient you want to see in your chart data :

datasets: [{
    label: "label1",
    backgroundColor: [
        ['#26343b', 'white'], // `white` and `#FFFFFF` both stand for a white color
        ['#26343b', 'white'],
        ['#26343b', 'white'],
        ['#26343b', 'white']
    ],
    data: [4, 6, 8, -3],
}, {
    // ...
}]

Then you need to add the following plugin before you create the chart (using new Chart()), or else it won't be added into the chart's plugin service :

Chart.pluginService.register({
    beforeUpdate: function(chart) {

        // For every dataset ...
        for (var i = 0; i < chart.config.data.datasets.length; i++) {

            // We store it
            var dataset = chart.config.data.datasets[i];

            // For every data in this dataset
            for (var j = 0; j < dataset.data.length; j++) {

                // We store the data model (graph information)
                var model = dataset._meta[0].data[j]._model;

                // We use the model to get the left & right borders X position 
                // and to create the gradient
                var start = model.x,
                    end = model.x + model.width,
                    gradient = rateOfReturn.createLinearGradient(start, 0, end - 5, 0);

                // The colors of the gradient that were defined in the data
                gradient.addColorStop(0, dataset.backgroundColor[j][0]);
                gradient.addColorStop(1, dataset.backgroundColor[j][1]);

                // We set this new color to the data background
                dataset.backgroundColor[j] = gradient;
            }
        }
    }
});

Follows the result of the plugin with your example, which you can find on this jsFiddle :

That was the answer i was looking for. Great job. I need a gradient from top to bottom, is it possible to do that ?

@kdpatel I don't have time right now to work on this, but I'm sure you can do it by changing the createLineGradient arguments with the model height and Y position :)

This is great starting point for V2.3, but it isn't working under V2.5. You can find my attempt to make it working on this jsFiddle, but the problem with hover event still unresolved.

javascript - How to show gradient vertically on chart js grouped bar c...

javascript charts chart.js
Rectangle 27 7

I do not believe the following fix will work in the CFCharts in ColdFusion 11 since it uses a ~late-2015 version of ZingChart, but a change was added in v2.2.2 of ZingChart that gives a remedy for this issue.

By setting the scale-x offset:0, the scale will be centered on the node and will behave as a line chart will. Do note that an additional property inside of plotarea called "maskTolerance" will need to be set to [0,0]. This will ensure the bars do not bleed past the scale-y boundaries.

var myConfig = {
type: "mixed",
plotarea: {
	maskTolerance: [0, 0]
},
scaleX: {
	offset: 0,
	guide: {
		visible: true, //set to false by default on some chart types
		lineColor: "red",
		lineWidth: 1
	}
},
series: [{
	type: "bar",
	values: [35, 42, 67, 79, 25, 34, 67, 85]
}, {
	values: [40, 27, 38, 68, 41, 49, 50, 65]
}]
};

zingchart.render({
id: 'myChart',
data: myConfig,
height: 200,
width: "100%"
});
<!DOCTYPE html>
<html>

  <head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>

  <body>
  	<div id='myChart'></div>  
  </body>

</html>

Thank you very much for your code example. Works like a charm when using the most recent ZingChart library. Unfortunately you're right when it comes to the current ColdFusion implementation of ZingChart. offset : 0 doesn't show any effect at all.

coldfusion - How to align vertical guides between line and bar charts ...

charts coldfusion coldfusion-11 zingchart cfchart
Rectangle 27 24

I was able to do without extra plugins. If you set the xAxes and yAxes to stacked:true under scales, you can create a stacked horizontal graph.

scales: {
     xAxes: [{
          stacked: true,
     }],
     yAxes: [{
          stacked: true
     }]
}

Bonus: Includes code to show the values on the graph

javascript - Horizontal stacked bar chart with chart.js - Stack Overfl...

javascript chart.js
Rectangle 27 1

This is known as the "off canvas" effect.

jquery - How to create a Vertical Nav Bar in HTML as on Youtube or Med...

jquery html css twitter-bootstrap navigationbar
Rectangle 27 4

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to the total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 180px;
}

/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear: both;
}

/*Opera Fix*/
body:before {
    /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

*/

css - force footer on bottom on pages with little content - Stack Over...

css footer sticky
Rectangle 27 1

An easy approach is to put the created "letters" in an Array and call an update function (TimerEvent.TIMER or Event.ENTER_FRAME) wich moves/animates the letters. If the letter is inside the vertical bar (in range of x) and the correct key is pressed then you just lock it there.

stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUpHandler);
private function onKeyUpHandler(event : KeyboardEvent) : void
{
    for(var i : int = 0 ; i < _letterList.length ; i++)
    {
        if(isInRange(_letterList[i]))
        {
            if(_letterList[i].validateKey(event.keyCode))
            {
                // lock on position and skip further updates
            }
        }
    }
}

Flash actionscript guidance needed? - Stack Overflow

flash actionscript-3
Rectangle 27 2

With the approach you are taking (e.g. creating a new Chart object each time the date range changes), then you must first destroy the previous chart and then create the new one.

You can use the .destroy() prototype method to do this. Here is exactly what the API states.

Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.js, along with any associated event listeners attached by Chart.js. This must be called before the canvas is reused for a new chart.

Therefore, your code would look something like this (notice that we destroy and re-create).

With that said, it's expensive the destroy/create over and over and actually it isn't even necessary. There is another prototype method called .update() that you can use to just re-render the chart if you have changed it's underlying data or label objects.

Here is a jsfiddle showing an example of changing the underlying data and labels and then re-rendering the chart. I would highly recommend you take this approach instead.

// define a variable to store the chart instance (this must be outside of your function)
var myChart;

function loadFTPRChart(startdate, enddate) {
  var BCData = {
    labels: [],
    datasets: [{
      label: "Pass %",
      backgroundColor: "#536A7F",
      data: [],
      stack: 1
    }, {
      label: "Fail %",
      backgroundColor: "#e6e6e6",
      data: [],
      stack: 1
    }, {
      label: "Auto %",
      backgroundColor: "#286090",
      data: [],
      stack: 2
    }, {
      label: "Manual %",
      backgroundColor: "#f0f0f0",
      data: [],
      stack: 2
    }]
  };

  $.getJSON("content/FTPR_AM_Graph_ajax.php", {
      startdate: startdate,
      enddate: enddate,
      location: "M"
    })
    .done(function(data) {
      console.log("data", data);
      $.each(data.aaData, function(key, val) {
        if (val == "") {
          return true
        }
        BCData.labels.push("Coater " + val[0]);
        BCData.datasets[0].data.push(parseFloat(val[2]));
        BCData.datasets[1].data.push(parseFloat(100 - val[2]));
        BCData.datasets[2].data.push(parseFloat(val[1]));
        BCData.datasets[3].data.push(parseFloat(100 - val[1]));
      });

      var option = {
        responsive: true,
      };
      console.log("BCData", BCData);

      // if the chart is not undefined (e.g. it has been created)
      // then just update the underlying labels and data for each
      // dataset and re-render the chart
      if (myChart) {
        myChart.data.labels = BCData.labels;
        myChart.data.datasets[0].data = BCData.datasets[0].data;
        myChart.data.datasets[1].data = BCData.datasets[1].data;
        myChart.data.datasets[2].data = BCData.datasets[2].data;
        myChart.data.datasets[3].data = BCData.datasets[3].data;
        myChart.update();
      } else {
        // otherwise, this is the first time we are loading so create the chart
        var ctx = document.getElementById("mybarChart2").getContext("2d");
        myChart = new Chart(ctx, {
          type: 'groupableBar',
          data: BCData,
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  max: 100,
                },
                stacked: true,
              }]
            }
          }
        });
      }
    });
}

Sorry, I know I should probably know how to implement your suggestion, but do you think you can give me a bit more of an idea what/how to do this? Bit of HTML: <canvas id="mybarChart2" height="350"></canvas>

Sure, its pretty straightforward. I updated my answer with examples of both approaches. Since you didn't provide a working jsfiddle (or something similar) I of course can't test this, but you should be able to run with these examples.

Thank you so much! The second option you provided works. It's a bit slow, I'll try to figure out why/ways to speed it up. If you have any suggestions I'm all ears. But as it stands, I really appreciate the help and have marked it as the correct answer.

@jordanwillis Hey I tried to call the .destroy() but it still shows the old chart when hovering. Any ideas?

javascript - Chartjs Bar Chart showing old data when hovering - Stack ...

javascript jquery chart.js