Is it possible to achieve this -
Different colour in the same bar
Color length proportional to % of data available in that year
In total there are 4 years and I want to partition each bar into a maximum of 4 parts (can be 1, 2, 3 or 4 parts depending on years selected).
What you are searching for is something called "Stacked Bar Chart". This kind of chart can be used with the library you mentioned.
As in the documentation:
Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
Here an example taken from the documentation:
var stackedBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
});
Please, for more details refer to this section of the documentation:
https://www.chartjs.org/docs/next/charts/bar/#stacked-bar-chart
I have a line chart with a y axis scale that has ticks with a step size of 5, I would like to have the gridlines have a step/interval of 1. I can't see an obvious way to do it, is there anyway to achieve this in chart.js?
Thanks in advance!
Unfortunately, with the current Chart.js API, there is no clean way to configure gridline placement independent from tick placement. In other words you cannot configure an axis to show a tick every 5 steps while still showing gridlines every 1 step.
Even though there is no clean way, there is however, still a way to get the behavior your after.
The below configuration will give you the desired results, but the only drawback is the gridlines still extend beyond the axis for the hidden tick labels (e.g. it looks a little funny).
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
},
callback: function(value, index, values) {
if (value % 5 === 0) {
return value;
} else {
return ' ';
}
},
}]
}
}
});
Here is a working example via codepen.
I have a Google Combination Chart where I am using two y axes.
At present, the baselines for each axis are at a different level.
I wish to ensure that the baselines for each axis are at the same level.
The code I am currently using to display my graph is shown below:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Sales');
data.addColumn('number', 'Total PnL');
data.addColumn('number', 'Total Margin');
data.addRows([ [6.5,150.6,0.6604],
[7.0,-275,-1],
[7.5,-128.45000,-0.30368],
[8.0,345.5,0.63904761],
[8.5,-316.56000,-0.07868],
[9.0,-118.26000,-0.09587],
[9.5,-899.0699,-0.236790],
[10.0,-242.6800,-0.40805],
[10.5,28.1700,0.00786] ]);
var options = {
title: 'Graph 1',
tooltip: {textStyle: {fontSize:14}},
titleTextStyle:{fontSize:12},
hAxis: {title: 'time', titleTextStyle: {color: 'red',fontSize:15}, textStyle: {fontSize:11,fontStyle:'bold'}},
legend: {maxLines:5,textStyle: {fontSize: 11.5}},
seriesType: "bars",
series: {
0: {type: "bar",targetAxisIndex:0,color:'#000000'},
1: {type: "line",targetAxisIndex:1,color:'#333333'},
},
vAxes:{
0:{title:'PnL',titleTextStyle: {fontSize:14},textStyle:{color: 'blue',fontSize:15},format:'£###,###,###'},
1:{title:'Margin',titleTextStyle: {fontSize:14},textStyle:{color: 'red',fontSize:15},format:'#.###%'}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('graphdiv'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='graphdiv' style='width: 900px; height: 500px;'></div>
</body>
</html>
I am aware of the following two questions on stackoverflow that are relevant to this question:
Multiple baselines with dual y-axis Google Chart
google visualizations align 0 axis with two different y-axes
It seems to me that the first of these deals specifically with the situation where the data is known beforehand. It would also be useful to see some indication of the javascript required to implement it.
The second provides some useful javascript, but it cannot seem to deal with data series where the second series includes negative values, as my dataset does.
I am aware that the most important component of both of these answers is making use of the minValue and maxValue properties of each of the vAxes. Changing these can be used to override the way that Google Charts typically decides the baseline for each axis (usually it does this by looking purely at the minimum and maximum values of the data itself for each individual axis).
I found an answer to the question above on the google visualisation api discussion group, courtesy of #asgallant. See here.
I have reproduced the answer below:
If having the baseline always be in the center of the chart is acceptable (even when there are no data points below it), there is an easy solution to this problem: get the min/max for each series and set the minValue/maxValue options to the negative of the opposite value: this will ensure that the actual min/max that the chart uses to determine the axis range is symmetrical around 0, and thus both axes should share a baseline at the center of the chart.
var axis0Range = data.getColumnRange(1);
var axis1Range = data.getColumnRange(2);
in the vAxes option:
vAxes:{
0:{
title:'PnL',
titleTextStyle: {fontSize:14},
textStyle:{color: 'blue',fontSize:15},
format:'£###,###,###',
// swap the min/max and multiply by -1
minValue: axis0Range.max * -1,
maxValue: axis0Range.min * -1
},
1:{
title:'Margin',
titleTextStyle: {fontSize:14},
textStyle:{color: 'red',fontSize:15},
format:'#.###%',
// swap the min/max and multiply by -1
minValue: axis1Range.max * -1,
maxValue: axis1Range.min * -1
}
}
chart: {
height:"300",
width:"600",
type: 'column',
viewBox:"0 0 1000 400"
}
The viewbox is there is not working in high chart.
Kindly give me a solution.
Once the chart is appended to the DOM. It is an SVG Node element on which you can set attribute like so:
setTimeout(function() {
var highchart = document.querySelector(".highcharts-container svg:last-of-type");
highchart.setAttribute("viewBox", "0 0 1324 400");
}, 10);
The timeout is to ensure highcharts had time to insert the graph in the DOM. The data populating itself happens after initialisation so 10ms is fine.
There is no such thing as viewBox with Highcharts.
Refer: API Documentation
To create border around chart you can use:
chart: {
height:"300",
width:"600",
type: 'column',
borderWidth:1, // around chart
plotBorderWidth:1, // around plot
}
I have a sample fusion table map here http://jsfiddle.net/qEGpz/
I want to set the marker to red_stars based on temperature >75 degree. But my code doesn't work correctly. Link to my fusion table is here https://www.google.com/fusiontables/DataSource?snapid=S567077W7iF Anyone please help. Thank you in advance.
With regards,
Pradeep Shankar M
Your example seems to be working fine. What is the problem? Note: the red_stars icon is fairly subtle. Looks like a standard Google Maps red marker with a black center star vs. black center circle.
Here's the list of the allowed Fusion Table iconNames. Choose Visualize -> Map to see what they look like. Perhaps you need to use "capital_small_highlight".
Took another look and another guess as what your problem is. Try this:
layer8 = new google.maps.FusionTablesLayer({
query: {
select: 'Geometry',
from: '4080901',
where: "Temp >= 75"
},
styles: [ {
where: "Temp >= '75'",
markerOptions: {
iconName: "red_stars",
}
}]
});
layer8.setMap(map);