I want to create a map chart in Google Chart with all countries and all states in USA.
Is it possible? How can I do it?
Thanks!
google.load("visualization", "1", {packages:["geochart"]});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
// and there I want to add states to the chart
['Texas', 300],
['Ohio', 200]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
<div id="regions_div"></div>
It's not possible, when you want to draw regions you must set the sesolution-option to provinces, but in this case it's not possible to draw countries.
Related
I'm using Google's geochart. I'm using the number of visits per country as the data to be displayed. But, the data is not linear. So, instead of plotting it against the number of visits, I'd like to plot it against its log value. Basically, I'd like to use the log scale. How do I do that?
I tried to convert the values to log manually and it plotted right, but the tooltip shows the log value and not the exact visit count.
there is not an option for log scale in GeoChart.
but you can calculate manually, then display the real number in the tooltip,
by changing the formatted value of the data table cell.
the tooltip will always display the formatted value by default.
when loading your data, use object notation, where...
v: = value
f: = formatted value
e.g. {v: 200, f: '300'}
using the above, the chart will use 200 for the region color or marker,
but display 300 in the tooltip.
see following working snippet...
google.charts.load('current', {
packages: ['geochart'],
mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', {v: 200, f: '300'}],
['United States', {v: 300, f: '400'}],
['Brazil', {v: 400, f: '500'}],
['Canada', {v: 500, f: '600'}],
['France', {v: 600, f: '700'}],
['RU', {v: 700, f: '800'}]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.GeoChart(container);
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
i try to create a pie chart on my Website, i found the example code
<div id="piechart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['TV', 4],
['Gym', 2],
['Sleep', 8]
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'My Average Day', 'width':550, 'height':400};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_pie_chart)
But i only get a Error Message :
Table has no columns.
Can someone help me pls?
Thanks
unfortunatelly I cannot comment.
This code works - fiddle. Could you give more details about this project?
sample of code for fiddle
<div id="piechart"></div>
edit:
Table has no columns.
Is this error message from browser console?
I have Pie and Column charts from the same source data.
I want colors in bar chart to have the corrsponding colors like in Pie chart. These are default Google Charts colors (in order). So first column should be blue, second red, third yellow and fourth green. How to achieve this?
in a column chart, values in the same series are the same color by default
series are defined by columns, to have different colors by default,
place each value in a separate column
however, this presents a problem
if you structure the data as follows, then you lose the x-axis labels
you only have one label for all columns
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2', 'y3'],
['Razina0', 898, 37319, 8980, 35400]
]);
if you try the next approach, then the columns will not be spaced properly
there will be gaps for the null values
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2', 'y3'],
['Razina0', 898, null, null, null],
['Razina1', null, 37319, null, null],
['Razina2', null, null, 8980, null],
['Razina3', null, null, null, 35400],
]);
the best option is to use a style column
this will allow you to keep the current data structure
and provide different colors for each column
the only drawback is you have to provide the color
so you lose the default colors
as such, recommend drawing the pie chart first
then use the colors assigned to each slice
when the pie chart's 'ready' event fires
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
['Razina0', 898],
['Razina1', 37319],
['Razina2', 8980],
['Razina3', 35400]
]);
var chartPie = new google.visualization.PieChart(document.getElementById('chart_pie'));
var chartColumn = new google.visualization.ColumnChart(document.getElementById('chart_column'));
google.visualization.events.addListener(chartPie, 'ready', function () {
var colIndex = data.addColumn({type: 'string', role: 'style'});
$.each($('#chart_pie path'), function (rowIndex) {
data.setValue(rowIndex, colIndex, $(this).attr('fill'));
});
chartColumn.draw(data, {
legend: {
position: 'none'
}
});
});
chartPie.draw(data, {
height: 240
});
}
div {
display: inline-block;
}
<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="chart_pie"></div>
<div id="chart_column"></div>
I want to remove y-axis values, I just want 0 and 1 once, but there are multiple 1's.
"gridlines: { count: 2}, " is not applying. Is there any solution for this?
the chart is using numbers for the y-axis that have decimal places,
which obviously aren't shown due to the number format
would need to see code, options used on the chart, etc. to understand why
also, drawing the chart before it's container is visible can cause problems
however, the chart in the image appears to be a Material chart
unfortunately, many of the options you could use to correct the issue
are not supported by Material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.gridlines.count
see --> Tracking Issue for Material Chart Feature Parity
recommend using Core chart instead, with following option...
theme: 'material'
using ticks will guarantee which labels appear...
vAxis: {
ticks: [0, 1]
},
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Count'],
['Customers Added', 1.4],
['Posts Created', null],
['Cash Transaction', null],
['Card Transaction', null],
['Buy Incomplete', null],
['Merchant SignUp', null]
]);
var container = document.getElementById('chart_div');
var chartCol = new google.visualization.ColumnChart(container);
chartCol.draw(data, {
vAxis: {
ticks: [0, 1]
},
height: 400,
theme: 'material',
title: 'Agent Report'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note:
Material --> google.charts.Bar -- packages: ['bar']
Core --> google.visualization.ColumnChart -- packages: ['corechart']
I have this query.
SELECT p.courseCategory, COUNT(c.courseField) AS courseCount
from ProgramCategories p left outer join CourseCategory c
on(c.courseField = p.courseCategory)
group by p.courseCategory;
I want to dispaly courseCategory and its count in a bar Chart.
X axis- for courseCategory
Y axis- for courseCount
This is the barchart what want in View. This is demo chart working nicely.
<canvas id="income" width="600" height="400"></canvas>
<script>
var barData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#48A497",
strokeColor: "#48A4D1",
data: [456, 479, 324, 569, 702, 600]
}]
}
var income = document.getElementById("income").getContext("2d");
new Chart(income).Bar(barData);
</script>
To labels I want to set CourseCategories and for data I want to set courseCount. I don't know how to set these records to my View. How the method in controller should be and How I call that in my razor view.
You can use Chart.Mvc which is a .NET wrapper on chart.js library: http://www.martinobordin.it/Chart.Mvc/Home/QuickStart
This should solve your problem.
Of course you can look to source code (https://github.com/martinobordin/Chart.Mvc) and do it your own way :)