I'm using Google Visualization to display a target vs performance chart. The chart is split into a few months, and within each month, I have several departments, each with their own targets. The actual performance will be displayed using bar (column) charts, while I'm intending to have the targets displayed as a line. For now, I've chosen to use a stepped area chart with 0 opacity and disconnected lines for the targets, as recommended by this comment.
The issue now is that the stepped area chart displays across the entire category, but I need it to display only across a single column. Currently what I have is (copy and paste the code in the Google Code Playground to see the results):
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
connectSteps: false,
series: {3: {type: "steppedArea", areaOpacity: 0}}
});
}
I'm also open to other possible ideas of how to display a target vs performance chart, so other solutions that can also create such a chart would be greatly appreciated. Thanks.
Use the "interval" column role to add a small horizontal line in line with the column:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Y1');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addColumn('number', 'Y2');
data.addColumn({type: 'number', label: 'Y1 Target', role: 'interval'});
data.addRows([
['Jan', 5, 7, 4, 10],
['Feb', 3, 4, 8, 6],
['Mar', 6, 3, 6, 8],
['Apr', 2, 5, 3, 6]
]);
see example at http://jsfiddle.net/asgallant/M7YTG/2/
Related
I am using ChartJS bar chart to show sales data for the year that has both - data for past months and data for upcoming months of the year. What i would like to do is to show the past months data in solid blue bars and for upcoming months, I would like to transparentize the blue to 50%. This is just to indicate that the coming months data are an estimate and not actual sales. Appreciate if someone can give me any pointers.
You can define the backgoundColor as an array of colors created with the rgba() function. The forth parameter of rgba() defines the transparency.
Please take a look at below runnable code and see how it works.
new Chart('myChart', {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'My Dataset',
data: [2, 5, 3, 4],
backgroundColor: ['rgba(54, 162, 235, 1)', 'rgba(54, 162, 235, 1)', 'rgba(54, 162, 235, 0.5)', 'rgba(54, 162, 235, 0.5)']
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
<canvas id="myChart" height="120"></canvas>
Note that instead of rgba(54, 162, 235, 1), you can also simply use rgb(54, 162, 235) to represent the solid blue color.
I am trying to create a combined bar chart and line graph using chart js:
new Chart(ctx { ... }
I found this sample on Plunker of a combined bar chart and line graph. The line graph appears drawn on top of the bar chart which is the way I want it.
However I copied the sample into jsfiddle and for some reason the bars are drawn over the line.
Is there a way I can explicitly ensure the line graph appears on top of the bar chart?
I have realised it goes according to the order in which you define them. When you define the line graph first then it appears above the bar chart. You can see this in my updated jsFiddle
datasets: [{
label: "Sales",
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
}, {
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
} ]
However, this doesn't explain why the original Plunker example doesn't have this issue
I have setup my line chart like this:
How can I remove the green color from the background and make it transparent
Set fill property as false in Dataset options
datasets: [
{
label: "",
fill: false,
.....
.......
data: [65, 59, 80, 0, 56, 55, 40],
}
]
You can refer this fiddle:
https://jsfiddle.net/red_stapler/u5aanta8/1/
Also Reffer chartJs Docs
https://www.chartjs.org/docs/latest/charts/line.html
I am working on geochart.Is there any example showing how to mark a place,given only its name? I have done the same with geocoordinates,and with city names,country names with pure javascript
It depends on if Google knows where your place names are. For instance, this code will create a map with no problem of all the locations stated. Give it a try with your data and see if it plots:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Place', 'Popularity'],
['Statue of Liberty', 200],
['Eiffel Tower', 300],
['Big Ben', 400],
['Tokyo Tower', 500],
['Great Pyramids', 600],
['Gobi Desert', 700]
]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, {width: 556, height: 347, displayMode: 'markers'});
}
While it looks like the Statue of Liberty didn't plot, it's on there, it's just small and pinkish
I can insert annotations on specific datasets on the graph but I wish to have multiple lines on the graph without associating the annotation with a specific line, but with a date instead.
Here is an example of what I want to do. Notice the bubbles appended to the x-axis and not a specific line on the graph.
I've read through the API and can't see an option like this but wondering if someone knows a way.
Thanks.
No experience, but my instant reaction was that you might try a series with the annotations attached with all zeros as the data - and exclude it from the legend?
If you don't mind using an SVG Line Chart with Annotations you can recreate this as well with more flexibility. If you set the Annotation column to immediately follow the X-axis values, the annotations will appear at the very bottom of the chart (on the axis) and not be attached to any category. Here is a sample:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number','Day');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', '.DJI');
data.addColumn('number', '.INX');
data.addColumn('number', '.INIC');
data.addRows([
[1, null, null, 1000, 400, 300],
[2, 'A', 'did stuff', 1170, 460, 400],
[3, 'B', 'did more stuff', 660, 1120, 540],
[4, null, null, 1030, 540, 620],
[5, 'C', 'stopped stuff', 1070, 600, 700]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {focusTarget: 'category',
width: 500, height: 400,
vAxis: {maxValue: 10},}
);
}
This ends up looking like this: