i need to visualize the google chart with the average rating made for a products based on the 1 week, 2 Months, 4 Months, 8 Months and 12 Months, so i have tried to visualize it with the google visualization tool, so i got the following code there
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Duration', 'rating'],
['1 week', 1],
['2 Months', 2],
['4 Months', 3],
['8 Months', 4],
['1 Year', 5],
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Year"}}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
here it displaying the output as
i need the y axis must be 1 to 5 and in the x axis must have the average rating based on the time frame, is this is possible? what i have to do?
To answer the first part of the question...
...y axis must be 1 to 5...
... you have to format the y axis, which isn't in your code yet.
Change your call to google.visualization.ColumnChart to
new google.visualization.ColumnChart(
document.getElementById('visualization')).draw(
data, {
title: "Yearly Coffee Consumption by Country",
width: 600,
height: 400,
hAxis: {
title: "Year"
},
vAxis: { <- new code from here...
minValue:0,
format:'#',
gridlines:{
count:6
}
}
}
);
This should format the axis according to your description.
The 2nd part of your question,
...the x axis must have the average rating based on the time frame...
is not yet clear to me. Please add some more detail to it, p.e. how / what kind of data do you want where.
Related
Good afternoon, it is necessary that in the end there is not a sum, but the average of all values. Is it possible to implement this functionality?
In WDR, there is no clear way to make an average grand total if subtotal values contain the sum aggregations.
But you can change the text in grand total cells with the customizeCell function to make it contain an average value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>WDR</title>
</head>
<body>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<div id="wdr"></div>
<script>
var pivot = new WebDataRocks({
container: "#wdr",
toolbar: true,
customizeCell: customize,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
function customize(cell,data) {
if(data.isGrandTotalRow) {
cell.text = data.value / (data.rowIndex - 1);
}
}
</script>
</body>
</html>
Is there a simple way to shorten lines on a GeoJSON layer?
I have a line, it goes from point A to point B. I want the line to stop the radius of a marker short of it's terminus. Is that possible? Kind of like an offset from the line terminus/origin.
Here is an example:
I have icons that are 50 x 50, but semi transparent (see image) and I have lines that go to the Lat/Long of the icons, but I want to try cropping or offsetting the line before it enters the icon, so you can't see the line under the icon. Is this possible?
Please comment if this question is unclear.
That can be done using the dashArray and dashOffset options:
var map = new L.Map('leaflet', {
center: [0, 0],
zoom: 0
});
new L.CircleMarker([0, 90], {radius: 30}).addTo(map);
new L.CircleMarker([0, -90], {radius: 30}).addTo(map);
var polyline = new L.Polyline([[0, -90], [0, 90]]).addTo(map);
// Get length of the line
var totalLength = polyline.getElement().getTotalLength();
polyline.setStyle({
// Set dashArray to the length of the line minus radius * 2
dashArray: totalLength - 60,
// Offset by radius
dashOffset: -30
});
body {
margin: 0;
}
html, body, #leaflet {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Leaflet 1.2.0</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/leaflet#1.2.0/dist/leaflet.css" />
</head>
<body>
<div id="leaflet"></div>
<script src="//unpkg.com/leaflet#1.2.0/dist/leaflet.js"></script>
</body>
</html>
Good day, I have a google column chart and work perfectly but when I re size my browser the column chart overflowed and wont re size. my website is responsive and I dont want to put my bar chart like that. how to get my column chart responsive?
I got this column chart from developers.google.com/chart/interactive/docs/gallery/columnchart
here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title><?php echo $title;?></title>
<!-- Load Google chart api -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
</head>
<body>
<div id="chart_div" style="width:100%;"></div>
<br/>
<div id="btn-group">
<button class="button button-blue" id="none">No Format</button>
<button class="button button-blue" id="scientific">Scientific Notation</button>
<button class="button button-blue" id="decimal">Decimal</button>
<button class="button button-blue" id="short">Short</button>
</div>
</body>
</html>
I tried also to add width="100%" from div but its doesn't work at all.
Currently, the problem with Google Charts is that it doesn't have a responsive feature.
From previous explorations over the web, the best solution that I found and implemented was:
$(window).resize(function () {
drawChart();
});
This piece of code calls the drawChart() function each time the browser window is resized. Therefore, this means that the Chart is redrawn each time. This may not be the best or efficient solution, but for me it did the job.
In order to allow the .resize() function, you will require the jQuery Library. More information for this is available here.
Is there please a possibility to blend out (hide) a line in Google Line Chart?
We have many line charts with multiple series of close data values and my boss asks me to add a way to hide a series (preferably by clicking the line or the legend with a mouse).
I have added a select event listener to my very simple test case below (just open it in a browser and it will work), but I'm not sure what to do next:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
{"c":[{"v":"UTRA_1_DOWN"},{"v":-42.9},{"v":-42.4},{"v":-80},{"v":-35}]},
{"c":[{"v":"E-UTRA_1_DOWN"},{"v":-49.4},{"v":-39.9},{"v":-80},{"v":-32}]},
{"c":[{"v":"E-UTRA_1_UP"},{"v":-48.9},{"v":-48.6},{"v":-80},{"v":-32}]},
{"c":[{"v":"UTRA_1_UP"},{"v":-49.5},{"v":-49.4},{"v":-80},{"v":-35}]},
{"c":[{"v":"UTRA_2_UP"},{"v":-58.9},{"v":-58.9},{"v":-80},{"v":-38}]}],
"cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
{"p":{"role":"data"},"label":"Row A","type":"number"},
{"p":{"role":"data"},"label":"Row B","type":"number"},
{"p":{"role":"interval"},"label":"LSL","type":"number"},
{"p":{"role":"interval"},"label":"USL","type":"number"}]}};
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));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(x, options);
}
}
function selectHandler(e) {
alert('How to hide a row in the chart?');
}
$(function() {
google.setOnLoadCallback(drawCharts);
});
</script>
</head>
<body>
<div id="L_B8_ACLR_50_0_QPSK_1_H"></div>
</body>
</html>
I need to make chart which have use same data and display line chart and area chart.How to
composite line and area chart.
This is the data
['Year', 'Sales', 'Expenses','Total'],
['2004', 1000, 400,600],
['2005', 1100, 200,900],
['2006', 6000, 5000,1000],
['2007', 1000, 500,500]
And i need sales and expenses line chart and total area chart.
You could use a combo chart. These are A charts that lets you render each series as a different marker type from the following list: line, area, bars, candlesticks and stepped area.
To assign a default marker type for series, specify the seriesType property. Use the series property to specify properties of each series individually.
There is an example in the link that you could edit. You used to be able to do a compound chart but these are sadly deprecated now.
example of area and line:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Total'],
['2004', 1000, 400, 600 ],
['2005', 1100, 200, 900 ],
['2006', 6000, 5000, 1000],
['2007', 1000, 500, 500 ],
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Sales & Expenses by Year',
width: 600,
height: 400,
vAxis: {title: "Sales"},
hAxis: {title: "Year"},
seriesType: "area",
series: {5: {type: "line"}}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
prints