I am trying to display the charts using Angularjs tags and its working properly but the animation is not working for me and if there is any way to make the animation in a continuse manner.
Any suggestions, please
Thank you
Graph:1
$scope.mybatchChart = {
type: "pie",
backgroundColor: "#FFFFFF",
plot: {
borderColor: "#FFFFFF",
borderWidth: 5,
// slice: 90,
animation:{
effect:"2",
method:"3",
sequence:"ANIMATION_BY_PLOT",
speed:"ANIMATION_FAST"
},
valueBox: {
placement: 'out',
text: '%t\n%npv%',
fontFamily: "Open Sans"
},
tooltip:{
fontSize: '10',
fontFamily: "Open Sans",
padding: "5 10",
text: "%npv%"
}},
title: {
fontColor: "#fff",
align: "left",
offsetX: 10,
fontFamily: "Open Sans",
fontSize: 20
},
subtitle: {
offsetX: 10,
offsetY: 10,
fontColor: "#8e99a9",
fontFamily: "Open Sans",
fontSize: "10",
align: "left"
},
plotarea: {
margin: "20 0 0 0"
},
series : [
{
values : [571.0],
text: "Schedul Batch",
backgroundColor: '#50ADF5',
},
{
values: [364.0],
text: "Finished Batch",
backgroundColor: '#FF7965'
}
]
};
HTML
<div zingchart id="p1chart" zc-json="mybatchChart" zc-width="99%" zc-height="99%" ng-show="graph6" ></div>
I was not able to reproduce your issue, perhaps you didn't define the variables ( ANIMATION_BY_PLOT & ANIMATION_FAST) before using them...
Following is working code:
angular.module('myApp', ['zingchart-angularjs']).controller('myCtrlr', function($scope) {
var ANIMATION_BY_PLOT = 1;
var ANIMATION_FAST = 500;
$scope.myConfig = {
type: "pie",
backgroundColor: "#FFFFFF",
plot: {
borderColor: "#FFFFFF",
borderWidth: 5,
// slice: 90,
valueBox: {
placement: 'out',
text: '%t\n%npv%',
fontFamily: "Open Sans"
},
tooltip: {
fontSize: '18',
fontFamily: "Open Sans",
padding: "5 10",
text: "%npv%"
},
animation: {
effect: 2,
method: 5,
speed: ANIMATION_FAST,
sequence: ANIMATION_BY_PLOT
}
},
source: {
text: 'gs.statcounter.com',
fontColor: "#8e99a9",
fontFamily: "Open Sans"
},
title: {
fontColor: "#fff",
text: 'Demo for minh',
align: "left",
offsetX: 10,
fontFamily: "Open Sans",
fontSize: 25
},
subtitle: {
offsetX: 10,
offsetY: 10,
fontColor: "#8e99a9",
fontFamily: "Open Sans",
fontSize: "10",
align: "left"
},
plotarea: {
margin: "20 0 0 0"
},
series: [{
values: [571.0],
text: "Schedul Batch",
backgroundColor: '#50ADF5',
},
{
values: [364.0],
text: "Finished Batch",
backgroundColor: '#FF7965'
}
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>
<body ng-app="myApp">
<div ng-controller='myCtrlr'>
<zingchart id="myPieChart" zc-json="myConfig" zc-height=500 zc-width=600></zingchart>
</div>
</body>
Related
How can I change the x and y co-ordinates of text in react-google-charts?
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
marginRight: 10,
},
},
hAxis: {
textStyle: {
slantedTextAngle: 90
},
}
{
legend: { position: "bottom" },
colors: ["#01B8FF", "#EB6F33", "#03C895"],
chartArea: { width: "40%", height: "70%" },
isStacked: true,
bar: {groupWidth: '30'},
vAxis: {
textStyle: {
fontSize: 12,
color: "#232323",
},
},
};
This properties can be used to create a horizontal stacked chart.
In CKEDITOR 4.0 it was very simple, disabling content filtering
config.allowedContent = true
I have been going throught the docs again and again for almost a week. It was clearly mentioned in the docs that CKEditor 5 implements a custom data model. This means that every piece of content that is loaded into the editor needs to be converted to that model and then rendered back to the view.. I am still unsure how to implement a custom data model which supports all styles and tags.
I am using decoupled editor with react js like below
import React from "react";
import CKEditor from "#ckeditor/ckeditor5-react";
import DecoupledcEditor from "#ckeditor/ckeditor5-build-decoupled-document";
export default function App() {
return (
<div className="App">
<CKEditor
editor={DecoupledcEditor}
data={this.state.data}
onInit={(editor) => {
console.log("Editor is ready to use!");
console.log(editor.ui.getEditableElement());
editor.ui
.getEditableElement()
.parentElement.append(editor.ui.view.toolbar.element);
}}
onChange={this.handleChange}
config={{
allowedContent:true
}}
/>
</div>
);
}
Any help or a peice of code for a new plugin which will allow all html tags and styles would be really greatfull
Yes CKEditor5 is not straight forward. Assuming you are looking for options to explicitly configure editor. I have done in this way,
return (
<CKEditor
editor={DecoupledEditor}
data=''
onInit={(editor) => { editor.ui.getEditableElement().parentElement.insertBefore(editor.ui.view.toolbar.element, editor.ui.getEditableElement());
}}
onChange={(event, editor) => {
}}
config={{
placeholder: helperText ? helperText : "Add content here...",
fontColor: {
colors: [
{
color: "rgb(0, 0, 0)",
label: "Black",
},
{
color: "rgb(77, 77, 77)",
label: "Dim grey",
},
{
color: "rgb(153, 153, 153)",
label: "Grey",
},
{
color: "rgb(230, 230, 230)",
label: "Light grey",
},
{
color: "rgb(255, 255, 255)",
label: "White",
hasBorder: true,
},
{
color: "rgb(255, 0, 0)",
label: "Red",
},
{
color: "rgb(255, 102, 0)",
label: "Orange",
},
{
color: "rgb(255, 255, 0)",
label: "Yellow",
},
{
color: "rgb(102, 255, 51)",
label: "Light green",
},
{
color: "rgb(0, 153, 0)",
label: "Green",
},
{
color: "rgb(0, 0, 255)",
label: "Blue",
},
],
},
fontBackgroundColor: {
colors: [
{
color: "rgb(0, 0, 0)",
label: "Black",
},
{
color: "rgb(77, 77, 77)",
label: "Dim grey",
},
{
color: "rgb(153, 153, 153)",
label: "Grey",
},
{
color: "rgb(230, 230, 230)",
label: "Light grey",
},
{
color: "rgb(255, 255, 255)",
label: "White",
hasBorder: true,
},
{
color: "rgb(255, 0, 0)",
label: "Red",
},
{
color: "rgb(255, 102, 0)",
label: "Orange",
},
{
color: "rgb(255, 255, 0)",
label: "Yellow",
},
{
color: "rgb(102, 255, 51)",
label: "Light green",
},
{
color: "rgb(0, 153, 0)",
label: "Green",
},
{
color: "rgb(0, 0, 255)",
label: "Blue",
},
],
},
toolbar: [
"heading",
"|",
"bold",
"italic",
"blockQuote",
"underline",
"link",
"fontSize",
"fontColor",
"fontBackgroundColor",
"numberedList",
"bulletedList",
"imageUpload",
"imageStyle:full",
"imageStyle:side",
"mediaEmbed",
"|",
"undo",
"redo",
],
}}
>
</CKEditor>
)
I'm trying to customise my chart's legend. My current legend needs to look like this legend.
Basically I need to make the circular icons rectangular and change the legend text color to correspond with the icon.
I've looked everywhere in the docs but I'm not finding a solution. This is how I configured the graph below (legend > itemStyle):
useEffect(() => {
Highcharts.chart(chart.current, {
chart: {
type: 'column',
style: {
fontFamily: '"Roboto", sans-serif',
},
height: 312,
},
credits: {
enabled: false,
},
title: {
text: null,
},
xAxis: {
categories,
labels: {
step: 1,
style: {
fontSize: '8px',
color: '#808992',
},
useHTML: true,
formatter() {
const day = this.value.format('D');
if (moment().isSame(this.value, 'd')) {
return `<strong style="font-weight: 900; color: #0E2C47;">${day}</strong>`;
}
return day;
},
},
gridLineWidth: 1,
},
yAxis: {
min: 0,
title: {
text: `Collections ${showValue ? 'value' : 'count'}`,
style: {
color: '#0E2C47',
fontWeight: '500',
fontSize: '12px',
letterSpacing: '0.3px',
lineHeight: '14.4px',
},
},
labels: {
style: {
fontSize: '8px',
color: '#808992',
},
useHTML: true,
formatter() {
// eslint-disable-next-line react/no-this-in-sfc
const collection = this.value;
const format = Math.abs(collection) > 999 ? `${Math.sign(collection) * ((Math.abs(collection) / 1000).toFixed(1))}K` : Math.sign(collection) * Math.abs(collection);
return `${format}`;
},
},
useHTML: true,
},
legend: {
title: {
text: 'Status',
style: {
fontSize: '12px',
letterSpacing: '0.3px',
color: '#0A1944',
fontWeight: '500',
},
},
itemStyle: {
fontSize: '10px',
letterSpacing: '0.25px',
fontWeight: '500',
color: '#0A1944',
},
reversed: 'true',
layout: 'vertical',
align: 'right',
verticalAlign: 'bottom',
itemMarginBottom: 8,
x: -30,
y: -2,
},
plotOptions: {
series: {
stacking: 'normal',
},
},
tooltip: {
formatter() {
// eslint-disable-next-line react/no-this-in-sfc
return `<b>${this.y} ${this.series.name}</b><br/>${this.x.format('D MMM YYYY')}`;
},
},
series: [{
name: 'Draft',
data: chartData.draft, // [...times(() => null, 30), ...times(random, 31)],
color: collectionStateColors.draft, // processed
legendIndex: 0,
}, {
name: 'Approved',
data: chartData.approved,
color: collectionStateColors.approved, // orange
legendIndex: 1,
}, {
name: 'Expired',
data: chartData.expired,
color: collectionStateColors.expired, // purple
legendIndex: 2,
}, {
name: 'Submitted',
data: chartData.submitted,
color: collectionStateColors.submitted, // purple
legendIndex: 3,
}, {
name: 'Tracking',
data: chartData.tracking,
color: collectionStateColors.tracking, // light blue
legendIndex: 4,
}, {
name: 'Processed',
data: chartData.processed,
color: collectionStateColors.processed, // dark blue
legendIndex: 5,
}],
});
});
I am trying to use google react pie chart however I am having a hard time position the title.
Here is my code:
const pieOptions = {
title: 'my awesome chart',
pieHole: 0.6,
slices: [
{
color: '#00a3e0',
},
{
color: '#f2a900',
},
{
color: 'F16A21',
},
{
color: '#e9a227',
},
],
legend: {
position: 'right',
alignment: 'center',
textStyle: {
color: '233238',
fontSize: 14,
},
},
tooltip: {
showColorCode: true,
},
// chartArea: {
// left: 0,
// top: 0,
// width: '100%',
// height: '70%',
// },
fontName: 'Roboto',
fontSize: 20,
}
<Chart
chartType="PieChart"
data={[
['Item', 'Numbers'],
['Item 1', 5000],
['Item 2', 20000],
['Item 3', 6000],
]}
options={pieOptions}
graph_id="PieChart"
width={'100%'}
height={'220px'}
legend_toggle
/>
Here is what I get:
My desired result is to put the title above the legend but I am clueless how to do so.
Here is a link to the npm package I am using:
https://github.com/RakanNimer/react-google-charts#donut-chart
https://github.com/rakannimer/react-google-charts/blob/master/sandboxes/pie-chart/index.js
It doesn't seem that there is a way to position the title. You'll have to set titlePosition: 'none' and create a title separately and style it how you want instead.
Read more at the docs.
I'm not able to align the text to center.
HTML code
<zingchart id="ring" zc-json="data" ></zingchart>
zingchart json data
$scope.data = {
globals: {
shadow: false,
fontFamily: "Verdana",
fontWeight: "100"
},
type: "ring",
backgroundColor: "#fff",
legend: {
layout: "x5",
position: "50%",
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v $"
},
plot: {
refAngle: "-90",
borderWidth: "0px",
valueBox: {
placement: "in",
text: "%npv %",
"font-color":"black",
fontSize: "15px",
textAlpha: 1,
}
},
series: [{
text: "Total Billed",
values: $scope.billedHours,
backgroundColor: "#97c563",
}, {
text: "Total Budget",
values: $scope.projectRevenue,
backgroundColor: "#f7d347",
}]
};
I'm using this Libary for the very first time, tried different options but nothing happend.
need help from experts, please suggest something.
thanks in advance.
I tried this in my project and this should do the trick, just replace your legend property with this.
If I am right you can also use layout: "center"
legend: {
layout: "2x2", //this should center it on mid
position: "50%",
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
To align the legend center you can use the attribute align:center. We have extensive documentation at the following links:
Legend Tutorial
Legend JSON Docs
var myConfig = {
type: 'pie',
plot: {
layout: 'auto'
},
legend: {
layout: "x5",
align: 'center',
borderColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
series: [
{
values: [35]
},
{
values: [25]
},
{
values: [15]
},
{
values: [45]
},
{
values: [75]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>