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.
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'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>
I am using Morris bar chart. I am getting everything good but the bars. The labels, data (JSON from server) are showing but bars are not showing. Below is Bar() function. I am using angularJS.
$scope.xkey = 'a';
$scope.ykeys = ['b'];
$scope.labels = ['b'];
$scope.myModel = JsonData;
Morris.Bar({
element: 'Report',
data: $scope.myModel,
xkey: $scope.xkey,
ykeys: $scope.ykeys,
labels: $scope.labels,
barColors: ['#51445f']
});
I had to set height of <div> that contains chart.
<div id="Report" style="height:300px;"></div>
I am using nvd3 charts in my code and I have used it for pie charts, but I don't know how to use it for indentedTree. Can anyone give me an example. Here is the code I used for pie chart.
HTML
<nvd3-pie-chart data="exampleData1"
class="pie"
id="labelTypePercentExample"
x="xFunction()"
y="yFunction()"
showLabels="true"
pieLabelsOutside="true"
showLegend="true"
rightAlign="true"
labelType="percent">
</nvd3-pie-chart>
JS
$scope.exampleData1 = [
{ key: "Ongoing", y: 20 },
{ key: "completed", y: 10 }
];
Can anyone give me a similar example for indentedTree
Since angularjs-nvd3-directives doesn't support indentedTree, there is a directive Angular.treeview,It will do the same
http://nvd3.org/examples/cumulativeLine.html
This example show 4 lines chart. What i want to achieve below.
currently, Series 1, Series 2, Series 3, Series 4 (Charts and Respective legends)
I want keep Series 1, Series 2, Series 3 as common
and I have few radio buttons(Outside chart Area) like Series 5, Series 6, Series 7 and on and on.
Now clicking on those radio button i want to show respective chart and common charts(in this case series 1 ,2 and 3)
for Example
Series 5 radio button clicked
Now Series 1, Series 2, Series 3, Series 5 is shown, [This would removed chart3 legend-chart and add legend-chart of Series 5].
I am trying to achieve above in AngularJS and NVD3 Directive. But i am ok i am known to D3 code logic i should be able to change to angular way. Providing Angular work around is warm welcomed.
[Update]
Strange, instead of cumulative i used simple line chart. I changed the data and chart is being updated as anticipated. I dont what is wrong with cumulative. Any Idea?
With angularjs you can try angular-nvd3 directive. It allows you to manipulate with chart data and chart options via JSON, like:
//html
<nvd3 options="options" data="data"></nvd3>
//javascript
$scope.options = { /*some options*/ }
$scope.data = [ /*some data*/ ]
So, in your case, we just extend this approach to when we interactively update data. We can write something like (using checkboxes):
//html
<div ng-repeat="series in initData">
<input type="checkbox" ng-model="checkboxes[series.key]" ng-init="checkboxes[series.key]=true" ng-change="onchange()"/>{{series.key}}
</div>
<nvd3 options="options" data="data"></nvd3>
where initData is a whole static dataset. And in controller
//javascript
$scope.options = { /*some options*/ }
$scope.initData = [
{
key: "Long",
mean: 250,
values: [ ... ]
},
...
];
$scope.data = angular.copy($scope.initData);
$scope.checkboxes = {};
$scope.onchange = function(){
$scope.data = [];
angular.forEach($scope.initData, function(value, index){
if ($scope.checkboxes[value.key]) $scope.data.push(value);
})
}
See live example: http://plnkr.co/edit/ZLcS6M?p=preview
Note: angular-nvd3
http://embed.plnkr.co/tsJntqq5YJnNUGK6goLZ/preview
See plunkr, I did for a button adding a new serie so it shouldn't have too different just changing for the radio. Notice that if you are getting the data from Web Services or similar resources you probably have to redraw the graph
See https://github.com/krispo/angular-nvd3/issues/37
In the directive
<nvd3 options="options" data="data" api="api"></nvd3>
In the Controller
$scope.api.refresh();
Hope this help