Related
I made a small graph to show some data from a bluetooth device.
I used a sample I found for VegaEmbed, it was all very easy.
But the sample uses a timer to get data, so even if there is no data the dataset will be changed. What is the simples way to update data inside VegaEmbed from another part of the website ?
I cannot call res.view.change('table', changeSet).run(); from outside VegaEmbded..
Here is snappshot of the code :
(the function handleDataChanged is called when there is bluetooth data.)
function handleDataChanged(event) {
var value = event.target.value;
value = value.buffer ? value : new DataView(value);
let result = {};
let index = 1;
datapointx = value.getInt16(index, /*littleEndian=*/false);
console.log('X: ' + value.getInt16(index, /*littleEndian=*/false));
index += 2;
datapointy = value.getInt16(index, /*littleEndian=*/true);
console.log('Y: ' + value.getInt16(index, /*littleEndian=*/false));
index += 2;
datapointz = value.getInt16(index, /*littleEndian=*/true);
console.log('Z: ' + value.getInt16(index, /*littleEndian=*/false));
index += 2;
}
</script>
<script>
document.querySelector('button').addEventListener('click', function() {
onButtonClick();
});
</script>
<script type="text/javascript">
var vlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v3.json',
data: {name: 'table'},
width: 400,
mark: 'line',
encoding: {
x: {field: 'x', type: 'quantitative', scale: {zero: false}},
y: {field: 'y', type: 'quantitative'},
color: {field: 'category', type: 'nominal'}
}
};
vegaEmbed('#chart', vlSpec).then(function(res) {
/**
* Generates a new tuple with random walk.
*/
function newGenerator() {
var counter = -1;
var previousY = [5, 5, 5];
return function() {
counter++;
var newVals = previousY.map(function(v, c)
{
console.log('c = ' + c);
var yval = 0;
if (c == 0)
yval = datapointx;
if (c == 1)
yval = datapointy;
if (c == 2)
yval = datapointz;
return {
x: counter,
// y: v + Math.round(Math.random() * 10 - c * 3),
y: yval,
category: c
};
});
previousY = newVals.map(function(v) {
return v.y;
});
return newVals;
};
}
var valueGenerator = newGenerator();
var minimumX = -100;
window.setInterval(function() {
minimumX++;
var changeSet = vega
.changeset()
.insert(valueGenerator())
.remove(function(t) {
return t.x < minimumX;
});
res.view.change('table', changeSet).run();
}, 100);
});
</script>
The simplest way to update data in an existing vega-lite chart is to use a streaming data model. There is an example in the Vega-Lite documentation here: https://vega.github.io/vega-lite/tutorials/streaming.html
I'm building Asp.net MVC website, and I'm trying to show multiple charts on the same page, but when I add second chart it covers the first one, so they never appear below each other, and they seem to be stacked over each other instead.
I tried adding table and add each chart to a table row but this didn't work also, not sure what I'm missing.
#(Html.Highsoft().Highcharts(
new Highcharts
{
Chart = new Highsoft.Web.Mvc.Charts.Chart
{
Type = ChartType.Line
},
Title = new Title
{
Text = ""
},
XAxis = new List<XAxis>
{
new XAxis
{
Type = XAxisType.Datetime,
Categories = ViewData["xValues"] as List<string>,
//Type = XAxisType.Datetime,
//TickInterval = 7 * 24 * 3600 * 1000, // one week
//TickWidth = 0,
//GridLineWidth = 1,
Labels = new XAxisLabels
{
Align = XAxisLabelsAlign.Left,
X = 3,
Y = 40
},
Crosshair = new XAxisCrosshair
{
Width = 2
}
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Labels = new YAxisLabels
{
Align = YAxisLabelsAlign.Left,
X = 3,
Y = 16,
Format = "{value:.,0f}"
},
ShowFirstLabel = false
},
},
Legend = new Legend
{
Align = LegendAlign.Left,
VerticalAlign = LegendVerticalAlign.Top,
Y = 20,
Floating = true,
BorderWidth = 0
},
PlotOptions = new PlotOptions
{
Series = new PlotOptionsSeries
{
Cursor = PlotOptionsSeriesCursor.Pointer,
Events = new PlotOptionsSeriesEvents
{
Click = "handleClick"
},
Marker = new PlotOptionsSeriesMarker
{
LineWidth = 1
}
}
},
Series = new List<Series>
{
new LineSeries
{
Name = "Error Page Count",
Data = #ViewData["Count"] as List<LineSeriesData>
},
new LineSeries
{
Color = "blue",
Name = "Error Page Rate",
Data = #ViewData["Values"] as List<LineSeriesData>
},
new LineSeries
{
Color = "black",
Name = "Error Page Rate (Users)",
Data = #ViewData["Rate"] as List<LineSeriesData>
}
}
}
, "chart"))
<script type="text/javascript">
function formatToolTip() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
#(Html.Highsoft().Highcharts(
new Highcharts
{
Title = new Title
{
Text = "Stacked bar chart"
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = new List<string> { "Apples", "Oranges", "Pears", "Grapes", "Bananas" }
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Min = 0,
Title = new YAxisTitle
{
Text = "Total fruit consumption"
},
StackLabels = new YAxisStackLabels
{
Enabled = true,
Style = new Hashtable
{
{ "fontWeght", "bold" }
}
}
}
},
//Legend = new Legend
//{
// Align = LegendAlign.Right,
// X = -30,
// VerticalAlign = LegendVerticalAlign.Top,
// Y = 25,
// Floating = true,
// BorderColor = "#CCC",
// BorderWidth = 1,
// BackgroundColor = "white"
//},
Tooltip = new Tooltip
{
Formatter = "formatToolTip"
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
Stacking = PlotOptionsColumnStacking.Normal,
DataLabels = new PlotOptionsColumnDataLabels
{
Enabled = true,
Color = "#FFFFFF",
Shadow = new Shadow()
{
Enabled = true,
Color = "black",
Width = 10,
OffsetX = 0,
OffsetY = 0
}
}
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name = "John",
Data = #ViewData["johnData"] as List<ColumnSeriesData>
},
new ColumnSeries
{
Name = "Jane",
Data = #ViewData["janeData"] as List<ColumnSeriesData>
},
new ColumnSeries
{
Name = "Joe",
Data = #ViewData["joeData"] as List<ColumnSeriesData>
}
}
}
, "chart")
)
I found the problem.
I was using the same chart id for both charts, when I renamed one of the charts both appeared with no problem.
I need some help with my code. I want to make the str sprite invisible after 10 seconds.
I'm using this link for help: http://phaser.io/examples/v2/time/basic-timed-event
var game = new Phaser.Game(500, 550, Phaser.AUTO);
//var picture;
var Pacman = function (game) {
this.map = null;
this.layer = null;
this.pacman = null;
this.safetile = 14;
this.gridsize = 16;
this.speed = 100;
this.threshold = 3;
this.turnSpeed = 200;
this.marker = new Phaser.Point();
this.turnPoint = new Phaser.Point();
this.directions = [ null, null, null, null, null ];
this.opposites = [ Phaser.NONE, Phaser.RIGHT, Phaser.LEFT, Phaser.DOWN, Phaser.UP ];
this.current = Phaser.NONE;
this.turning = Phaser.NONE;
this.score=0;
this.scoreText='';
this.bonus=0;
this.bonusText='';
};
Pacman.prototype = {
init: function () {
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
Phaser.Canvas.setImageRenderingCrisp(this.game.canvas);
this.physics.startSystem(Phaser.Physics.ARCADE);
},
preload: function () {
// We need this because the assets are on github pages
// Remove the next 2 lines if running locally
this.load.baseURL = 'https://nikosdaskalos.github.io/pacman/';
this.load.crossOrigin = 'anonymous';
this.load.image('str', 'assets/str.png');
this.load.image('dot', 'assets/dot.jpg');
this.load.image('coin', 'assets/coin.jpg');
this.load.image('tiles', 'assets/pacman-tiles.png');
this.load.spritesheet('pacman', 'assets/pacman.png');
this.load.tilemap('map', 'assets/pacman-map.json', null, Phaser.Tilemap.TILED_JSON);
// Needless to say, graphics (C)opyright Namco
},
create: function () {
this.map = this.add.tilemap('map');
this.map.addTilesetImage('pacman-tiles', 'tiles');
this.layer = this.map.createLayer('Pacman');
//picture = game.add.sprite(game.world.centerX, game.world.centerY, 'str');
//picture.anchor.setTo(0.5, 0.5);
//game.time.events.add(Phaser.Timer.SECOND * 4, fadePicture, this);
this.dots = this.add.physicsGroup();
this.map.createFromTiles(36, this.safetile, 'str', this.layer, this.dots);
this.map.createFromTiles(7, this.safetile, 'dot', this.layer, this.dots);
this.map.createFromTiles(35, this.safetile, 'coin', this.layer, this.dots);
// The dots will need to be offset by 6px to put them back in the middle of the grid
this.dots.setAll('x', 6, false, false, 1);
this.dots.setAll('y', 6, false, false, 1);
// Pacman should collide with everything except the safe tile
this.map.setCollisionByExclusion([this.safetile], true, this.layer);
// Position Pacman at grid location 14x17 (the +8 accounts for his anchor)
this.pacman = this.add.sprite((14 * 16) + 8, (17 * 16) + 8, 'pacman', 0);
this.pacman.anchor.set(0.5);
//this.pacman.animations.add('munch', [0, 1, 2, 1], 20, true);
this.physics.arcade.enable(this.pacman);
this.pacman.body.setSize(16, 16, 0, 0);
this.cursors = this.input.keyboard.createCursorKeys();
//this.pacman.play('munch');
this.move(Phaser.LEFT);
this.scoreText = game.add.text(0, 500, 'Score: 0', { fontSize: '34px Arial', fill: 'white' });
lives = game.add.group();
game.add.text(game.world.width - 340, 500, 'Lives : ', { fontSize: '34px Arial', fill: 'white' });
this.bonusText = game.add.text(360, 500, 'Bonus: 0', { fontSize: '20px Arial', fill: 'white' });
for (var i = 0; i < 3; i++)
{
var pacman = lives.create(game.world.width - 235 + (30 * i), 517, 'pacman');
pacman.anchor.setTo(0.5, 0.5);
pacman.angle = 90;
pacman.alpha = 0.4;
}
},
//function fadePicture() {
//game.add.tween(picture).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
//},
checkKeys: function () {
if (this.cursors.left.isDown && this.current !== Phaser.LEFT)
{
this.checkDirection(Phaser.LEFT);
}
else if (this.cursors.right.isDown && this.current !== Phaser.RIGHT)
{
this.checkDirection(Phaser.RIGHT);
}
else if (this.cursors.up.isDown && this.current !== Phaser.UP)
{
this.checkDirection(Phaser.UP);
}
else if (this.cursors.down.isDown && this.current !== Phaser.DOWN)
{
this.checkDirection(Phaser.DOWN);
}
else
{
// This forces them to hold the key down to turn the corner
this.turning = Phaser.NONE;
}
},
checkDirection: function (turnTo) {
if (this.turning === turnTo || this.directions[turnTo] === null || this.directions[turnTo].index !== this.safetile)
{
// Invalid direction if they're already set to turn that way
// Or there is no tile there, or the tile isn't index 1 (a floor tile)
return;
}
// Check if they want to turn around and can
if (this.current === this.opposites[turnTo])
{
this.move(turnTo);
}
else
{
this.turning = turnTo;
this.turnPoint.x = (this.marker.x * this.gridsize) + (this.gridsize / 2);
this.turnPoint.y = (this.marker.y * this.gridsize) + (this.gridsize / 2);
}
},
turn: function () {
var cx = Math.floor(this.pacman.x);
var cy = Math.floor(this.pacman.y);
// This needs a threshold, because at high speeds you can't turn because the coordinates skip past
if (!this.math.fuzzyEqual(cx, this.turnPoint.x, this.threshold) || !this.math.fuzzyEqual(cy, this.turnPoint.y, this.threshold))
{
return false;
}
// Grid align before turning
this.pacman.x = this.turnPoint.x;
this.pacman.y = this.turnPoint.y;
this.pacman.body.reset(this.turnPoint.x, this.turnPoint.y);
this.move(this.turning);
this.turning = Phaser.NONE;
return true;
},
move: function (direction) {
var speed = this.speed;
if (direction === Phaser.LEFT || direction === Phaser.UP)
{
speed = -speed;
}
if (direction === Phaser.LEFT || direction === Phaser.RIGHT)
{
this.pacman.body.velocity.x = speed;
}
else
{
this.pacman.body.velocity.y = speed;
}
// Reset the scale and angle (Pacman is facing to the right in the sprite sheet)
/* this.pacman.scale.x = 1;
this.pacman.angle = 0;
if (direction === Phaser.LEFT)
{
this.pacman.scale.x = -1;
}
else if (direction === Phaser.UP)
{
this.pacman.angle = 270;
}
else if (direction === Phaser.DOWN)
{
this.pacman.angle = 90;
}
this.current = direction;
},*/
this.add.tween(this.pacman).to( { angle: this.getAngle(direction) }, this.turnSpeed, "Linear", true);
this.current = direction;
},
getAngle: function (to) {
// About-face?
if (this.current === this.opposites[to])
{
return "180";
}
if ((this.current === Phaser.UP && to === Phaser.LEFT) ||
(this.current === Phaser.DOWN && to === Phaser.RIGHT) ||
(this.current === Phaser.LEFT && to === Phaser.DOWN) ||
(this.current === Phaser.RIGHT && to === Phaser.UP))
{
return "-90";
}
return "90";
},
eatDot: function (pacman, dot) {
dot.kill();
var audio = new Audio('assets/pacman_chomp.wav');
audio.play()
this.score+=10;
this.scoreText.text= 'Score: ' + this.score;
//setTimeout(audio.play(),2000);
if (this.dots.total === 0)
{
this.dots.callAll('revive');
}
},
/*function muteAudio() {
var audio = document.getElementById('audioPlayer');
if (audio.mute = false) {
document.getElementById('audioPlayer').muted = true;
}
else {
audio.mute = true
document.getElementById('audioPlayer').muted = false;
}
}*/
eatCoin: function(pacman,coin){//pente
coin.kill();
this.score+=20;
this.scoreText.text= 'Score: ' + this.score;
var audio = new Audio('assets/pacman_eatfruit.wav');
audio.play()
if(this.coins.total===0)
{
this.coins.callAll('revive');
}
},
eatStr: function(pacman,str){//pente
str.kill();
this.bonus+=100;
this.bonusText.text= 'Bonus: ' + this.bonus;
var audio = new Audio('assets/pacman_eatfruit.wav');
audio.play()
if(this.strs.total===0)
{
this.strs.callAll('revive');
}
},
update: function () {
this.physics.arcade.collide(this.pacman, this.layer);
this.physics.arcade.overlap(this.pacman, this.dots, this.eatDot, null, this);
this.physics.arcade.overlap(this.pacman, this.dots, this.eatCoin, null, this);
this.physics.arcade.overlap(this.pacman, this.dots, this.eatStr, null, this);
this.marker.x = this.math.snapToFloor(Math.floor(this.pacman.x), this.gridsize) / this.gridsize;
this.marker.y = this.math.snapToFloor(Math.floor(this.pacman.y), this.gridsize) / this.gridsize;
// Update our grid sensors
this.directions[1] = this.map.getTileLeft(this.layer.index, this.marker.x, this.marker.y);
this.directions[2] = this.map.getTileRight(this.layer.index, this.marker.x, this.marker.y);
this.directions[3] = this.map.getTileAbove(this.layer.index, this.marker.x, this.marker.y);
this.directions[4] = this.map.getTileBelow(this.layer.index, this.marker.x, this.marker.y);
this.checkKeys();
if (this.turning !== Phaser.NONE)
{
this.turn();
}
}
};
game.state.add('Game', Pacman, true);
</script>
</body>
</html>
So, can anyone help me with making the str invisible after 10 seconds?
You were pretty close.
I'm going to use pacman as an example, since I'm not 100% sure how you were going to fade out the coins. When Pacman eats them?
First, you want the following fadePicture function:
fadePicture: function() {
game.add.tween(this.pacman).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
},
Note how that was changed from function fadePicture().
Next, in your create function you can refer to it:
this.game.time.events.add(Phaser.Timer.SECOND * 4, this.fadePicture, this);
That replaces the following:
//game.time.events.add(Phaser.Timer.SECOND * 4, fadePicture, this);
I've created a JSFiddle with the relevant changes.
If you do want your coins to fade then I would try updating fadePicture to accept a dot/str parameter and then game.add.tween on that.
I have a requirement to render a set of time series data of contiguous blocks.
I need to describe a series of bars which could span many hours, or just minutes, with their own Y value.
I'm not sure if ChartJS is what I should be using for this, but I have looked at extending the Bar type, but it seems very hard coded for each bar to be the same width. The Scale Class internally is used for labels, chart width etc, not just the bars themselves.
I am trying to achieve something like this that works in Excel: http://peltiertech.com/variable-width-column-charts/
Has anyone else had to come up with something similar?
I found I needed to do this and the answer by #potatopeelings was great, but out of date for version 2 of Chartjs. I did something similar by creating my own controller/chart type via extending bar:
//controller.barw.js
module.exports = function(Chart) {
var helpers = Chart.helpers;
Chart.defaults.barw = {
hover: {
mode: 'label'
},
scales: {
xAxes: [{
type: 'category',
// Specific to Bar Controller
categoryPercentage: 0.8,
barPercentage: 0.9,
// grid line settings
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
type: 'linear'
}]
}
};
Chart.controllers.barw = Chart.controllers.bar.extend({
/**
* #private
*/
getRuler: function() {
var me = this;
var scale = me.getIndexScale();
var options = scale.options;
var stackCount = me.getStackCount();
var fullSize = scale.isHorizontal()? scale.width : scale.height;
var tickSize = fullSize / scale.ticks.length;
var categorySize = tickSize * options.categoryPercentage;
var fullBarSize = categorySize / stackCount;
var barSize = fullBarSize * options.barPercentage;
barSize = Math.min(
helpers.getValueOrDefault(options.barThickness, barSize),
helpers.getValueOrDefault(options.maxBarThickness, Infinity));
return {
fullSize: fullSize,
stackCount: stackCount,
tickSize: tickSize,
categorySize: categorySize,
categorySpacing: tickSize - categorySize,
fullBarSize: fullBarSize,
barSize: barSize,
barSpacing: fullBarSize - barSize,
scale: scale
};
},
/**
* #private
*/
calculateBarIndexPixels: function(datasetIndex, index, ruler) {
var me = this;
var scale = ruler.scale;
var options = scale.options;
var isCombo = me.chart.isCombo;
var stackIndex = me.getStackIndex(datasetIndex);
var base = scale.getPixelForValue(null, index, datasetIndex, isCombo);
var size = ruler.barSize;
var dataset = me.chart.data.datasets[datasetIndex];
if(dataset.weights) {
var total = dataset.weights.reduce((m, x) => m + x, 0);
var perc = dataset.weights[index] / total;
var offset = 0;
for(var i = 0; i < index; i++) {
offset += dataset.weights[i] / total;
}
var pixelOffset = Math.round(ruler.fullSize * offset);
var base = scale.isHorizontal() ? scale.left : scale.top;
base += pixelOffset;
size = Math.round(ruler.fullSize * perc);
size -= ruler.categorySpacing;
size -= ruler.barSpacing;
}
base -= isCombo? ruler.tickSize / 2 : 0;
base += ruler.fullBarSize * stackIndex;
base += ruler.categorySpacing / 2;
base += ruler.barSpacing / 2;
return {
size: size,
base: base,
head: base + size,
center: base + size / 2
};
},
});
};
Then you need to add it to your chartjs instance like this:
import Chart from 'chart.js'
import barw from 'controller.barw'
barw(Chart); //add plugin to chartjs
and finally, similar to the other answer, the weights of the bar widths need to be added to the data set:
var data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.7)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 30, 56, 65, 40],
weights: [1, 0.9, 1, 2, 1, 4, 0.3]
},
]
};
This will hopefully get someone onto the right track. What I have certainly isn't perfect, but if you make sure you have the right number of weight to data points, you should be right.
Best of luck.
This is based on the #Shane's code, I just posted to help, since is a common question.
calculateBarIndexPixels: function (datasetIndex, index, ruler) {
const options = ruler.scale.options;
const range = options.barThickness === 'flex' ? computeFlexCategoryTraits(index, ruler, options) : computeFitCategoryTraits(index, ruler, options);
const barSize = range.chunk;
const stackIndex = this.getStackIndex(datasetIndex, this.getMeta().stack);
let center = range.start + range.chunk * stackIndex + range.chunk / 2;
let size = range.chunk * range.ratio;
let start = range.start;
const dataset = this.chart.data.datasets[datasetIndex];
if (dataset.weights) {
//the max weight should be one
size = barSize * dataset.weights[index];
const meta = this.chart.controller.getDatasetMeta(0);
const lastModel = index > 0 ? meta.data[index - 1]._model : null;
//last column takes the full bar
if (lastModel) {
//start could be last center plus half of last column width
start = lastModel.x + lastModel.width / 2;
}
center = start + size * stackIndex + size / 2;
}
return {
size: size,
base: center - size / 2,
head: center + size / 2,
center: center
};
}
For Chart.js you can create a new extension based on the bar class to do this. It's a bit involved though - however most of it is a copy paste of the bar type library code
Chart.types.Bar.extend({
name: "BarAlt",
// all blocks that don't have a comment are a direct copy paste of the Chart.js library code
initialize: function (data) {
// the sum of all widths
var widthSum = data.datasets[0].data2.reduce(function (a, b) { return a + b }, 0);
// cumulative sum of all preceding widths
var cumulativeSum = [ 0 ];
data.datasets[0].data2.forEach(function (e, i, arr) {
cumulativeSum.push(cumulativeSum[i] + e);
})
var options = this.options;
// completely rewrite this class to calculate the x position and bar width's based on data2
this.ScaleClass = Chart.Scale.extend({
offsetGridLines: true,
calculateBarX: function (barIndex) {
var xSpan = this.width - this.xScalePaddingLeft;
var x = this.xScalePaddingLeft + (cumulativeSum[barIndex] / widthSum * xSpan) - this.calculateBarWidth(barIndex) / 2;
return x + this.calculateBarWidth(barIndex);
},
calculateBarWidth: function (index) {
var xSpan = this.width - this.xScalePaddingLeft;
return (xSpan * data.datasets[0].data2[index] / widthSum);
}
});
this.datasets = [];
if (this.options.showTooltips) {
Chart.helpers.bindEvents(this, this.options.tooltipEvents, function (evt) {
var activeBars = (evt.type !== 'mouseout') ? this.getBarsAtEvent(evt) : [];
this.eachBars(function (bar) {
bar.restore(['fillColor', 'strokeColor']);
});
Chart.helpers.each(activeBars, function (activeBar) {
activeBar.fillColor = activeBar.highlightFill;
activeBar.strokeColor = activeBar.highlightStroke;
});
this.showTooltip(activeBars);
});
}
this.BarClass = Chart.Rectangle.extend({
strokeWidth: this.options.barStrokeWidth,
showStroke: this.options.barShowStroke,
ctx: this.chart.ctx
});
Chart.helpers.each(data.datasets, function (dataset, datasetIndex) {
var datasetObject = {
label: dataset.label || null,
fillColor: dataset.fillColor,
strokeColor: dataset.strokeColor,
bars: []
};
this.datasets.push(datasetObject);
Chart.helpers.each(dataset.data, function (dataPoint, index) {
datasetObject.bars.push(new this.BarClass({
value: dataPoint,
label: data.labels[index],
datasetLabel: dataset.label,
strokeColor: dataset.strokeColor,
fillColor: dataset.fillColor,
highlightFill: dataset.highlightFill || dataset.fillColor,
highlightStroke: dataset.highlightStroke || dataset.strokeColor
}));
}, this);
}, this);
this.buildScale(data.labels);
// remove the labels - they won't be positioned correctly anyway
this.scale.xLabels.forEach(function (e, i, arr) {
arr[i] = '';
})
this.BarClass.prototype.base = this.scale.endPoint;
this.eachBars(function (bar, index, datasetIndex) {
// change the way the x and width functions are called
Chart.helpers.extend(bar, {
width: this.scale.calculateBarWidth(index),
x: this.scale.calculateBarX(index),
y: this.scale.endPoint
});
bar.save();
}, this);
this.render();
},
draw: function (ease) {
var easingDecimal = ease || 1;
this.clear();
var ctx = this.chart.ctx;
this.scale.draw(1);
Chart.helpers.each(this.datasets, function (dataset, datasetIndex) {
Chart.helpers.each(dataset.bars, function (bar, index) {
if (bar.hasValue()) {
bar.base = this.scale.endPoint;
// change the way the x and width functions are called
bar.transition({
x: this.scale.calculateBarX(index),
y: this.scale.calculateY(bar.value),
width: this.scale.calculateBarWidth(index)
}, easingDecimal).draw();
}
}, this);
}, this);
}
});
You pass in the widths like below
var data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.7)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 30, 56, 65, 40],
data2: [10, 20, 30, 20, 10, 40, 10]
},
]
};
and you call it like so
var ctx = document.getElementById('canvas').getContext('2d');
var myLineChart = new Chart(ctx).BarAlt(data);
Fiddle - http://jsfiddle.net/moye0cp4/
Is there any way to make the bootstrap color picker box bigger ?
I looked through it's css but i couldn't find where is setting the box height and weight.
I am using this color picker : Stefan Petre's Bootstrap Colorpicker
Assuming you're using the HTML5 native color picker, you can customize it with CSS :
input[type="color"].custom {
padding: 0;
border: none;
height: 50px;
width: 50px;
vertical-align: middle;
}
<div class="container">
<form role="form">
<div class="form-group">
<label for="cp1">HTML5 native Color Picker :</label><br>
<input type="color" name="cp1" value="#9b59b6">
</div>
<div class="form-group">
<label for="cp2">CSS Customized Color Picker :</label><br>
<input type="color" name="cp2" value="#9b59b6" class="custom">
</div>
</form>
</div>
EDIT (using bootstrap-colorpicker.js plugin)
As the width is hard-coded in the plugin, you'll need to modify the plugin itself. Here's the full JS code which will allow you to simply set your desired size, without changing the original CSS (just modify CPSize value in the first lines) :
/* =========================================================
* bootstrap-colorpicker.js [edited]
* http://www.eyecon.ro/bootstrap-colorpicker
* =========================================================
* Copyright 2012 Stefan Petre
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function( $ ) {
// Set your desired size here :
var CPSize = 300;
// Color object
var Color = function(val) {
this.value = {
h: 1,
s: 1,
b: 1,
a: 1
};
this.setColor(val);
};
Color.prototype = {
constructor: Color,
//parse a string to HSB
setColor: function(val){
val = val.toLowerCase();
var that = this;
$.each( CPGlobal.stringParsers, function( i, parser ) {
var match = parser.re.exec( val ),
values = match && parser.parse( match ),
space = parser.space||'rgba';
if ( values ) {
if (space === 'hsla') {
that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
} else {
that.value = CPGlobal.RGBtoHSB.apply(null, values);
}
return false;
}
});
},
setHue: function(h) {
this.value.h = 1- h;
},
setSaturation: function(s) {
this.value.s = s;
},
setLightness: function(b) {
this.value.b = 1- b;
},
setAlpha: function(a) {
this.value.a = parseInt((1 - a)*100, 10)/100;
},
// HSBtoRGB from RaphaelJS
// https://github.com/DmitryBaranovskiy/raphael/
toRGB: function(h, s, b, a) {
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
h *= 360;
var R, G, B, X, C;
h = (h % 360) / 60;
C = b * s;
X = C * (1 - Math.abs(h % 2 - 1));
R = G = B = b - C;
h = ~~h;
R += [C, X, 0, 0, X, C][h];
G += [X, C, C, X, 0, 0][h];
B += [0, 0, X, C, C, X][h];
return {
r: Math.round(R*255),
g: Math.round(G*255),
b: Math.round(B*255),
a: a||this.value.a
};
},
toHex: function(h, s, b, a){
var rgb = this.toRGB(h, s, b, a);
return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
},
toHSL: function(h, s, b, a){
if (!h) {
h = this.value.h;
s = this.value.s;
b = this.value.b;
}
var H = h,
L = (2 - s) * b,
S = s * b;
if (L > 0 && L <= 1) {
S /= L;
} else {
S /= 2 - L;
}
L /= 2;
if (S > 1) {
S = 1;
}
return {
h: H,
s: S,
l: L,
a: a||this.value.a
};
}
};
// Picker object
var Colorpicker = function(element, options){
this.element = $(element);
var format = options.format||this.element.data('color-format')||'hex';
this.format = CPGlobal.translateFormats[format];
this.isInput = this.element.is('input');
this.component = this.element.is('.color') ? this.element.find('.add-on') : false;
this.picker = $(CPGlobal.template)
.appendTo('body')
.on('mousedown', $.proxy(this.mousedown, this));
if (this.isInput) {
this.element.on({
'focus': $.proxy(this.show, this),
'keyup': $.proxy(this.update, this)
});
} else if (this.component){
this.component.on({
'click': $.proxy(this.show, this)
});
} else {
this.element.on({
'click': $.proxy(this.show, this)
});
}
if (format === 'rgba' || format === 'hsla') {
this.picker.addClass('alpha');
this.alpha = this.picker.find('.colorpicker-alpha')[0].style;
}
if (this.component){
this.picker.find('.colorpicker-color').hide();
this.preview = this.element.find('i')[0].style;
} else {
this.preview = this.picker.find('div:last')[0].style;
}
this.base = this.picker.find('div:first')[0].style;
this.update();
};
Colorpicker.prototype = {
constructor: Colorpicker,
show: function(e) {
this.picker.show();
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
this.place();
$(window).on('resize', $.proxy(this.place, this));
if (!this.isInput) {
if (e) {
e.stopPropagation();
e.preventDefault();
}
}
$(document).on({
'mousedown': $.proxy(this.hide, this)
});
this.element.trigger({
type: 'show',
color: this.color
});
},
update: function(){
this.color = new Color(this.isInput ? this.element.prop('value') : this.element.data('color'));
this.picker.find('i')
.eq(0).css({left: this.color.value.s*100, top: CPSize - this.color.value.b*100}).end()
.eq(1).css('top', CPSize * (1 - this.color.value.h)).end()
.eq(2).css('top', CPSize * (1 - this.color.value.a));
this.previewColor();
},
setValue: function(newColor) {
this.color = new Color(newColor);
this.picker.find('i')
.eq(0).css({left: this.color.value.s*100, top: CPSize - this.color.value.b*100}).end()
.eq(1).css('top', CPSize * (1 - this.color.value.h)).end()
.eq(2).css('top', CPSize * (1 - this.color.value.a));
this.previewColor();
this.element.trigger({
type: 'changeColor',
color: this.color
});
},
hide: function(){
this.picker.hide();
$(window).off('resize', this.place);
if (!this.isInput) {
$(document).off({
'mousedown': this.hide
});
if (this.component){
this.element.find('input').prop('value', this.format.call(this));
}
this.element.data('color', this.format.call(this));
} else {
this.element.prop('value', this.format.call(this));
}
this.element.trigger({
type: 'hide',
color: this.color
});
},
place: function(){
var offset = this.component ? this.component.offset() : this.element.offset();
this.picker.css({
top: offset.top + this.height,
left: offset.left
});
},
//preview color change
previewColor: function(){
try {
this.preview.backgroundColor = this.format.call(this);
} catch(e) {
this.preview.backgroundColor = this.color.toHex();
}
//set the color for brightness/saturation slider
this.base.backgroundColor = this.color.toHex(this.color.value.h, 1, 1, 1);
//set te color for alpha slider
if (this.alpha) {
this.alpha.backgroundColor = this.color.toHex();
}
},
pointer: null,
slider: null,
mousedown: function(e){
e.stopPropagation();
e.preventDefault();
var target = $(e.target);
//detect the slider and set the limits and callbacks
var zone = target.closest('div');
if (!zone.is('.colorpicker')) {
if (zone.is('.colorpicker-saturation')) {
this.slider = $.extend({}, CPGlobal.sliders.saturation);
}
else if (zone.is('.colorpicker-hue')) {
this.slider = $.extend({}, CPGlobal.sliders.hue);
}
else if (zone.is('.colorpicker-alpha')) {
this.slider = $.extend({}, CPGlobal.sliders.alpha);
} else {
return false;
}
var offset = zone.offset();
//reference to knob's style
this.slider.knob = zone.find('i')[0].style;
this.slider.left = e.pageX - offset.left;
this.slider.top = e.pageY - offset.top;
this.pointer = {
left: e.pageX,
top: e.pageY
};
//trigger mousemove to move the knob to the current position
$(document).on({
mousemove: $.proxy(this.mousemove, this),
mouseup: $.proxy(this.mouseup, this)
}).trigger('mousemove');
}
return false;
},
mousemove: function(e){
e.stopPropagation();
e.preventDefault();
var left = Math.max(
0,
Math.min(
this.slider.maxLeft,
this.slider.left + ((e.pageX||this.pointer.left) - this.pointer.left)
)
);
var top = Math.max(
0,
Math.min(
this.slider.maxTop,
this.slider.top + ((e.pageY||this.pointer.top) - this.pointer.top)
)
);
this.slider.knob.left = left + 'px';
this.slider.knob.top = top + 'px';
if (this.slider.callLeft) {
this.color[this.slider.callLeft].call(this.color, left/CPSize);
}
if (this.slider.callTop) {
this.color[this.slider.callTop].call(this.color, top/CPSize);
}
this.previewColor();
this.element.trigger({
type: 'changeColor',
color: this.color
});
return false;
},
mouseup: function(e){
e.stopPropagation();
e.preventDefault();
$(document).off({
mousemove: this.mousemove,
mouseup: this.mouseup
});
return false;
}
}
$.fn.colorpicker = function ( option, val ) {
return this.each(function () {
var $this = $(this),
data = $this.data('colorpicker'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
}
if (typeof option === 'string') data[option](val);
});
};
$.fn.colorpicker.defaults = {
};
$.fn.colorpicker.Constructor = Colorpicker;
var CPGlobal = {
// translate a format from Color object to a string
translateFormats: {
'rgb': function(){
var rgb = this.color.toRGB();
return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
},
'rgba': function(){
var rgb = this.color.toRGB();
return 'rgba('+rgb.r+','+rgb.g+','+rgb.b+','+rgb.a+')';
},
'hsl': function(){
var hsl = this.color.toHSL();
return 'hsl('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%)';
},
'hsla': function(){
var hsl = this.color.toHSL();
return 'hsla('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%,'+hsl.a+')';
},
'hex': function(){
return this.color.toHex();
}
},
sliders: {
saturation: {
maxLeft: CPSize,
maxTop: CPSize,
callLeft: 'setSaturation',
callTop: 'setLightness'
},
hue: {
maxLeft: 0,
maxTop: CPSize,
callLeft: false,
callTop: 'setHue'
},
alpha: {
maxLeft: 0,
maxTop: CPSize,
callLeft: false,
callTop: 'setAlpha'
}
},
// HSBtoRGB from RaphaelJS
// https://github.com/DmitryBaranovskiy/raphael/
RGBtoHSB: function (r, g, b, a){
r /= 255;
g /= 255;
b /= 255;
var H, S, V, C;
V = Math.max(r, g, b);
C = V - Math.min(r, g, b);
H = (C === 0 ? null :
V == r ? (g - b) / C :
V == g ? (b - r) / C + 2 :
(r - g) / C + 4
);
H = ((H + 360) % 6) * 60 / 360;
S = C === 0 ? 0 : C / V;
return {h: H||1, s: S, b: V, a: a||1};
},
HueToRGB: function (p, q, h) {
if (h < 0)
h += 1;
else if (h > 1)
h -= 1;
if ((h * 6) < 1)
return p + (q - p) * h * 6;
else if ((h * 2) < 1)
return q;
else if ((h * 3) < 2)
return p + (q - p) * ((2 / 3) - h) * 6;
else
return p;
},
HSLtoRGB: function (h, s, l, a)
{
if (s < 0) {
s = 0;
}
var q;
if (l <= 0.5) {
q = l * (1 + s);
} else {
q = l + s - (l * s);
}
var p = 2 * l - q;
var tr = h + (1 / 3);
var tg = h;
var tb = h - (1 / 3);
var r = Math.round(CPGlobal.HueToRGB(p, q, tr) * 255);
var g = Math.round(CPGlobal.HueToRGB(p, q, tg) * 255);
var b = Math.round(CPGlobal.HueToRGB(p, q, tb) * 255);
return [r, g, b, a||1];
},
// a set of RE's that can match strings and generate color tuples.
// from John Resig color plugin
// https://github.com/jquery/jquery-color/
stringParsers: [
{
re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
parse: function( execResult ) {
return [
execResult[ 1 ],
execResult[ 2 ],
execResult[ 3 ],
execResult[ 4 ]
];
}
}, {
re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
parse: function( execResult ) {
return [
2.55 * execResult[1],
2.55 * execResult[2],
2.55 * execResult[3],
execResult[ 4 ]
];
}
}, {
re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
parse: function( execResult ) {
return [
parseInt( execResult[ 1 ], 16 ),
parseInt( execResult[ 2 ], 16 ),
parseInt( execResult[ 3 ], 16 )
];
}
}, {
re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
parse: function( execResult ) {
return [
parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
];
}
}, {
re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
space: 'hsla',
parse: function( execResult ) {
return [
execResult[1]/360,
execResult[2] / 100,
execResult[3] / 100,
execResult[4]
];
}
}
],
template: '<div class="colorpicker dropdown-menu">'+
'<div class="colorpicker-saturation" style="width:'+CPSize+'px;height:'+CPSize+'px"><i><b></b></i></div>'+
'<div class="colorpicker-hue" style="height:'+CPSize+'px"><i></i></div>'+
'<div class="colorpicker-alpha" style="height:'+CPSize+'px"><i></i></div>'+
'<div class="colorpicker-color"><div /></div>'+
'</div>'
};
}( window.jQuery );
For Bootstrap Color Picker (based on Stefan Petre's Bootstrap Colorpicker) I needed to edit the MaxTop and MaxLeft values in defaults section of the code file. There is a section for regular or horizontal. Set the values to match your css height and width.
sliders: {
saturation: {
maxLeft: 100,
maxTop: 100,
callLeft: 'setSaturation',
callTop: 'setBrightness'
},
hue: {
maxLeft: 0,
maxTop: 100,
callLeft: false,
callTop: 'setHue'
},
alpha: {
maxLeft: 0,
maxTop: 100,
callLeft: false,
callTop: 'setAlpha'
}
},
slidersHorz: {
saturation: {
maxLeft: 100,
maxTop: 100,
callLeft: 'setSaturation',
callTop: 'setBrightness'
},
hue: {
maxLeft: 100,
maxTop: 0,
callLeft: 'setHue',
callTop: false
},
alpha: {
maxLeft: 100,
maxTop: 0,
callLeft: 'setAlpha',
callTop: false
}
}
If you want to make each instance of colorpicker bigger, change the js and css file of bootstrap pugin.
Change the below mentioned functions in bootstrap-colorpicker.js:
/** * Vertical sliders configuration * #type {Object} */
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200,
callLeft: 'setSaturationRatio',
callTop: 'setBrightnessRatio'
},
hue: {
maxLeft: 0,
maxTop: 200,
callLeft: false,
callTop: 'setHueRatio'
},
alpha: {
maxLeft: 0,
maxTop: 200,
callLeft: false,
callTop: 'setAlphaRatio'
}
},
/**
* Horizontal sliders configuration
* #type {Object}
*/
slidersHorz: {
saturation: {
maxLeft: 200,
maxTop: 200,
callLeft: 'setSaturationRatio',
callTop: 'setBrightnessRatio'
},
hue: {
maxLeft: 200,
maxTop: 0,
callLeft: 'setHueRatio',
callTop: false
},
alpha: {
maxLeft: 200,
maxTop: 0,
callLeft: 'setAlphaRatio',
callTop: false
}
}
Changes in bootstrap-colorpicker.css
.colorpicker-saturation{
width: 100px;
height: 100px;
background-image: url('');
}
.colorpicker-hue, .colorpicker-alpha {
width: 15px;
height: 100px;
float: left;
cursor: row-resize;
margin-left: 4px;
margin-bottom: 4px;
}
.colorpicker.colorpicker-horizontal.colorpicker-bar {
width: 100px;
}
.colorpicker.colorpicker-horizontal.colorpicker-hue.colorpicker-guide,
.colorpicker.colorpicker-horizontal.colorpicker-alpha.colorpicker
- guide {
display: block;
height: 15px;
background: #ffffff;
position: absolute;
top: 0;
left: 0;
width: 1px;
border: none;
margin-top: 0;
}
.colorpicker-bar-horizontal {
height: 15px;
margin: 0 0 4px 0;
float: left;
width: 100px;
}
.colorpicker-bar {
height: 15px;
margin: 5px 0 0 0;
clear: both;
text-align: center;
font-size: 10px;
}
Same has been explained here.