With a Perl script I generate numerous Google Line Charts for 20 and more series of data at once.
The legend labels are of the form: a serial number appended by an iterating #counter.
Unfortunately, starting with #10 those counters are cut off:
Is there maybe a way to stop Google charts from doing that?
My quite simple chart code is below:
var data = { ...... };
function drawCharts() {
for (var csv in data) {
var x = new google.visualization.DataTable(data[csv]);
var options = {
title: csv,
width: 800,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById(csv));
chart.draw(x, options);
}
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
To get full legend in your chart just add chartArea width and height as below
var options = {
title: csv,
width: 800,
height: 600,
chartArea: { width: "50%", height: "70%" }
};
Take a look at this jqfaq.com to get a working sample
in chartArea, make width 30 percent move the graph to the center.
chartArea: { width: "30%", height: "50%" }
Related
I am using google pie chart how can I set colors when my data comes dynamically.
I am using below logic to set colors
var options = {
width: 400,
height: 240,
title: 'Toppings I Like On My Pizza',
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
chart.draw(data, options);
but in these case the data is comes in 5 array but how to handle when data is dynamically comes.
Thank you in advance.
First of all, I am not sure if what I am looking for is called stacked column chart or else.
Lib is either Google Charts or amCharts.
I have a series of values for the last 28 days representing e-mails sent, e-mails opened and e-mails with links clicked. For each date, the column's max. value should be the number of e-mails sent. This column is then divided based on the two other values. Basically what the chart should show is that from 20 mails sent, 17 were opened and 5 even had people click links inside them.
With a regular stacked column approach and the numbers 20, 17 and 5, this would render a column peaking at 42 with one section covering 0-20, one 20-37 and one 37-42.
What I want is a column peaking at 20, in front of it a column peaking at 17 and in front of that a column peaking at 5. Similar to a diff chart.
I could theoretically achieve this by modifying my data taking the 5 mails with clicks, the opened mails are 17 minus 5 = 12 and the mails sent are 20 minus 17 = 3. Then 5+12+3 = 20 what I wanted. However, hovering the stacked column will display the wrong values 5, 12 and 3 in the tooltip instead of 5, 17 and 20. So I would have to render custom tooltips.
You guys have any idea if there is a simple solution for my problem?
for the scenario you describe theoretically,
you would not need custom tooltips.
when loading the google data table, we can use object notation.
we can provide the value (v:), and the formatted value (f:)
{v: 12, f: '17'}
the tooltip will use the formatted value by default.
in addition, you could use a DataView to perform the calculation.
which would allow you to load the data as normal.
here, calculated columns are used to adjust the value that is plotted,
but display the original value.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// create data table
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Emails with Clicks');
data.addColumn('number', 'Emails Opened');
data.addColumn('number', 'Emails Sent');
// add data
data.addRow(['06/2020', 5, 17, 20]);
// create number format
var formatNumber = new google.visualization.NumberFormat({
pattern: '#,##0'
});
// create data view
var view = new google.visualization.DataView(data);
// build view columns
var viewColumns = [0];
for (var i = 1; i < data.getNumberOfColumns(); i++) {
addColumn(i);
}
function addColumn(index) {
viewColumns.push({
calc: function (dt, row) {
var currentColumnValue = dt.getValue(row, index);
var previousColumnValue = 0;
if (index > 1) {
previousColumnValue = dt.getValue(row, index - 1);
}
var adjusttedColumnValue = currentColumnValue - previousColumnValue;
var formattedColumnValue = formatNumber.formatValue(currentColumnValue);
return {
v: adjusttedColumnValue,
f: formattedColumnValue
};
},
label: data.getColumnLabel(index),
type: data.getColumnType(index),
});
}
// set view columns
view.setColumns(viewColumns);
// create options
var options = {
chartArea: {
left: 64,
top: 40,
right: 32,
bottom: 40,
height: '100%',
width: '100%'
},
height: '100%',
isStacked: true,
legend: {
alignment: 'end',
position: 'top'
},
width: '100%'
};
// create, draw chart with view
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
window.addEventListener('resize', function () {
chart.draw(view, options);
});
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
.chart {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>
Note: If you want to stack columns, one in front of the other, similar to a Diff Chart,
check this answer...
Google Chart - More then 1 difference column
I have a line chart and I can export chart to pdf or image.
I wonder if I can put some additional text below the chart, only when I export it? Such as additional information about the chart data.
I'd like to export the chart that looks like this:enter image description here
I use Ionic v3.
If possible, I would like to see a sample code.
Thank you.
Refer to this live demo: http://jsfiddle.net/kkulig/fje0agem/
I created some space for the text area by manipulating chart.height and chart.marginBottom in exporting.chartOptions. I adjusted the position of some elements (credits, legend) by changing their y offset.
Text and lines can be rendered via SVGRenderer. load event is a proper place to put the code responsible for that.
chart: {
height: 300,
width: 600
},
exporting: {
chartOptions: {
chart: {
height: 600,
marginBottom: 300,
events: {
load: function() {
var renderer = this.renderer;
renderer.path(['M', 30, 385, 'L', 570, 385, 'Z']).attr({
stroke: 'black',
'stroke-width': 1
}).add();
renderer.text('Some text...', 30, 400).add();
}
}
},
legend: {
y: -220
},
credits: {
position: {
y: -220
}
}
}
}
API references:
https://api.highcharts.com/highcharts/exporting.chartOptions
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
With Highcharts 7.2.0 you can add a caption (API) besides the chart which is included in the export.
For example (JSFiddle demo):
Highcharts.chart('container', {
series: [{
data: [1, 4, 3, 5],
}],
caption: {
text: '<b>Example</b><br><em>Lorem ipsum dolor sit amet.</em>'
}
});
I'm having trouble changing the size of a google pie chart that I have made. I'm trying to draw multiple pie charts with the size of each chart proportional to the total amount of data that I'm feeding it. I am aware that we are able to change the size of the div container of the chart by adding options to the chart like as follows:
var options = {width: 400, height: 300};
However, what I'm interested in, is not changing the size of the div, but of the actual pie chart itself.
Is there any way I can change the radius of the pie chart?
I've searched around and wasn't able to find anything. Here is quick paint of what I mean:
As you can see, what I would like is for the div to remain on the same size but the size of the circle to change, depending on what value I feed it.
Any help is appreciated
try the option for chartArea
e.g.
chartArea: {width: 400, height: 300}
Try the example as below
http://jsfiddle.net/toddlevy/c59HH/
function initChart() {
var options = {
legend:'none',
width: '100%',
height: '100%',
pieSliceText: 'percentage',
colors: ['#0598d8', '#f97263'],
chartArea: {
left: "3%",
top: "3%",
height: "94%",
width: "94%"
}
};
I'm styling a google chart using the javascript api. I want to change the background of the area where the data is plotted. For some reason when I set background options like so:
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
It changes the the background of the whole chart and not the area where the data is plotted. Any ideas on how to only change the background of the plotted area?
Thanks
pass the options like this
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};
add this to your options:
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}
The proper answer is that it depends if it is classic Google Charts or Material Google Charts. If you use classic version of the Google Charts, multiple of the above suggestion work. However if you use newer Material type Google charts then you have to specify the options differently, or convert them (see google.charts.Bar.convertOptions(options) below). On top of that in case of material charts if you specify an opacity for the whole chart, the opacity (only) won't apply for the chart area. So you need to explicitly specify color with the opacity for the chart area as well even for the same color combination.
In general: material version of Google Charts lack some of the features what the Classic has (slanted axis labels, trend lines, custom column coloring, Combo charts to name a few), and vica versa: the number formating and the dual (triple, quadruple, ...) axes are only supported with the Material version.
In case a feature is supported by both the Material chart sometimes requires different format for the options.
<body>
<div id="classic_div"></div>
<div id="material_div"></div>
</body>
JS:
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2009', 1120, 580],
['2010', 1200, 500],
['2011', 1250, 490],
]);
var options = {
width: 1000,
height: 600,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
// Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
// for that use fillOpacity versions
// Colors only the chart area, simple version
// chartArea: {
// backgroundColor: '#FF0000'
// },
// Colors only the chart area, with opacity
chartArea: {
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.1
},
},
// Colors the entire chart area, simple version
// backgroundColor: '#FF0000',
// Colors the entire chart area, with opacity
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.8
},
}
var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
classicChart.draw(data, options);
var materialChart = new google.charts.Bar(document.getElementById('material_div'));
materialChart.draw(data, google.charts.Bar.convertOptions(options));
}
Fiddle demo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/
It is easier using the options.
drawChart() {
// Standard google charts functionality is available as GoogleCharts.api after load
const data = GoogleCharts.api.visualization.arrayToDataTable([
['Chart thing', 'Chart amount'],
['Na Meta', 50],
['Abaixo da Meta', 22],
['Acima da Meta', 10],
['Refugos', 15]
]);
let options = {
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
chart.draw(data, options);
}
I'm using polymer that's why i'm using this.$.cart1, but you can use selectedbyid, no problem.
Have you tried using backgroundcolor.stroke and backgroundcolor.strokewidth?
See Google Charts documentation.
If you want to do like this then it will help. I use stepped area chart in the combo chart from the Google library...
where the values for each stepped area is the value for ticks.
Here is the link for jsfiddle code
Simply add background option
backgroundColor: {
fill:'red'
},
here is the fiddle link https://jsfiddle.net/amitjain/q3tazo7t/
You can do it just with CSS:
#salesChart svg > rect { /*#salesChart is ID of your google chart*/
fill: #F4F4F4;
}