Related
I want to draw a horizontal reference line at a particular value.
The data is of the format:
{
"Close": 15638.8,
"Date": "2022-06-21T10:00:00.000Z",
"High": 15707.25,
"Low": 15419.85,
"Open": 15455.95,
"Volume": 0,
"id": 36
}
This is what I have figured as of now. I am unsure how to use the refLines attribute.
var dataReqdFormat = {
labels: [],
datasets: [{
data: [],
label: "Nifty",
fill: true,
borderColor: (ctx) => {
const data = ctx.chart.data.datasets[ctx.datasetIndex].data;
return data[0] >= data[data.length - 1] ? 'red' : 'green'
}
}]
};
Any help is appreciated.
You can use the annotation plugin for this:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
plugins: {
annotation: {
annotations: {
line: {
type: 'line',
yMin: 16,
yMax: 16,
borderWidth: 2,
borderColor: 'red'
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.js"></script>
</body>
I am using google chart. I want to slate text on x-axis and should be minimum value is 0 in y-axis. After some google i put some snippet not it working.
Here is my code:-
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
var chart = new google.charts.Bar(document.getElementById('days-leads'));
chart.draw(data, options);
there are many options that simply do not work with material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
see --> Tracking Issue for Material Chart Feature Parity #2143
material chart --> google.charts.Bar -- packages:['bar']
core chart --> google.visualization.ColumnChart -- packages:['corechart']
however, for core charts, there is an option for...
theme: 'material'
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var loadDaysLeadGraphData = [
['Year', 'Value'],
['2005', 58],
['2006', 63],
['2007', 66],
['2008', 66],
['2009', 81],
['2010', 85],
['2011', 86],
['2012', 86],
['2013', 89],
['2014', 90],
['2015', 90]
];
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
theme: 'material'
};
var chart = new google.visualization.ColumnChart(document.getElementById('days-leads'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="days-leads"></div>
I am testing out HighCharts and ChartJS to see which to use. For Highcharts, I was able to find a hack to create a bar chart that had double grouping on the x-axis.
This is what I want to look like:
I am new to both charting JS options and wonder if there is a way to do this in ChartJS.
I have the datasets something like this:
xAxis: {
categories: [{
name: "Total",
categories: ["2004", "2008", "2012"]
}, {
name: "Lower than 2.50",
categories: ["2004", "2008", "2012"]
}]
},
yAxis: {
min: 0,
title: {
text: 'Percent (%)'
}
},
series: [{
name: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4]
}, {
name: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6]
}]
Essentially I need a nest series on the x-axis and I am open to plugins or code from Github to do this.
You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code, I use the afterDraw hook to draw the category labels and the delimiter lines.
new Chart('myChart', {
type: 'bar',
plugins: [{
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
let xCenter = (xAxis.left + xAxis.right) / 2;
let yBottom = chart.scales['y-axis-0'].bottom;
ctx.textAlign = 'center';
ctx.font = '12px Arial';
ctx.fillText(chart.data.categories[0], (xAxis.left + xCenter) / 2, yBottom + 40);
ctx.fillText(chart.data.categories[1], (xCenter + xAxis.right) / 2, yBottom + 40);
ctx.strokeStyle = 'lightgray';
[xAxis.left, xCenter, xAxis.right].forEach(x => {
ctx.beginPath();
ctx.moveTo(x, yBottom);
ctx.lineTo(x, yBottom + 40);
ctx.stroke();
});
ctx.restore();
}
}],
data: {
labels: ['2004', '2008', '2012', '2016', '2004', '2008', '2012', '2016'],
categories: ['Total', 'Lower than 2.50'],
datasets: [{
label: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4, 51.2, 51.8],
backgroundColor: 'rgba(124, 181, 236, 0.9)',
borderColor: 'rgb(124, 181, 236)',
borderWidth: 1
},
{
label: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6, 53.7, 54.6],
backgroundColor: 'rgba(67, 67, 72, 0.9)',
borderColor: 'rgb(67, 67, 72)',
borderWidth: 1
}
]
},
options: {
legend: {
position: 'bottom',
labels: {
padding: 30,
usePointStyle: true
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 80,
stepSize: 20
},
scaleLabel: {
display: true,
labelString: 'Percent (%)'
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
You have to define a second x-axis and play around with the many ticks and gridLines options.
Please take a look at below runnable code and see how it could be done. This is obviously only a draft and needs to optimized and made more generic.
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: ['2004', '2008', '2012', '2004', '2008', '2012'],
datasets: [{
label: 'Male',
data: [42.4, 43.0, 43.0, 50.3, 49.4, 48.4],
backgroundColor: 'rgba(124, 181, 236, 0.9)',
borderColor: 'rgb(124, 181, 236)',
borderWidth: 1
},
{
label: 'Female',
data: [57.6, 57.0, 57.0, 49.7, 50.6, 51.6],
backgroundColor: 'rgba(67, 67, 72, 0.9)',
borderColor: 'rgb(67, 67, 72)',
borderWidth: 1
}
]
},
options: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 80,
stepSize: 20
},
scaleLabel: {
display: true,
labelString: 'Percent (%)'
}
}],
xAxes: [{
gridLines: {
drawOnChartArea: false
}
},
{
offset: true,
ticks: {
autoSkip: false,
maxRotation: 0,
padding: -15,
callback: (v, i) => {
if (i == 1) {
return 'Total';
} else if (i == 4) {
return 'Lower than 2.50';
} else {
return '';
}
}
},
gridLines: {
drawOnChartArea: false,
offsetGridLines: true,
tickMarkLength: 20,
color: ['white', 'white', 'white', 'lightgray', 'white', 'white', 'lightgray']
}
}
]
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
How can I draw an additional horizontal grid line with a specific value in Google Bar chart. The line I want to draw is not the average. It is a specific value.
What I am getting
What I need
How can I do this?
EDIT
This my data model:
var data = google.visualization.arrayToDataTable([
["Month", "Points", { role: "style" }, "TARGET GOAL"],
["Apr-19", 17, "#c4c4c4", 25],
["May-19", 32, "#c4c4c4", 25],
["Jun-19", 20, "#c4c4c4", 25],
["Jul-19", 22, "#c4c4c4", 25],
["Aug-19", 27, "#c4c4c4", 25],
["Sep-19", 26, "#c4c4c4", 25],
["Oct-19", 18, "#008600", 25],
["Nov-19", 18, "#008600", 25],
["Dec-19", 18, "#008600", 25],
]);
And in options object I have this:
seriesType: 'bars',
series:{
3: {
type: 'line'
}
}
Since 25 is the value I want to be rendered as a line and it is in the 4th position.
And finally
var chart = new google.visualization.ComboChart(document.getElementById("container_id"));
Am I missing something?
EDIT-2 Complete script:
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart_ebcg_unitary);
function drawChart_ebcg_unitary() {
var data = google.visualization.arrayToDataTable([
["Month", "Points", { role: "style" }, "TARGET GOAL"],
["Apr-19", 17, "#c4c4c4", 25],
["May-19", 32, "#c4c4c4", 25],
["Jun-19", 20, "#c4c4c4", 25],
["Jul-19", 22, "#c4c4c4", 25],
["Aug-19", 27, "#c4c4c4", 25],
["Sep-19", 26, "#c4c4c4", 25],
["Oct-19", 18, "#008600", 25],
["Nov-19", 18, "#008600", 25],
["Dec-19", 18, "#008600", 25],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
var options = {
chartArea: {
left: 50,
width: "90%",
height: 250
},
title: "",
width: '100%',
height: 350,
bar: {groupWidth: "90%"},
legend: {position: "none"},
seriesType: 'bars',
series:{
1: {
type: 'line'
}
},
vAxis: {
minValue: 0,
title: 'SALES UNITS'
},
hAxis: {
title: 'MONTH'
},
annotations: {
textStyle: {
fontName: 'Arial, sans-serif',
color: '#000000',
fontSize: 12,
bold: true
},
alwaysOutside: true
}
};
var chart = new google.visualization.ComboChart(document.getElementById("ecbg_unitary"));
chart.draw(view, options);
}
jQuery(window).resize(function () {
drawChart_ebcg_unitary();
});
EDIT 3: Average line
How can I make the average line (please see screenshot) value (25) to appear only once, i.e at the end of the line rather than showing it on every month's column. This needs to look similar as in the screenshot under (What I need) section. Please advise.
use a ComboChart, which allows you to draw series of different types.
in the options, set the main seriesType.
then use the series option, to change the type of a specific series...
{
seriesType: 'bars',
series: {
1: {
type: 'line'
}
}
}
see following working snippet...
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart_ebcg_unitary);
function drawChart_ebcg_unitary() {
var data = google.visualization.arrayToDataTable([
["Month", "Points", { role: "style" }, "TARGET GOAL"],
["Apr-19", 17, "#c4c4c4", 25],
["May-19", 32, "#c4c4c4", 25],
["Jun-19", 20, "#c4c4c4", 25],
["Jul-19", 22, "#c4c4c4", 25],
["Aug-19", 27, "#c4c4c4", 25],
["Sep-19", 26, "#c4c4c4", 25],
["Oct-19", 18, "#008600", 25],
["Nov-19", 18, "#008600", 25],
["Dec-19", 18, "#008600", 25],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, 3]);
var options = {
chartArea: {
left: 50,
width: "90%",
height: 250
},
title: "",
width: '100%',
height: 350,
bar: {groupWidth: "90%"},
legend: {position: "none"},
seriesType: 'bars',
series:{
1: {
type: 'line'
}
},
vAxis: {
minValue: 0,
title: 'SALES UNITS'
},
hAxis: {
title: 'MONTH'
},
annotations: {
textStyle: {
fontName: 'Arial, sans-serif',
color: '#000000',
fontSize: 12,
bold: true
},
alwaysOutside: true
}
};
var chart = new google.visualization.ComboChart(document.getElementById("ecbg_unitary"));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="ecbg_unitary"></div>
EDIT
to display the annotation for the average only once,
use your own calculation for the annotation,
and only return a value if the row index equals the last row...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
},
2, 3, {
calc: function(dt, row) {
var annotation = null;
if (row === (dt.getNumberOfRows() - 1)) {
annotation = dt.getFormattedValue(row, 3);
}
return annotation;
},
type: 'string',
role: 'annotation'
}
]);
I have a chart with a single row
{"cols":[{"id":"time","label":"Time","type":"datetime"},{"id":"Value","label":"Value","type":"number"}],"rows":[{"c":[{"v":"Date(2018,7,31, 14, 49, 48, 0)"}]}]}. When I view the chart on my screen I am present with a "zoomed out" version. I much rather have something that would be "zoomed in" with correct date displayed on the axis. How can this be achieved?
I have tried hAxis.viewWindowMode: 'pretty' with no luck.
you can use hAxis.viewWindow.min & max to set the range of the axis.
and hAxis.ticks to control which axis label(s) appear.
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
"cols":[
{"id":"time","label":"Time","type":"datetime"},
{"id":"Value","label":"Value","type":"number"},
{"id":"Value","label":"Value","type":"number"},
{"id":"Value","label":"Value","type":"number"},
{"id":"Value","label":"Value","type":"number"},
{"id":"Value","label":"Value","type":"number"},
],
"rows":[
{"c":[{"v":"Date(2018,7,31, 14, 49, 48, 0)"}, {"v": 50}, {"v": 31}, {"v": 16}, {"v": 14}, {"v": 5}]}
]
});
var dateRange = data.getColumnRange(0);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 24,
right: 16,
bottom: 60,
left: 60
},
hAxis: {
format: 'MM/dd/yyyy HH:mm:ss',
viewWindow: {
min: new Date(dateRange.min.getFullYear(), dateRange.min.getMonth(), dateRange.min.getDate() - 30),
max: new Date(dateRange.max.getFullYear(), dateRange.max.getMonth(), dateRange.max.getDate() + 30)
},
ticks: data.getDistinctValues(0),
title: 'Time'
},
vAxis: {
ticks: [0, 15, 30, 45, 60]
},
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>