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.
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 am trying to add a plotline on click in multiple series line chart in reactjs. I am using stockchart of high chart, Please let me know how to add plotline with tooltip.
Sample Screenshot:
I prepared a demo which shows how to add the plotLine dynamically with the custom tooltip.
Demo: https://jsfiddle.net/BlackLabel/Lyr82a5x/
btn.addEventListener('click', function() {
chart.xAxis[0].addPlotLine({
value: 5.5,
color: 'red',
width: 2,
id: 'plot-line-1',
events: {
mouseover() {
let lineBBox = this.svgElem.getBBox();
tooltip.style.display = 'block';
tooltip.style.left = lineBBox.x + 'px';
},
mouseout() {
tooltip.style.display = 'none'
}
}
})
})
If something is unclear - feel free to ask.
API: https://api.highcharts.com/highcharts/xAxis.plotLines.events.mouseout
API: https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotLine
I’m trying to make mixed chart with dual y-axis by using zingcharts-angularjs directive.
For dual Y-axis, you follow ‘scale-y-2’ pattern, but it didn’t work in my AngularJS application. Does anyone know how to render two y-axis in zingcharts-angularjs?
Adding multiple scale-y's to ZingChart in the Angular directive is the same as with vanilla JavaScript.
First you will want to be sure to include a "scale-y-2":{} object to your chart. The min:max:step values should inherit from your series values but this can be explicitly set if so desired.
Next you need to be sure to associate each set of series values to the appropriate scale-y. To do this include a "scales":"" attribute. This will accept a string with two comma separated values. You will want to declare which scale-x and which scale-y you want to associate to the series.
Currently ZingChart does not accept camel case values for scaleY2. This must be represented in JSON as "scale-y-2".
The code below should provide you with what you need. I have provided comments on the lines you likely are missing in your chart.
If you want to see a live working example you can run the code below.
var app = angular.module('myApp',['zingchart-angularjs']);
app.controller('MainController', function($scope){
$scope.myJson = {
globals : {
shadow: false
},
type : 'bar',
plot:{
},
backgroundColor : "#fff",
scaleY :{
lineColor : "#BDBFC1",
lineWidth: "2px",
tick:{
lineWidth: "0px"
}
},
"scale-y-2" : { //add scale-y-2
},
scaleX :{
lineColor : "#BDBFC1",
lineWidth: "2px",
tick:{
lineWidth: "0px"
}
},
series : [
{
values : [54,23,34,23,43],
scales: "scale-x, scale-y", //associate scales to series
lineColor : "#D2262E",
lineWidth : "2px",
marker : {
backgroundColor: "#D2262E",
borderWidth : "0px"
}
},
{
values : [1000,1500,1600,2000,4000],
lineColor : "#2FA2CB",
scales: "scale-x, scale-y-2", //associate scales to series
lineWidth : "2px",
marker : {
backgroundColor: "#2FA2CB",
borderWidth : "0px"
}
},
]
};
});
html,body{
margin: 0px;
}
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>
<body ng-app="myApp">
<div ng-controller="MainController">
<div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="568px"></div>
</div>
</body>
Note: I am on the ZingChart team. Please let me know if you have additional questions.
While displaying nvd3 chart with Ajax requests, the charts are getting wired up. So I thought the problem is occurring due to asynchronous call delays (may be the chart is displaying before the full data is loaded, etc). So I have used promises, but still I am getting the same problem. Please see the plunker http://plnkr.co/edit/AcIpmki7GNvcoT6Z38Pm?p=preview.
If you change the date range slider, the main chart won't display properly. I am not sure where the problem is? After searching some of the posts in forum, I have come across some thing like gaps in the time series, is it due to that? If that is the case, how can I fix that time series gap issue? I searched nvd3 website, but I don't find any documentation regarding to fill up the gaps in time series data. Some of the forum posts suggests to use c3.js instead nvd3, but I don't know is it really worth to shift to c3.js? Within my experience I feel nvd3 are the best and I don't feel like leaving nvd3.
If nvd3 website provides more samples with real time series data and documentation on some of the common issues like filling gaps in time series, sorting the data, etc it will be really helpful for the beginners.
As my project release dates are nearing, I am not sure what to do now ? Shifting to c3.js is the worst option for me. I have attached the error screen shot too from the same plunker.
I feel there is no problem with the sorting that I am doing with my json data:
angular.forEach($scope.data, function(
series, index) {
series.values.sort(function(a, b) {
return a.x - b.x;
});
});
Couple of issues for you to look at:
I agree with shabeer90, the data is funky. You have multiple values occurring at the same time.
Your sort is correct, but where you have it in your code doesn't work...try adding it inside the response of the ajax call (right after setting $scope.data = data).
Also, you need to make the changes that I outlined in another question (to nvd3 in the lineWithFocusChart model).
Accessing the xScale is a little more tricky...on this chart you need to go through the lines:
$scope.options = {
chart: {
type: 'lineWithFocusChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 60,
left: 40
},
transitionDuration: 500,
lines : { // <-- add this
xScale : d3.time.scale()
},
lines2 : { // <-- add this too
xScale : d3.time.scale()
},
xAxis: {
ticks : d3.time.months, <-- add the time interval
axisLabel: 'X Axis',
tickFormat: function(d){
return d3.time.format('%d/%m/%y')(new Date(d))
}
},
x2Axis: {
tickFormat: function(d){
return d3.time.format('%d/%m/%y')(new Date(d))
}
},
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d3.format(',.2f')(d);
},
rotateYLabel: false
},
y2Axis: {
tickFormat: function(d){
return d3.format(',.2f')(d);
}
}
}
};
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