I have the following code showing a pie chart with Flot:
HTML
<div style="background-color: #000000">
<div id="divChartContainer" style="width: 50px; height: 50px"></div>
</div>
JS:
$(function () {
$.plot($('#divChartContainer'), [{data: 60, color: '#F0F0F0'},{data: 40, color: '#F68E22'}], {
series: {
pie: {
show: true,
stroke: { width: 2, color: '#F0F0F0'},
label: { show: false },
},
legend: { show: false }
}
});
});
This is also in a fiddle here. I'm not sure why the top, bottom, left and right edges are being cut off as I've told the chart to be 50px high and wide.
Following on the comment from mechenbier, you need to get the size of the pie smaller then the size of the container so that the stroke still stays inside the container. The easiest solution is setting the radius to 24 (it needs to be smaller then half the height/width of the container):
pie: {
show: true,
stroke: { width: 2, color: '#F0F0F0'},
label: { show: false },
startAngle: 3/2,
radius: 24
},
See this updated fiddle.
Related
I have this Zingchart(gauge type) which displays random numbers from 1 to 100 using JS. I need to achieve the same via PHP. How can I do this? What are the necessary changes that needs to be done?
window.feed = function(callback) {
var tick = {};
tick.plot0 = Math.ceil(Math.random() * 100);
callback(JSON.stringify(tick));
refresh:{
type:"feed",
transport:"js",
url:"feed()",
interval:1000,
resetTimeout:1000
},
The necessary changes to work in php would be to set up a endpoint to hit. If you did something like:
window.feed = function(callback) {
var tick = {};
tick.plot0 = Math.ceil(Math.random() * <?php $phpValue ?>);
callback(JSON.stringify(tick));
The variable $phpValue would not work for a Javascript feed function because that value would printed only ONE time as the server compiles the php ONCE.
What to do then?
You want to add a proper url endpoint which returns the tick format. That would look something like this:
refresh: {
type: 'feed',
transport: 'http',
url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=50&plots=2',
interval: 200
}
Where the url returns the following data structure:
[{
plot0: 3,
plot1: 18,
'scale-x': "13:33:48" // optional scale-x argument to produce [x,y] plotting
}]
You can read more on the http docs.
Solution
Demo here
// define top level feed control functions
function clearGraph() {
zingchart.exec('myChart', 'clearfeed')
}
function startGraph() {
zingchart.exec('myChart', 'startfeed');
}
function stopGraph() {
zingchart.exec('myChart', 'stopfeed');
}
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
//clear start stop click events
document.getElementById('clear').addEventListener('click', clearGraph);
document.getElementById('start').addEventListener('click', startGraph);
document.getElementById('stop').addEventListener('click', stopGraph);
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
const myConfig = {
//chart styling
type: 'line',
globals: {
fontFamily: 'Roboto',
},
backgroundColor: '#fff',
title: {
backgroundColor: '#1565C0',
text: 'Real-Time Line Chart',
color: '#fff',
height: '30x',
},
plotarea: {
marginTop: '80px'
},
crosshairX: {
lineWidth: 4,
lineStyle: 'dashed',
lineColor: '#424242',
marker : {
visible : true,
size : 9
},
plotLabel: {
backgroundColor: '#fff',
borderColor: '#e3e3e3',
borderRadius:5,
padding:15,
fontSize: 15,
shadow : true,
shadowAlpha : 0.2,
shadowBlur : 5,
shadowDistance : 4,
},
scaleLabel: {
backgroundColor: '#424242',
padding:5
}
},
scaleY: {
guide: {
visible: false
},
values: '0:100:25'
},
tooltip: {
visible: false
},
//real-time feed
refresh: {
type: 'feed',
transport: 'http',
url: 'https://us-central1-zingchart-com.cloudfunctions.net/public_http_feed?min=0&max=50&plots=1',
interval: 500,
},
plot: {
shadow: 1,
shadowColor: '#eee',
shadowDistance: '10px',
lineWidth:5,
hoverState: {visible: false},
marker:{ visible: false},
aspect:'spline'
},
series: [{
values: [],
lineColor: '#2196F3',
text: 'Blue Line'
},{
values: [],
lineColor: '#ff9800',
text: 'Orange Line'
}]
};
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%',
});
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
margin: 0 auto;
height: 380px;
width: 98%;
box-shadow: 5px 5px 5px #eee;
background-color: #fff;
border: 1px solid #eee;
display: flex;
flex-flow: column wrap;
}
.controls--container {
display: flex;
align-items: center;
justify-content: center;
}
.controls--container button {
margin: 40px;
padding: 15px;
background-color: #FF4081;
border: none;
color: #fff;
box-shadow: 5px 5px 5px #eee;
font-size: 16px;
font-family: Roboto;
cursor: pointer;
transition: .1s;
}
.controls--container button:hover {
opacity: .9;
}
/*button movement*/
.controls--container button:active {
border-width: 0 0 2px 0;
transform: translateY(8px);
opacity: 0.9;
}
.zc-ref { display:none; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid: Blank Grid</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart">
<a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
</div>
<div class="controls--container">
<button id="clear">Clear</button>
<button id="stop">Stop</button>
<button id="start">Start</button>
</div>
</body>
</html>
In my rails app I added some chart and wanted to change the colours from black (see image).
Here is the code in my view:
<%= line_chart $tweet_per_day, id: "line_chart $tweet_per_day", width: "400px", height: "300px", ytitle: "Tweets count", ytitleFontColor: ["pink", "#F76161"], colors: ["blue", "#76BDD1"], download: "top_hashtags", refresh: 60 %>
the chart is getting the right color but the axis title are black so are the axis.
Ok, it seem like chartkick with chart.js has some limitations. So I switch to google charts.
I removed the chart.js code in my application.html.erb and application.js and replace it with google chart code.
To change my line chart this page was helpful.
Below is the working code in my view:
<%= line_chart $tweet_day, id:"line_chart $tweet_day",xtitle: "Day of the Week", ytitle: "Tweets Count", colors: ["#C2F4FF"], download: "tweet_day", refresh: 60,
library: {
vAxis: { baselineColor: "#F76161", gridlines: {Color: "" }, textStyle: { color: "#76BDD1"}, titleTextStyle: {color: "#F76161"} },
hAxis: { baselineColor: "#F76161" , gridlines: {Color: "" }, textStyle: { color: "#76BDD1"} , titleTextStyle: {color: "#F76161"} } } %>
hope it help someone.
I basically want to change the color of a JointJS shape in their RAPPID environment I'm trialing.
Here is some background on what I have so far and what I want to achieve:
I have a JointJS shape called ChristmasTree that extends joint.dia.Element.
Basically the svg string that builds this ChristmasTree object is a path of the tree (svg path element), and multiple ornaments on it (4 svg circles/ellipses which have id's and classes that I would assume I can use to modify the colors).
I set some initial values for the ornaments via the style attr inside the svg string.
Once I place that in the left RAPPID menu, the user can drag that one Christmas Tree with red balls on it, yay.
Question ###1:
But I would like to place a 2nd ChristmasTree shape in the left menu without creating another main object that has Green balls... How would I achieve this?
In my below code, christmas_tree_style_2 should override the .ornament class with
'fill': "#00ff00", but doesn't (in the left menu, its still red)?
In fact, christmas_tree_style_1, i also tried to override with a Blue ball 'fill': "#0000ff", but its still red.
How can I achieve a left-nav override of the shape?
Question ###2:
Pretend you help me resolve previous issue. You can drag and drop 2 multiple color ChristmasTree's from the left-menu nav into the main RAPPID content area.
I'd like to now change the colors dynamically through the inspector.
I added a color inspector that shows up in the RAPPID right-nav menu for every element with:
'ornament_fill': { label: 'Color of christmas-tree-ornament's fill', type: 'color', group: 'generalinfo', index: 2 }
But not sure how to create an event to dynamically change the color of the ornaments. Any idea? Thanks!
Here is the important part's of the code below.
And also here is an actual working example (but the left-nav initial override and right-nav Inspector color override dont work, hence my 2 questions):
http://armyofda12mnkeys.kissr.com/rappid_christmastree/index.html
(sorry i couldnt find a CDN for rappid.js to add to JSFiddle so it was easier to upload the folder to a site). The applicable files to my question are app.js and rappid-custom-shapes.js.
#
//svg for Christmas Tree + its ornaments... will be added to ChristmasTree shape/obj below
var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />
<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";
#
//default Christmas Tree
joint.shapes.basic.ChristmasTree = joint.dia.Element.extend({
markup: ChristmasTreeSVGstr,
defaults: joint.util.deepSupplement({
type: "basic",
name: 'Initial Christmas Tree label text',
size: {
width: 20,
height: 20
},
attrs: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
width: 10,
height: 15
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
}, joint.dia.Element.prototype.defaults)
});
#
//RAPPID left menu christmas trees (2 variations of the initial ChristmasTree object, so I need to override some of the colors)
var christmas_tree_style_1 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#0000ff",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
});
var christmas_tree_style_2 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'blue',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "yellow",
'stroke': "yellow",
'stroke-width': '5px',
'fill-opacity': 1
}
}
});
//add to left menu
stencil.load([christmas_tree_style_1, christmas_tree_style_2], 'customchristmastrees');
#
//add it to the inspector
function createInspector(cellView) {
if (!inspector || inspector.options.cellView !== cellView) {
if (inspector) {
// Set unsaved changes to the model and clean up the old inspector if there was one.
inspector.updateCell();
inspector.remove();
}
//if(cellView.$el.hasClass('class')) // certain element should get certain things more in inspector?
//how to determine different shapes?
inspector = new joint.ui.Inspector({
inputs: {
'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },
'ornament_fill': { label: 'Color of christmas-tree-ornaments fill', type: 'color', group: 'generalinfo', index: 2 },
},
groups: {
generalinfo: { label: 'General Info', index: 1 },
},
cellView: cellView
});
$('.inspector-container').html(inspector.render().el);
}
}
Question #1: you need to remove style properties from the markup if you want to change them through the attr property on the element. I removed the fill, stroke, stroke-width from the markup:
var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />
<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";
then you can customize the shape as follows:
var rb = new joint.shapes.basic.ChristmasTree({
position: { x: 50, y: 50 },
size: { width: 100, height: 150 },
attrs: {
".ornament": {
'fill-opacity': 1,
stroke: 'pink',
'stroke-width': 5,
fill: 'blue'
}
}
});
Question #2:
in case you sorted out the issue #1 you can simply sync the values directly with the attrs:
inspector = new joint.ui.Inspector({
inputs: {
'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },
attrs: {
'.ornament': {
fill: {
label: 'Color of christmas-tree-ornaments fill',
type: 'color',
group: 'generalinfo',
index: 2
}
}
},
},
groups: {
generalinfo: { label: 'General Info', index: 1 },
},
cellView: cellView
});
I was able to create a custom element utilizing answers from this question:
Using predefined SVG file for creating a custom JointJS shape with ports
After reviewing the tutorials for JointJS I don't see how to move the ports to different locations on the element.
Thanks
Example code:
http://jsfiddle.net/jshubert/9a8brrun/
var el1 = new joint.shapes.devs.Model({
markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
size: {
width: 100,
height: 100
},
position: {
x: 50,
y: 75
},
attrs: {
'.label': { text: 'SW_1', 'ref-x': .1, 'ref-y': .01},
'.body': {
width: 1024,
height: 768,
'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
preserveAspectRatio: 'none'
}
},
inPorts: ['1'],
outPorts: ['2']
});
ref-x, ref-y applied on appropriate selector can do the trick eg.
'.inPorts .port0 .port-body' : {'ref-x': -20, 'ref-y': -20}
http://jsfiddle.net/9a8brrun/1/
I m new to jointJS, I need to create custom shapes using JointJS, I have tried creating the diamond shape using the Rectangle, making its height and width same, and then rotate by 45 degrees as follows,
var diamond = new joint.shapes.basic.Rect({
position: { x: 100, y: 100 },
size: { width: 100, height: 100 },
attrs: { diamond: { width: 100, height: 30 } }
});
diamond.attr({
rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' },
text: {
text: 'Diamond', fill: '#3498DB',
'font-size': 18, 'font-weight': 'bold',
'font-variant': 'small-caps',
'text-transform': 'capitalize'
}
});
diamond.rotate(45);
However, the text present inside the rectangle also gets rotated, Any Ideas how can i proceed.... Also I need to create hexagon with a label... Any help will be much appreciated ....
Thanks In Advance,
Mayuri
There is no need to rotate the whole element. Try to add a transform attribute to joint.dia.basic.Rect model.
rect: { transform: 'rotate(45)' }
The other option would be to use joint.dia.basic.Path model.
var diamond = new joint.shapes.basic.Path({
size: { width: 100, height: 100 },
attrs: {
path: { d: 'M 30 0 L 60 30 30 60 0 30 z' },
text: {
text: 'Diamond',
'ref-y': .5 // basic.Path text is originally positioned under the element
}
}
});
In order to achieve a hexagon shape, use the joint.dia.basic.Path model again, but this time use the following path data.
path: { d: 'M 50 0 L 0 20 0 80 50 100 100 80 100 20 z'}
Last but least you can create a custom shape with SVG Polygon in its markup.
Thanks a lot Roman, I followed first solution for diamond and it worked liked a charm!!
here is this for any one looking to make diamond shape using joint.js, I have added the following in joint.js
joint.shapes.basic.Diamond = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
defaults: joint.util.deepSupplement({
type: 'basic.Rect',
attrs: {
'rect': { fill: '#FFFFFF', stroke: 'black', width: 1, height: 1,transform: 'rotate(45)' },
'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
And for its implementation as follows,
var diamond = new joint.shapes.basic.Diamond({
position: { x: 100, y: 100 },
size: { width: 100, height: 100 },
attrs: { diamond: { width: 100, height: 30 } }
});
diamond.attr({
rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' },
text: {
text: 'Diamond', fill: '#3498DB',
'font-size': 18, 'font-weight': 'bold',
'font-variant': 'small-caps',
'text-transform': 'capitalize'
}
});