HTML horizontal bar chart with a goal line? - html

Is there a library that handles drawing an HTML horizontal bar chart, but with a goal line included, so the gap between the progress and the goal can be seen? I'd call this a 'horserace bar chart', but apparently no one else does.
Something like this:

you can use the library Chart.js
Example: Here is the jquery code to draw a horizontal line.
var data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
initialize: function () {
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var point = this.datasets[0].points[this.options.lineAtIndex]
var scale = this.scale
console.log(this);
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(scale.startPoint+12, point.y);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(this.chart.width, point.y);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill : false,
lineAtIndex: 2
});

Related

Is there a way to plot Multiple Lines with Plotly.JS?

I am trying to use PLOTLY.JS to plot 2 line graphs. But nothing is showing up on the screen except an empty graph. Any help? It works fine with one lines, bar charts, etc.
var plot_data = {}
var trace1 = {
x: [4, 3, 1],
y: [1, 3, 6],mode: 'lines',
type: 'scatter'
};
var trace2 = {
x: [6, 8, 9],
y: [1, 2, 4],mode: 'lines',
type: 'scatter'
};
var data = [trace1, trace2];
plot_data.push(data);
var layout =
{
title: { text: 'Task Plot', font: { family: 'Courier New, monospace', size: 24 }, xref: 'paper', x: 0.05,}
};
//var config = {responsive : true};
Tester = document.getElementById('myDash');
Plotly.newPlot(Tester, plot_data, layout);
If you look at the documentation here, you'll want to pass an array of traces to Plotly.newPlot, so you can replace plot_data with data:
Plotly.newPlot(Tester, data, layout);

Google's GeoChart wont display Cork within Ireland map

I'm drawing a province map for Ireland and for some reason Google's doesn't recognise county Cork. Someone suggested using IE-CO. But that breaks my plans on using a CSV dataset(where I have no control over county names).
Does anyone know why it doesn't work and how can I fix that?
Here a sample of my code https://jsfiddle.net/sashareds/kLjtne42/2/
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['County', 'Case'],
['Carlow', 0],
['Cavan', 41],
['Clare', 50],
['Cork', 292], //IE-CO
['Donegal', 77],
['Dublin', 2077],
['Galway', 98],
['Kerry', 79],
['Kildare', 103],
['Kilkenny', 47],
['Laois', 16],
['Leitrim', 12],
['Limerick', 96],
['Longford', 16],
['Louth', 54],
['Mayo', 55],
['Meath', 88],
['Monaghan', 17],
['Offaly', 47],
['Roscommon', 13],
['Sligo', 26],
['Tipperary', 94],
['Waterford', 43],
['Westmeath', 86],
['Wexford', 18],
['Wicklow', 105]
]);
var options = {
region: 'IE', // Africa
resolution: 'provinces',
colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
backgroundColor: 'white',
datalessRegionColor: '#fefefe',
defaultColor: '#fefefe',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
you could use a data view with a calculated column to replace the known problem countries.
and use object notation to allow the actual country name to show thru on the tooltip.
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var country = dt.getValue(row, 0);
switch (country) {
case 'Cork':
country = {v: 'IE-CO', f: country};
break;
}
return country;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1]);
see following working snippet...
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['County', 'Case'],
['Carlow', 0],
['Cavan', 41],
['Clare', 50],
['Cork', 292], //IE-CO
['Donegal', 77],
['Dublin', 2077],
['Galway', 98],
['Kerry', 79],
['Kildare', 103],
['Kilkenny', 47],
['Laois', 16],
['Leitrim', 12],
['Limerick', 96],
['Longford', 16],
['Louth', 54],
['Mayo', 55],
['Meath', 88],
['Monaghan', 17],
['Offaly', 47],
['Roscommon', 13],
['Sligo', 26],
['Tipperary', 94],
['Waterford', 43],
['Westmeath', 86],
['Wexford', 18],
['Wicklow', 105]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var country = dt.getValue(row, 0);
switch (country) {
case 'Cork':
country = {v: 'IE-CO', f: country};
break;
}
return country;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1]);
var options = {
region: 'IE', // Africa
resolution: 'provinces',
colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
backgroundColor: 'white',
datalessRegionColor: '#fefefe',
defaultColor: '#fefefe',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(view, options); // <-- draw chart with data view
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors" style="width: 90%; height: 90%;"></div>
EDIT
when using a sheet for the data source,
the view needs to be created with the data table from the sheet.
so the view definition should be created,
after the data table is received.
see following working snippet...
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': chartSettings.mapsApyKey
});
google.charts.setOnLoadCallback(drawRegionsMap);
//querying external data from a spreadsheet.
function drawRegionsMap() {
var queryString = encodeURIComponent('Select *');
var queryData = new google.visualization.Query(chartSettings.mapDataSource + queryString);
queryData.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
//Swapping IE-CO on COrk in the dta array, I assume?
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function(dt, row) {
var country = dt.getValue(row, 0);
switch (country) {
case 'Cork':
country = {
v: 'IE-CO',
f: country
};
break;
}
return country;
},
label: 'Country',
type: 'string'
}, 1]);
var options = {
region: 'IE',
resolution: 'provinces',
colorAxis: {
colors: ['#f9cb9c', '#f07b50', '#ea4435']
},
backgroundColor: 'white',
datalessRegionColor: '#fefefe',
defaultColor: '#fefefe',
};
var chart = new google.visualization.GeoChart(document.getElementById('map'));
chart.draw(view, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var chartSettings = {
mapsApyKey: "AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k",
mapDataSource: "https://docs.google.com/spreadsheets/d/1YV7VSsG_nQXmL_L44cJSz4GrxOLIBNJrgd8qPXM_NQ0/gviz/tq?gid=249758876&headers=1&range=M21:N47&tq="
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

Attempting to reverse tooltips on plotly.js bar chart

I am new to plotly.js. I reversed the bars in the bar chart, but the labels are currently staying in the same place. I want to replace the values that the
What I want is the labels in the jsfiddle. I want the y labels to display on the LEFT of the labels instead of the current spot at right labels and I would also like to display the x labels on the opposite side of the bar with the tooltip.
I hope this is clear. Thanks
Here is the jsfiddle.
https://jsfiddle.net/aj5qepv3/
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
var layout = {
xaxis:{
autorange:'reversed'
},
yaxis:{
side:'right'
}
}
Plotly.newPlot('tester', data, layout);
Does this help you?
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
var layout = {
xaxis:{
autorange:'reversed'
},
yaxis:{
side:'left'
},
xaxis:{
side:'top'
}
}
Plotly.newPlot('tester', data, layout);
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>
<div id="tester" style="width:600px;height:250px;"></div>

Change Chart.js Stacked Bar Chart bar color based on status

I have Chart.js stacked bar chart where I am displaying the number of applications received for the past 6 months, say Jan to June. Now I am stuck with this: I have to color the bars based on the status as well, so one bar can have multiple colors. How can I do this?
Current code:
$.ajax({
url: "../Overiew/GetCandidate",
data: '',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
var date = [];
for (var i in data) {
date.push(data[i].can_main_created_month
}
console.log(date);
var count = [];
for (var i = 0; i < date.length; i++) {
if (count[date[i]]) {
count[date[i]]++;
} else {
count[date[i]] = 1;
}
}
count = Object.keys(count).map(v => count[v]);
console.log(count);
var status = [];
for (var i in data) {
status.push(data[i].can_main_status);
}
console.log(status);
var inprocess = status[0]; //Blue Color
var hired = status[1]; //Green Color
var rejected = status[0]; //Red Color
var data = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: "Number of Records",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [count[1], count[2], 0, 0, count[0], 0]
}]
};
var ctx = $('#barChart').get(0).getContext("2d");
var barchart = new Chart(ctx).Bar(data);
}
}
});
Current Stacked Bar Chart:

Chart.js dynamic bar width

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/