Google charts log scale - javascript

I'm trying to do a log scale plot in Google Charts(actually a semilogy plot, to be accurate) and have tried
vAxis: {
scaleType: 'log'
}
without success. I have seen also Google's example(https://jsfiddle.net/api/post/library/pure/), but haven't figured out where I am mistaken.
In order to reproduce my problem I've taken the simple Line Chart where i modified some entry values to look similar like values from f(x) = 1/x, like my actual data is distributed.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["linechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Index', 'Value'],
['1', 100000],
['2', 2170],
['3', 960],
['4', 560],
['5', 520],
['6', 500],
['7', 480],
['8', 460],
['9', 440],
['10', 430],
['11', 420],
['12', 410],
['13', 400],
['14', 395],
['15', 390],
['16', 388],
['17', 396],
['18', 387],
['19', 385],
['20', 384]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance', vAxis: {scaleType: 'log'}});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
My last option parameter vAxis: {scaleType: 'log'} is ignored. I ahve tried with both discrete and continuous data(1st column both as strings like above or numbers without the '') My plot looks like the one below

using the updated library (loader.js) seems to make a difference
<script src="https://www.gstatic.com/charts/loader.js"></script>
instead of...
<script src="https://www.google.com/jsapi"></script>
plus, from the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader (loader.js) from now on.
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Index', 'Value'],
['1', 100000],
['2', 2170],
['3', 960],
['4', 560],
['5', 520],
['6', 500],
['7', 480],
['8', 460],
['9', 440],
['10', 430],
['11', 420],
['12', 410],
['13', 400],
['14', 395],
['15', 390],
['16', 388],
['17', 396],
['18', 387],
['19', 385],
['20', 384]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance', vAxis: {scaleType: 'log'}});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
here is the same chart, without the option --> vAxis: {scaleType: 'log'}
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Index', 'Value'],
['1', 100000],
['2', 2170],
['3', 960],
['4', 560],
['5', 520],
['6', 500],
['7', 480],
['8', 460],
['9', 440],
['10', 430],
['11', 420],
['12', 410],
['13', 400],
['14', 395],
['15', 390],
['16', 388],
['17', 396],
['18', 387],
['19', 385],
['20', 384]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

How to set 3 axis in google chart (V-Axis Left as Qty, V-Axis Right as Series Column and H-Axis as TimeOrder)?

Hi there all I have a Query How I can set up three Axis in Google Chart, I'm using these code down below and it's working fine with 2 Axis But I need to add Date on Right-Axis and Qty on Left-Axis and order-time on Bottom-Axis. I put the demo data in chart basically I get data from database using PHP fetch and show in the chart.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Ordertime', 'Qty'],
['0', 24],
['1', 15],
['2', 10],
['3', 34],
['4', 65],
['5', 72],
['6', 18],
['7', 73],
['8', 80],
['9', 50],
['10', 40],
['11', 49],
['12', 70],
]);
var options = {
title:'Sales by Category (Arabi) Branch (Madinah) Date (2018-03-15)',
hAxis: {title: 'Sales By Time', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
series: {
0: { color: '#885426' },
1: { color: '#008000' },
},
areaOpacity: 0.1,
pointSize: 5,
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<!-- Chart js -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- JQuery JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- HTML Tag -->
<div id="chart_div" style="width: 100%; height: 400px;"></div>
What I need I show you example picture which I get from phpmyadmin Display-Chart, Picture down below ....
enter image description here
Using this PHP code to Get data from the database
<?php
$sql=" SELECT hoursales.opendate,location.locname,category.catname,category.catid,hoursales.ordertime,
SUM(hoursales.qty) as Qty,
SUM(hoursales.amount) as Amount
FROM hoursales,product,prodho,category,location
where hoursales.prodn=prodho.prodnum
and category.catid=prodho.catidho
and hoursales.locid=location.locid
and prodho.locid=location.locid
and product.catidho=category.catid
and hoursales.prodn=prodho.prodnum
and product.prodnumho=prodho.prodnumho
and (hoursales.opendate='$_POST[fst_date]' or hoursales.opendate='$_POST[snd_date]')
and location.locid='$_POST[branch]'
and category.catid='$_POST[category]'
and hoursales.ordertime BETWEEN '0' and '23'
GROUP BY hoursales.opendate, category.catname,hoursales.ordertime";
$search_result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($search_result)) {
$ordertime = $row['ordertime'];
$opendate = $row['opendate'];
$qty = $row['Qty'];
}
?>
in order to produce the desired chart,
the data would need to be structured as follows,
with a column of values for each date...
['Ordertime', '2018-02-15', '2018-02-22'],
['0', 24, 26],
['1', 15, 13],
['2', 10, 15],
['3', 34, 30],
['4', 65, 67],
['5', 72, 70],
['6', 18, 20],
['7', 73, 70],
['8', 80, 85],
['9', 50, 55],
['10', 40, 43],
['11', 49, 48],
['12', 70, 70]
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Ordertime', '2018-02-15', '2018-02-22'],
['0', 24, 26],
['1', 15, 13],
['2', 10, 15],
['3', 34, 30],
['4', 65, 67],
['5', 72, 70],
['6', 18, 20],
['7', 73, 70],
['8', 80, 85],
['9', 50, 55],
['10', 40, 43],
['11', 49, 48],
['12', 70, 70]
]);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 60,
left: 60,
right: 160,
bottom: 60
},
height: '100%',
width: '100%',
title: 'Sales by Category (Arabi) Branch (Madinah) Date (2018-03-15)',
hAxis: {title: 'Sales By Time', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
series: {
0: { color: '#885426' },
1: { color: '#008000' },
},
areaOpacity: 0.1,
pointSize: 5,
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How to put 2 google charts on one page

I learn how to create bar and pie chart from https://developers.google.com/chart/interactive/docs/gallery/columnchart and
https://developers.google.com/chart/interactive/docs/gallery/piechart.
But I just couldn't get two charts on the same page.My code is as follow:
<html>
<head>
<!--pie chart-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<!--bar chart-->
<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(drawBar);
function drawBar() {
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',
}
};
var chart = new
google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<br>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
Can someone give me some suggestion?
Many thanks.
first, only need to reference loader.js one time
and only need one load statement
which can load as many 'packages' as needed
once the callback fires, you can start drawing
see following working snippet...
google.charts.load('current', {
callback: function () {
drawChart();
drawBar();
},
packages: ['bar', 'corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
function drawBar() {
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',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<br>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>

How can I change X metric in Google Chart?

I use Visualization: Area Chart in my example.
The following code presents the function that does drawing chart:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
You can see, that axis X has values of date in years.
How can I chane this metric for example on months/days?
Assume that I have selected list with values: day/month/years and by selecting option I get is drawen chart correcponding selected value.
Is it easy in Google Chart?
use the data view class and the setColumns method to switch the x-axis column
see following working snippet...
google.charts.load('current', {
callback: function () {
document.getElementById('view-column').addEventListener('change', drawChart, false);
drawChart();
},
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Month', 'Day', 'Sales', 'Expenses'],
[2013, 9, 5, 1000, 400],
[2014, 10, 6, 1170, 460],
[2015, 11, 7, 660, 1120],
[2016, 12, 8, 1030, 540]
]);
var dimension = document.getElementById('view-column');
var view = new google.visualization.DataView(data);
view.setColumns([
parseInt(dimension.options[dimension.selectedIndex].value),
3, 4
]);
var options = {
title: 'Company Performance',
hAxis: {
title: dimension.options[dimension.selectedIndex].text,
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<select id="view-column">
<option value="0" selected>Year</option>
<option value="1">Month</option>
<option value="2">Day</option>
</select>
<div id="chart_div"></div>

VM5111:1249 Uncaught TypeError: Cannot read property 'x' of null

Hello i have this error and cannot seem to understand it. I am learning google pie charts and was able to use the sample provided by google api. But now i intend to hover the div and make the piechart explode. when the mouse leaves the div it returns to a normal piechart. But having an error when i hover over the div.
Below is my code:
$(document).ready(function() {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
var div1 = document.getElementById('piechart');
$(div1).mouseover(function(){
google.charts.setOnLoadCallback(drawChart1);
});
function drawChart1() {
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options = {
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: { 4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});
<div id="piechart" style="width: 900px; height: 500px;"></div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="pie_chart.js"></script>
here's an example using both mouseover and mouseout on the same chart
using full page view, it doesn't appear to work very smoothly, doesn't always capture mouseout...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
backgroundColor: 'cyan',
title: 'My Daily Activities',
legend: 'none'
};
var data1 = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options1 = {
backgroundColor: 'cyan',
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: {
4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
var div1 = document.getElementById('piechart');
var div2 = document.getElementById('msg');
$(div1).mouseover(function(){
div2.innerHTML = 'over'
chart.draw(data1, options1);
});
$(div1).mouseout(function(){
div2.innerHTML = 'out'
chart.draw(data, options);
});
var chart = new google.visualization.PieChart(div1);
chart.draw(data, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>
<div id="msg"></div>

how can i edit google charts view in googlechart api?

this is html/javascript for this bar
<html>
<head>
<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',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
how can i edit this chart?i want to add some text as shown in screenshot in this chart.is there any way to edit this??

Categories