I'm trying to display provinces of Canada through geochart in react google charts. But the provinces doesn't get highlighted even though the abv corresponding to the province is correct. But the values for "population%" gets displayed in the chart( bar in the bottom of the chart)
Below is my code.
<Chart
width={"100%"}
height={"100%"}
chartType="GeoChart"
data={[
["abv", "population%"],
["AB", 2],
["NS", 3]
]}
mapsApiKey={GOOGLE_API_KEY}
//rootProps={{ "data-testid": "1" }}
options={{
region: "CA",
resolution: "provinces"
}}
/>
But when i try the same code by providing "US" for region and US provinces as data it works perfectly fine!
Is there something that I'm missing here. Can't figure out what I've done wrong.
Thanks
option --> resolution: "provinces" -- causes the provinces to be outlined
and should work fine with canada --> region: "CA"
in order to highlight a province,
prefix the abv with --> "CA-" -- as in --> "CA-AB"
see following working snippet...
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
["abv", "population%"],
["CA-AB", 2],
["CA-NS", 3]
]);
var options = {
region: "CA",
resolution: "provinces",
colors: ['blue', 'green']
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="regions_div"></div>
Related
How can I create a simple histogram with apache echarts? I checked their documentation and it does not appear there. Does echarts not have histogram?
Using Echarts tools with datasets
Echarts data transformation can be used to shape a dataset into a histogram dataset, using 'ecStat:histogram'. Here is a very good example showing how to use this tool. You can also find a clear documentation on github.
This solution is a bit more complex to handle (understanding datasets and data transform) but it's the clean way to make a histogram.
Simple hand made solution
You can create a chart that looks like a histogram using Bar charts. Your data will need some formatting so that it looks like a list of [x,y] :
x : (rangeMax - rangeMin)/2
y : number of points in that range
You are also going to need to set barWidth to 100% and xAxis.type to 'value' for it to look like a histogram.
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: [
{
type: 'value',
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '100%',
data: [[5,20], [15,52], [25,200], [35,334], [45,390], [55,330], [65,220]]
}
]
};
myChart .setOption(option)
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<div id="main" style="width: 600px; height:400px;"></div>
</body>
</html>
I have been looking for the answer for a long time but couldn't find any solution.
Let's say my website's default language setting is English and when a user hovers over the Map it shows the country's name. I would like to make it when the user changes the website language to french and hovers over the Map the country name shows in the French language, Is there any way to do it?
Code is below
<VectorMap
map={'world_mill'}
series={{
regions: [
{
values: upcaseKeys(totalVisitors),
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
},
],
}}
selectedRegion={[]}
showTooltip={true}
/>
so when I change the website from English to French the word China should be shown in French.
You can do that by using onRegionTipShow method which is provided in <VectorMap />. Just simply create a function which will take the name of country by:
const translateCountryName = (e, el) => {
const countryName = el.html();
el.html(t(`country:${countryName}`));
};
Where t('country:${countryName}') is NextJS i18n/Internationalization
Now you can use this function in your VectorMap component:
<VectorMap
map={'world_mill'}
series={{
regions: [
{
values: upcaseKeys(totalVisitors),
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
},
],
}}
selectedRegion={[]}
showTooltip={true}
//ur function is below
onRegionTipShow={translateCountryName}
/>
i have done drilldown on bar chart using your documentation which is provided at https://docs.anychart.com/Drilldown/Basics#create_a_chart
but now i want to display a pie chart and when i click on pie chart it gets drill down to bar chart and so on.
also i got to know about this but didnt understand well code in AnyChart Treemap drillChange current event out of sync with getDrilldownPath :-
chart.title("Treemap: Interactivity (Drillchange)" +
"Path: " + text + "\" + e.current.get('name')
);
well i have only displayed basic of pie chart , now i want to drill down to bar chart if user clicks on it.
<html>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<head>
</head>
<body>
<div style="position:absolute; top:60px; left:10px; width:500px; height:500px;" id="container"></div>
<script>
var data = [
{x: "A", value: 637166 , "drillDown" :[
{"x": "Q1", "value": 792026},
{"x": "Q2", "value": 610501},
{"x": "Q3", "value": 441843},
{"x": "Q4", "value": 350711}
]},
{x: "B", value: 721630},
{x: "C", value: 148662},
{x: "D", value: 78662},
{x: "E", value: 90000}
];
// create a chart and set the data
chart = anychart.pie(data);
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
</script>
</body>
</html
>
You can use the approach described in the Documentation, but it requires some modifications as you want to change chart type on drill-down. In this case, you should dispose the pie chart and create a bar chart and otherwise.
In the comment below you can check the sample which meets your requirements.
The approach with using getDrilldownPath is not compatible with Pie or Bar chart, because this API is specific for a Treemap chart which implements Tree-like data structure.
For example, I have the following collection used for ng-repeat:
$scope.pokedex = [{
type: "Fire",
pokemon: ["Charizard", "Moltres"]
},{
type: "Rock",
pokemon: []
},{
type: "Fighting",
pokemon: ["Machamp", "Hitmonchan"]
},{
type: "Dragon",
pokemon: []
}];
This collection will be churned out in a ng-repeat directive. In the actual application, the collection will be retrieved from a database, so it may be unsorted. I want to sort it in the following manner: priority sort types with Pokemon to the top, then sort each group by name.
Edit: I need to clarify what the backend data consists of. In the above example, $scope.pokedex consists of a constant number of types - these are categories. The application retrieves Pokemon from the database and fill up each category's list accordingly. The full range of types is intentionally hardcoded into the array and will remain unchanged regardless of whether the list of Pokemon in it is empty or not.
When the web page is generated using ng-repeat, the desired end state is as follows:
An accordion is displayed with each type as a header, and the list of Pokemon in the body as a list/table.
All empty categories shall be disabled but still visible, their headers given a particular CSS format, and all of them PUSHED TO THE BOTTOM beneath the non-empty categories.
The empty group and non-empty group shall individually be sorted by category/type name.
Everything except the pushing of empty groups to the bottom and the sorting by name have been implemented. These are my final requirements to implement.
How can I do that? Is there a way to do it in advance, or via orderBy during ng-repeat, or any other workable solution?
You Can Try like this This
<ul>
<li ng-repeat="people in peoples | orderObjectBy:'pokemon':true">{{ people.name }}</li>
</ul>
Please try the code below
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="pokemonController">
<ul>
<li ng-repeat="people in peoples | orderBy:['-pokemon.length','name']">
name: {{people.name}} - number of Pokemons: {{people.pokemon.length}}
<hr />
</li>
</ul>
</div>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('pokemonController', ['$scope', function($scope){
$scope.peoples = [{
name: "Obama",
pokemon: ["Charizard", "Dragonite", "Moltres"]
},{
name: "Merkel",
pokemon: []
},{
name: "Putin",
pokemon: ["Machamp", "Hitmonchan"]
},{
name: "Kim",
pokemon: []
}];
}]);
</script>
Is there any library for Angular where I can plot two Y axis on the same graph (one on the left and the other on the right for example)?
I tried libraries by chinmaymk and jtblin, but haven't found suitable method.
Thanks.
var chartData = {
"type":"mixed",
"title":{
"text":"Multiple Y Axis"
},
"scale-x":{
},
"scale-y":{
"values":"0:50:5"
},
"scale-y-2":{
"values":"0:40000:5000",
"guide":{
"visible":false
}
},
"series":[
{
"values":[8,31,12,40,24,20,16,40,9],
"type":"bar",
"scales":"scale-x,scale-y",
"hover-state":{
"visible":false
}
},
{
"values":[11254,26145,17014,2444,17871,25658,34002,26178,20413],
"type":"line",
"scales":"scale-x,scale-y-2"
}
]
};
zingchart.render({
id: "chart",
data: chartData,
width: "100%"
});
#chart {
width: 100%;
}
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="chart"></div>
ZingChart supports multiple y-axes with the scale-y-n objects. There's also an easy to use Angular directive on Github.
There's a simple demo in the snippet and here's a more real world example. You can right click the chart itself and select "View Source" to check out the JSON.
If you have any questions about implementation feel free to reach out - I'm on the ZC team.
I've found n3-charts library that solves my problem.