I am using zing chart in my application with scatter & Line chart, everything working fine but the only problem is the scatter chart node circle gets chopped off when it is at extreme end of the chart.
Tried increasing margin, setting offset, z-index and nothing worked for me till now, any solution is appreciated.
Regards,
Smruti
At this time of writing, the only way I can think of is to adjust your scale-x and scale-y values manually based off of the values you are inserting into the chart. Perhaps a function to preprocess the data to determine a maximum value before rendering a chart would be best. In the example below, I am creating 2 charts. One with set values but does not compensate for markers cutting off the edge, and another which has a helper function to increase the maximum y value by 10%.
HOWEVER! There is an unreleased attribute that will be on the next release we are scheduling within the next week or two. It exposes an attribute called mask-tolerance which will allow markers to bleed past the plot area. Keep an eye out for that as that is the optimum solution. --I'm on the ZingChart team; let me know if you have any further questions.
var myConfig = {
type: "scatter",
plot : {
marker : {
size : 10
}
},
series : [
{
values : [35,42,67,89,25,100,67,100]
}
],
plotarea :{
padding : "10px"
},
scaleY : {
values : "0:90:10"
}
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 200,
width: 300
});
function preProcessData(){
var myValues = [35,42,67,89,25,100,67,100];
var maxVal = Math.max.apply(null,myValues);
var maxScale = maxVal + Math.floor(maxVal * 0.10);
return {
type: "scatter",
plot : {
marker : {
size : 10
}
},
series : [
{
values : myValues
}
],
plotarea :{
padding : "10px"
},
scaleY : {
values : "0:"+maxScale+":10"
}
};
}
zingchart.render({
id : 'myChart2',
data : preProcessData(),
height: 200,
width: 300
});
<html>
<head>
<script src= 'https://cdn.zingchart.com/zingchart.min.js'></script>
</head>
<body>
<div id='myChart'></div>
<div id="myChart2"></div>
</body>
</html>
Related
For my highchart column graph, I have 2 series and the values can be very close to each other, so overlap can happen.
On exporting, I'm reducing the fontSize property but with different results:
Internet Explorer : The fontSize remains the same. Ugly.
Firefox : The fontSize is reduced. However, the datalabels is now not centered anymore which is ugly
Chrome : Perfect result ! As I would expect. FontSize reduced and centered.
Is there anything I can do or you can do (next release) ?
See the JSFiddle here :
Open it in IE, Firefox and Chrome and export in any format (PNG in my test)
I'm changing the export like that :
exporting: {
chartOptions: {
plotOptions: {
column: {
dataLabels: {
allowOverlap: true,
style: {
fontSize: 6
},
}
}
}
}
}
Thanks in advance.
Actually I found the answer :).
The fontSize should be declared as "6px" and not 6.
so instead of :
style: {
fontSize: 6
},
change it as
style: {
fontSize: "6px"
},
Like that, it works as I expected on IE, FF, Chrome.
i have i problem and tried different solutions, but no success.
I have an amChartXY chart, which has white labels and legend text is white, but when i want to build custom pdf report, i cannot convert those white text into black.
First i have a function which exports chart to base64 string, and i want there to convert the text color to black, but it won't work.
Here is a code snippet of a menu item, that converts to SVG that is saved to global array object.
menu: [
{
class: "",
label: "Save to draft",
click: function() {
var overrideObject = {
backgroundColor : "rgba(255,255,255,1)",
color : "#000",
legend : {
color : "#000"
}
};
var chartObject = this;
chartObject.capture(overrideObject, function () {
chartObject.toJPG({}, function (base64) {
// charts is global array
charts.push({
name: customName,
chart: base64
});
});
});
}
},
Here the overrideObject is changing the backgroundColor attribute with white ( before is was transparent ) but it's not changing font color. Also i have tried different attributes to add, but nothing seems to work.
Is this possible at capture time ?
Here are some images preview of what i want to accomplish :
AmChart for export isn't that well documented, so any feedback would be welcome
The overrideObject you're passing only accepts the same parameters listed in the list of export settings. If you need to change the appearance of specific elements on the chart, you need to use the reviver callback mentioned in the annotation settings section to selectively apply your modifications. For example, here's how to target the value axis labels:
"export": {
"enabled": true,
"reviver": function(nodeObj) {
if (nodeObj.className === 'amcharts-axis-label' && nodeObj.svg.parentNode.classList.contains('amcharts-value-axis')) {
nodeObj.fill = 'rgba(255,0,0,1)';
}
},
// ...
}
Note that you need to use SVG attributes to change the appearance, so you'll have to set the fill to change the color of the text element.
Codepen demo
(I asked a similar question once before, but the issue has cropped up again.)
I have a very simple pie chart using ZingCharts, but even though all of the examples on the ZingCharts site show percentages on each slice, I can't get the percentages to show. Note that I am using value boxes. I am using the most recent version of ZingCharts from the CDN: https://cdn.zingchart.com/zingchart.min.js
Note that I am looking for the percentage to appear ON the slice, not in the value box which is text attached to each slice by a line.
Here is my code:
<div id="pie-chart"> </div>
<script>
var slices = var slices = slices = [
{"values":[59],"text":"USA"},
{"values":[55],"text":"UK"}
];
var chartData = {
"type":"pie",
"plot":{
"value-box":{
"visible":true,
"placement":"out",
"text":"%t (%v)"
}
},
"series": slices
};
zingchart.render({
id:"pie-chart",
data: chartData,
height:400,
width:"100%"
});
</script>
I want to use a standard pie chart, not a pie chart with more effects.
To show the percentage value on charts, you would need to use the %npv (node-percent-value) token instead of %v which displays the raw value. More information in the pie chart types page : http://www.zingchart.com/docs/chart-types/pie/
Note that the default functionality for a value box is
"value-box" : {
"placement" : "in",
"text" : "%npv%"
}
Therefore, you can choose to omit that from your JSON. In the example below, I have shown the JSON with the options explicitly.
var slices = [
{"values":[59],"text":"USA"},
{"values":[55],"text":"UK"}
];
var chartData = {
"type":"pie",
"series": slices,
"plot" : {
"value-box" : {
"placement" : "in",
"text" : "%npv%"
}
}
};
zingchart.render({
id:"pie-chart",
data: chartData,
height:400,
width:"100%"
});
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="pie-chart"></div>
can you help me to place a Highchart inside a SVG element instead of an HTML . Cascaded elements work fine. I have already done it with the jquery SVG plot. But Highchart throws an error 13. What can i do?
Kind regards
Markus Breitinger
You can generate chart in div, which will have negative margin. Then use getSVG() function and paste it ot svg element.
http://api.highcharts.com/highcharts#Chart.getSVG()
Unfortunately it is not suppored, highcharts renders the chart in additional divs and adds elements like labels/datalabels as html objects.
But you can copy the SVG of highstock in you SVG. But you will lose all attached events.
Like drag and drop, click ....
Here an Example of it.
http://jsfiddle.net/L6SA4/10/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create a hidden and not attached div container.
var div = $('<div>This is an hidden unatached container.</div>');
// Create the chart
div.highcharts('StockChart', {
chart: {
width: 480,
height: 400,
events: {
load: function () {
// If hidden div was generated, take the svg content and put it into svg.
var stockSvg = $('svg', this.container);
var svgObj = $('#mySvg').svg();
// Force position of highstock
stockSvg.attr('x', 20);
stockSvg.attr('y', 30);
// Replace ugly rect with highstock
$('#container', svgObj).replaceWith(stockSvg);
}
}
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
I'm working with this scroller
http://coolcarousels.frebsite.nl/c/2/
I have this setup below.
My issue is I have it set to visible: 4 and I have 4 images, so it doesn't scroll. If I set it to visible: 3 then it works as expected. But I want to show all 4 images in one screen when you open the browser full width on a 1920px wide resolution. So the issue seems to be. If I set visible to the amount of images I have then it stops working.
Is there a way to have all 4 images on screen at one time then still scroll through them?
$(function() {
$('#carousel').carouFredSel({
width: '100%',
align: 'left',
items: {
visible: 4,
start: 0,
},
scroll: {
items: 1,
queue : true,
fx: "scroll",
easing: "swing",
duration: 1000,
timeoutDuration: 3000
},
prev: '.prev',
next: '.next',
auto: {
easing: "quadratic",
button: '.play',
pauseOnEvent: 'resume',
pauseOnHover: true
}
}).find(".slide .plusNav").hover(
function() { $(this).find("div").slideDown(); },
function() { $(this).find("div").slideUp(); }
);
});
try this
items: {
minimum: 0,
},
I have resolved this issue by setting minimum to 0.
items: {
minimum: 0,
Actually, setting the minimum attribute to zero forces the scroll bar to be displayed always irrespective of number of items currently displayed.
This was required for me because, automatic enabling of scroll bars was not working on certain screen resolutions- I had to add 2 more items to make the scroll bar visible which was not the expected behavior.
As a work around, I set minimum: 0 - it resolved the issue.
I was able to do this by editing the source :/
If you comment out this lines 554 & 556 in jquery.carouFredSel-6.2.0.js like this...
// not enough items
var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1;
if (minimum > itms.total)
{
// e.stopImmediatePropagation();
// return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.');
}
...it worked for me.
Access the wrapper and set its height (assuming all children have the same height):
var carousel = [your_carousel],
carousel_wrapper = carousel.parent();
carousel_wrapper.height(function(){
return (carousel.children('[child_selector]').length) * [child_height];
});
The thing here is, there will be a weird behavior when the carousel animates. This is because the maximum height was done ((n-1) * child_height) intentionally as a mask, along with an overflow: hidden.
Another option would be to duplicate one of the children, but that isn't semantic.