I'm enjoying the great Material chart lib from Google. I'm wondering if there is a way to set a max value on one of the series when using two independent x-axis?
var options7 = {
bars: 'horizontal',
series: {
0: {axis: 'percent', maxValue: 100}, // Bind series 0 to an axis named 'percent'.
1: {axis: 'total'} // Bind series 1 to an axis named 'total'.
},
axes: {
x: {
percent: {label: 'Percent Answered', maxValue: 100}, // Bottom x-axis.
total: {side: 'top', label: 'Total Questions'} // Top x-axis.
}
},
hAxis: {title: 'Questions Answered for the Division', maxValue: 100}
};
data7.sort({column: 2});
chart7 = new google.charts.Bar(document.getElementById("deptQuestionsAnswered"));
chart7.draw(data7, options7);
I've added the maxValue field in all the places I thought it might help one at a time, as well as combined (as in above code), but I can't find any documentation on how to do this for multi-series.
Any thoughts?
Related
I would like to set the color of y-axis tick labels in Chart.js bar and line charts based on the numeric label value. Specifically, I'd like negative values to be rendered red. Additionally rather than displaying "-1", "-2", etc., I'd like to override to display "(1)", "(2)", etc.
I've seen examples for changing tick labels based on index / position, but not conditionally based on the label value. Thanks in advance for any guidance.
You can define the scriptable option scales.x.ticks.color as an array of colors that depend on the corresponding data value each. The following definition for example shows red tick labels for every bar of a value less than 10.
scales: {
x: {
ticks: {
color: data.map(v => v < 10 ? 'red' : undefined)
}
}
}
For further information, consult Tick Configuration from the Chart.js documentation.
Please take a look at below runnable code and see how it works.
const data = [4, 12, 5, 13, 15, 8];
new Chart('myChart', {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
label: 'Dataset',
data: data,
}]
},
options: {
responsive: false,
scales: {
x: {
ticks: {
color: data.map(v => v < 10 ? 'red' : undefined)
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>
I previously had a scatter graph in Chart.js 2 with the zoom plugin, in which I just had to add data and change the xAxis ticks' min/max to see a nice animated horizontal scroll from my old xAxis range to my new xAxis range.
For some reason I now use Chart.js 3.24 and the zoom plugin 1.1.1. Now the same graph with nearly the same options became quite ugly when animated:
newly added points e.g. at position (X,Y) have an animation going from (X,0) to (X,Y), instead of appearing directly at (X,Y).
when a point from a dataset is at the same position than a line from another dataset, they move at a different speed.
if many points and line are added, sometimes the lines are only shown after the "scrolling animation" ended.
sometimes a point appear at its correct final position before the "scrolling animation" even started.
The only solution I found was to disable animation when updating my graph, then use window.requestAnimationFrame to manually pan the graph myself with the zoom plugin.
Are you aware of a better/simpler recommended way to achieve this ?
Thanks in advance,
My old Chart.js options:
let zoom_options = {
pan: {
enabled: true,
mode: 'x',
rangeMin: { x: 0, y: null},
rangeMax: { x: null, y: null}
},
zoom: {
enabled: true,
drag: false,
mode: 'x',
rangeMin: { x: 0, y: null },
rangeMax: { x: null, y: null },
speed: 0.1
}
};
var ctx = graph.getContext('2d');
this._chartjs = new Chart(ctx, {
type: 'scatter',
data: {
datasets: []
},
options: {
legend: {
//display: false
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
}]
},
plugins: {
zoom: zoom_options // https://github.com/chartjs/chartjs-plugin-zoom
}
}
});
My old line options :
{
label: name,
showLine: false,
fill:false,
spanGaps: false, // I have some NaN values in my datasets.
backgroundColor: color.points_borders,
borderColor: color.line,
borderWidth:5,
pointRadius:5,
pointBorderWidth:2,
pointBorderColor: color.points_borders,
pointBackgroundColor: color.points,
data: []
}
My old update function:
this._chartjs.options.scales.xAxes[0].ticks.min = min;
this._chartjs.options.scales.xAxes[0].ticks.max = length;
this._chartjs.update();
How do I adjust the column width on a google combo chart? Below is my code, but I can't figure out how to set the column width. Depending on the data I enter, the api makes the columns different widths. I'd like them all 10px. I've been trying to set the with with bar.groupWidth but cannot. Any ideas?
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function getValueAt(column, dataTable, row) {
return dataTable.getFormattedValue(row, column);
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Time', 'Boluses', 'Total Volume', '30 mL/kg', { role: 'annotation' }], [0,0,0,1769.1, null],[9, 500, 500, 1769.1, null],[29, 250, 750, 1769.1, null],[44, 250, 1000, 1769.1, null],[114, 2000, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[288, 85, 3085, 1769.1, null],[288, 6.8, 3091.8, 1769.1, null],[348, 100, 3191.8, 1769.1, null],[348, 8, 3199.8, 1769.1, null],[408, 100, 3299.8, 1769.1, null],[408, 8, 3307.8, 1769.1, null],[360, 0, 3307.8, 1769.1, null]
]);
var view = new google.visualization.DataView(data);
var options = {
title: 'sepsis treatment summary',
fontName: 'Lato',
titleTextStyle: {fontSize: 18},
annotation: {},
vAxis: {title: 'total fluids received (mL)', minValue: 0, gridlines: {count: 6}},
hAxis: {title: 'time after alert (minutes)', viewWindow: {min: 0, max: 360}, gridlines: {count: 6}},
seriesType: "bars",
series: {
1: {color: '#99CCFF', type: "area"},
2: {color: 'red', type: "line", lineDashStyle: [10, 2]},
3: {role: "annotation"}
},
annotations: {style: 'line'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(view, options);
}
This code creates the following chart:
The API calculates a maximum width for each bar group that is roughly:
var chartWidth, // chart area width in pixels
axisRange, // axis max value - axis min value
data, // DataTable, assume axis values are in column 0 for this exercise, and that data is sorted ascending
minSeparation = axisRange, // will hold the minimum separation between daat points
barGroupWidth;
// calculate the minimum distance between any two adjacent points
for (var i = 1; i < data.getNumberOfRows(); i++) {
if (data.getValue(i, 0) - data.getValue(i - 1, 0) < minSeparation) {
minSeparation = data.getValue(i, 0) - data.getValue(i - 1, 0);
}
}
// calculate the maximum width of a bar group
barGroupWidth = chartWidth * minSeparation / axisRange;
Pleaase note that this function is a rough approximation of what the API does based on what I was able to reverse engineer.
So, if you have a chart that has a chart area 300 pixels wide with an axis range of 100 and a minimum separation between adjacent points of 10, your maximum bar group width will be 30 pixels. If you try to set the bar group width above this value, your setting will be ignored.
In your case, you have adjacent points with a separation of 0 (rows 5 and 6, 7 and 8, 9 and 10, 11 and 12), which would result in a bar group width of 0 by my rough approximation. The actual algorithm is more generous, and is likely giving you 1 pixel wide groups. There is no setting you can change to make the bar groups wider, your only recourse is to change your data set to space the values out more. This may not be easy to do, but I would suggest starting by thinking about what it means to have two events at the same time with different values, and how you might be able to represent that differently.
I have created a line graph using the google chart, I have inserted the image of the chart with this question. You may see that Y axis values are in created by 2, I would like to increase the Y Axis values by 1, is there any way to do so.
Image line http://imagebin.org/260899
I think that playing with parameter gridlines:{count} is right way to solve your problem, e.g.
hAxis: {
minValue: 0.00,
maxValue: 10.00
},
vAxis: {
minValue: 0.00,
maxValue:8.00,
baseline:4.00,
viewWindowMode:'explicit',
viewWindow:
{
max:8.00,
min:0.00
},
gridlines:{count:9}
}
I have some data that I am trying to display using the Google Visualization API (Google Chart Tools). I have been able to create the graph and it looks great except that the Secondary Y-Axis should be displayed as percentages instead of regular numbers. Here is my code and an image of what is produced.
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
//Some raw data (not necessarily accurate)'
var data = google.visualization.arrayToDataTable([
['AuditPeriod', 'Audit Count', 'Fail Percentage'],
['02-11-2012', 0, 0],
['02-18-2012', 0, 0],
['02-25-2012', 0, 0],
...
['07-21-2012', 1476, .233062],
['07-28-2012', 1651, .253180],
['08-04-2012', 2217, .210645]
]);
var options = {
vAxis: [0: {format: '#,###'}, 1: {format: '#%'}],
hAxis: { title: "Week", format: 'm/d/y'},
series: {
0:{ type: "bars", targetAxisIndex: 0 },
1: { type: "line", targetAxisIndex: 1}
}
}
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
If I set vAxis:{format: '#%'} then both axes are formated as Percentages which I don't want. Is there a way to format the second axis different form the first?
Posted this question on the Google Visualization Group and got the answer.
asgallant
You almost had it, use vAxes instead of vAxis when formatting multiple axes:
vAxes: {
0: {format: '#,###'},
1: {format: '#%'}
}