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.
Related
I'm trying to align the title to the left instead of the center (shown in the image).
I know this is possible on chartJS v3.0.0-alpha.2, but reactchartjs only goes up to 2.9.30 as far as I know.
Does anyone know how to achieve this in reactchartjs?
I thought it would be something like:
options={{
title: {
position: 'top',
align: 'left',
},
}}
Any help would be appreciated.
You should use the align parameter. This sets the alignment of the title. Your options are:
start
center
end
Your align: 'left' isn't one of the above and will not have any effect. Setting align: 'start' however will give you exactly what you want:
The full code looks like this:
<Chart
type='line'
data={dat}
options={{
plugins: {
title: {
display: true,
align: 'start',
text: 'Bitcoin Mining Difficulty'
}
}
}} />
Let me also mention that you should not confuse that with position: 'left'. position moves the whole title into one of top, left, bottom, right area of the chart. An example with a combination of position: 'left' and align: start:
The Chart.js Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw the title yourself directly on the canvas using CanvasRenderingContext2D.fillText().
In React, you can register the plugin as follows:
componentWillMount() {
Chart.pluginService.register({
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
ctx.textAlign = "left";
ctx.font = "14px Arial";
ctx.fillStyle = "black";
ctx.fillText("Title", xAxis.left, 10);
ctx.restore();
}
});
}
You'll also have to define some extra padding at the top of the chart to make sure, the title appears on the canvas.
options: {
layout: {
padding: {
top: 20
}
},
...
Please take a look at this StackBlitz and see how it works.
first paremeter is the filename and second is docDefinition(which value i will pass in second parameter) still confuse?
please help me out
The second parameter is an object that have all the options of "pdfmake".
The most fundamental concept to be mastered is the
document-definition-object which can be as simple as:
var docDefinition = { content: 'This is an sample PDF printed withpdfMake' };
or become pretty complex (having multi-level tables,
images, lists, paragraphs, margins, styles etc...).
You can check the documentation on Github https://github.com/bpampuch/pdfmake and do it more complex.
But if you use the function pdfExport, this one create the object with the data grid and it is more easy, Try this:
$scope.gridApi.exporter.pdfExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL );
And they have more options that you can change in gridOptions:
exporterPdfDefaultStyle:{ fontSize: 11 },
exporterPdfFilename: 'filename.pdf',
exporterPdfTableHeaderStyle: { bold: true, fontSize: 12, color: 'black' },
exporterPdfTableStyle : { margin: [0, 5, 0, 15] },
exporterPdfHeader : null,
exporterPdfFooter : null,
gridOptions.exporterPdfOrientation : 'landscape',
etc...
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.
I just added FontAwesome to my ExtJS application.
I added a Glyph to my tab:
items: [
{
title: 'Dashboard',
glyph: 0xf009,
padding: '5',
I would like to change the Glyph color, is that possible?
This should work:
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red;
}
You can see it in action here: http://extjs.eu/examples/#complex-data-binding
I tried the Saki way
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red; }
but then you don't have the control to change attributes for specific glyph and if I want to set it for individual glyph I will need to work harder.
I use a simple way:
Step 1: add a link to the css file
link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
Step: 2:
use iconCls
iconCls: "fa fa-lg fa-futbol-o glyph"
here I used the awesome classes "fa fa-lg-fa-futbol-o" but I added "glyph" so it will looks better than without.
Step 3:
define "glyph" in your css file.
.glyph { margin-top: 3px; }
Step 4:
define any css you can apply to the glyph like color.
The result:
in css file:
.glyph { margin-top: 3px; }
.youname { color: #15498B; }
in js ( every where you have config iconCls )
iconCls: "fa fa-lg fa-futbol-o glyph youname"
I know this is a little late but for anyone else in the future who wants change Glyph icons when using custom fonts with Exts.
I used the reference to the button in my controller passed in during the event. I then got the buttons ID then target the button using the get method and concatenating "-btnIconEl" to the the button ID as any glyph/icon will have that CSS.
'button[action=displayGrids]' : {
click: function(button) {
Ext.get(button.id + '-btnIconEl').setStyle('color', '#ffffff');
}
}
Tooltip width is not enough to display text inside it. So how can i increase the width of tooltip ? Here is my code:
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
Ext.create('Ext.tab.Panel', {
width : 500,
height : 200,
style : 'margin: 50px',
renderTo : Ext.getBody(),
items : [{
title : 'Tab One'
}, {
title : 'Tab Two',
tabConfig : {
tooltip : {
text : 'Hello tab one... This is James cook. How r u doing.:)',
title : 'Tooltip Header'
}
}
}, {
title : 'Tab Three'
}]
});
});
I have used:
div.x-tip {
width: 300px !important; height: 100px !important;
}
Width is increasing but tooltip text is not adjusting to the width. I want to make tooltip text a single line. Any idea on this..??
Thanks in advance.
You can also just set a width property in the tip object.
tooltip : {
text : 'Hello tab one... This is James cook. How r u doing.:)',
title : 'Tooltip Header',
width: 100
}
You can overload:
div.x-tip {
width: 300px !important;
}
I confirmed this just now on a button with the tooltip property in ExtJS 4.2
The way that I uncovered this was pretty simple. I simply ran a grep inside of the ext/css directory for "tip" on all css files to discover what the DOM element would be (or you could simply examine the DOM yourself in the browser after showing at least one tooltip. Once you have that, you can target any of the sub-components in the hierarchy as you need to; in order to ensure that your text doesn't get clobbered.
I do wonder why the auto-sizer isn't working for this renderer but that's probably a question better asked of Sencha support.