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
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>
Is it anyhow possible to set the label into the bar chart?
Like this example:
I couldnt find an example on the official page: Official example page
//EDIT
Later I had other problems, but I was able to solve them by switching to Nivo Charts. Nivo Charts
You could do this using label options in this way:
options: {
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90,
padding: -110
}
}
]
}
}
The result is:
This is a codesandbox example.
You can use the LabelList component with a custom render, here is the link of the documentation:
https://recharts.org/en-US/api/LabelList
also you can use the position property to center it inside the bar , here is an example of a customized LabelList :
https://recharts.org/en-US/examples/BarChartWithMinHeight
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.
how to make dual y axis chart using google chart in angular js?
could you please any one help me out how to make it?
like : example
$scope.myChartObject1 = {};
$scope.myChartObject1.type = "ColumnChart";
$scope.myChartObject1.data = ['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1];
<div google-chart chart="myChartObject" on-select="getTheValue(selectedItem)" style="height:421px; width:100%;"></div>
Thanks in advance
The google documentation shows examples with the new Material Charts instead of the older chart classes. With the older charts (ColumnChart, BarChart), use something like this:
$scope.chartObject.options = {
vAxes: {
0: {title: "Inventory"},
1: {title: "Sales" }
},
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
}
};
I also have a CodePen example that was meant for image overlays, but it also happens to use Dual-Y options.
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.