I want to get all the scale x labels and scale y labels and also the main x label and y label in zingchart . How to do it ?
The "Main label X" and "Main label Y" are referred to as scaleX.label and scaleY.label in zingchart. You will need to specify a text parameter for that object like so :
scaleY :{
label : {
text : "Main label y"
}
}
By default, each tick mark in ZingChart is predetermined based upon values. To change this, there are two ways to accomplish this :
Using the scale labels property which takes an array of string values. This will overwrite the text value at each corresponding index. Note that this will not modify the placement of each node value on the chart; it is simply a visual change.
Using the scale values property which takes an array of numeric values. This will modify the actual values of how the scales are placed. i.e. scaleX.values : [4,5,6,7] will set the starting scale at a numeric value of 4 and end at 7.
Example showing the properties noted above :
var myConfig = {
type: "bar",
plotarea : {
margin : "dynamic"
},
series : [
{
values : [35,42,67,89,25,34,67,85]
}
],
scaleY : {
label : {
text : "Scale Y"
},
values : [30,40,50]
},
scaleX : {
label : {
text : "Scale X"
},
labels : ["first", "second", "third"]
}
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
Related
I am trying to d3 funnel chart label legend in horizontal position.i mentioned only label name and value .I want label name with particular label color.Below i mention my sample code. Please someone review my example code and help.
var data = [
['L0', 4, '#080800'],
['L1', 5, '#702963'],
['L2', 0, '#6f34fd'],
['L3', 6, '#07fff0']
];
var options = {
width : 600,
height : 400,
};
var funnel = new D3Funnel ( data, options );
funnel.draw ( "#funnelContainer" );
You should have an attribute named labelColor to override on row-level and give it a valid hex.
labelColor : string, A row-level override for label.fill. Hex only.
Working example D3 Funnel
On my y axis I have value from 0 to n.
I need to display this number in this style:
2 (s)
1 (s)
I just want to add "(s)" but if I do this :
data: latency+"(s)"
It doesn't work.
Latency is the array where I have numbers.
Thanks.
Use the option
scaleLabel: "<%=value%> (s)",
if you want to change the display on the scale.
Or, if you want to change the display in the tooltip, set tooltipTemplate or multiTooltipTemplate depending on whether you have a single or multiple series.
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> (s)",
or
multiTooltipTemplate: "<%= value %> (s)",
You have to set the scaleLabel option like this :
scaleLabel : "<%=value%>(s)"
For example, you can set it in the global Chart options :
Chart.defaults.global = {
scaleLabel : "<%=value%>(s)"
};
You need to use the scaleLabel property.
Look at this:
Chart.js - Formatting Y axis
try :
scaleLabel: function (valuePayload) {
return valuePayload.value + '$';
}
I am using dojo to create a bar chart with multiple vertical axes (one for an actual count, the other for a percentage), and when I do, the title for the right axis always gets cut off (i.e., the half of it that's furthest from the chart gets cut off by the edge of the chart). I've already tried using chart.resize(w,h), but this only shrinks the data in the chart, while maintaining the same margins from the edge (and thus the same title cut as before). Does anyone know how to get the title to properly display? For reference, here's the code I'm using, both to create the div node and the chart.
chartNode = domConstruct.create("div", {
id : this.context.viewid + "_ChartNode",
}, this.context.element, "first");
domStyle.set(chartNode, {
width : "800px",
height : "400px"
});
var chart = new Chart(chartNode);
chart.addPlot("default", {
type : "Columns",
markers : true,
gap : 5
});
chart.addPlot("something", {
type : "Columns",
vAxis : "percent"
});
chart.addAxis("x", {
title : "Person",
titleOrientation : "away",
minorTicks : false,
majorTickStep : 1,
dropLabels : false
});
chart.addAxis("y", {
vertical : true,
fixLower : "includeZero",
title : "Count",
min : 0,
max : data[0].totalSubmitted
});
chart.addAxis("percent", {
title : "Percentage",
titleGap : 20,
vertical : true,
leftBottom : false,
fixLower : "includeZero",
min : 0,
max : 100,
})
chart.addSeries("y", data);
chart.render();
Edit: This is what my code is actually generating, with the cutoff being highlighted in red.
I have a column chart with Highcharts library, something like this:
If you see the red lines maybe you notice what I want achieve. I need to reduce the space between columns and move them to the right, so the chart will have more space between the y-labels and the first column.
Notice that I need a fixed width of 48px for every column. I tried with with groupPadding : 0 and pointPadding : 0 with no luck.
plotOptions : {
series : {
colorByPoint : true,
pointWidth : 48,
borderWidth : 0,
}
},
All the sample code is on jsFiddle.
How can I move all the columns to the right and reduce the space between columns?
UPDATE: As an answer says, a solution is to change the container width to a smaller one. But I need that the grid lines (the grey ones) fill all the page (actually, fill the parent div that would have more width than the chart container). Is it possible to draw the grey lines (the grid lines) outside the chart?
Finally I've done what #HristoIvanov told me in a comment. They suggest that I should put NULL columns at the begining.
Setting the first categorie as NULL and not showing it, is what I need because highcharts left the space for the first column.
That's the code that I needed:
xAxis : {
showFirstLabel: false,
categories : [ null, 'A', 'B', 'C', 'D', 'E', 'F', 'G' ],
[ ... ]
And don't forget the data:
series : [
{ data : [null, 11, 22, 53, 74, 65, 46, 37] }
You can view the result in jsFiddle.
Your code was with a ","
Try this:
plotOptions : {
series : {
colorByPoint : true,
pointPadding : 0,
groupPadding : 0
}
},
Here is your demo: http://jsfiddle.net/zgypy32h/5/
http://jsfiddle.net/zgypy32h/4/
This looks more like what you were going for: JSFiddle
There were a couple things that were giving you trouble. The chart by default wants to fill out the div it's in as much as possible because of Highcharts default settings (check out the reflow option). So to keep the columns close together you have set a max-width or width on the container that you feel satisfies the spacing between columns.
<div id="container" style="max-width: 650px; height: 520px; margin: 0 auto"></div>
And give yourself a little more margin on the left of the chart to compensate.
chart : {
renderTo : 'container',
type : 'column',
showAxes : true,
marginRight : 0,
marginLeft : 50,
spacingLeft : 20,
spacingRight : 0
},
The second is the offset of the y-axis labels to give some spacing between them and the first column. Highcharts doesn't seem to have an initial offset for the first x point, but offset should suffice.
yAxis: {
offset: 60
}
I want to draw some data using jqplot and I have a small issue.
The code I use is this (code on fiddle):
$.jqplot('chart1', [[202],[249],[148]], {
seriesColors : ['#ff0000', '#0f0', '#00f'],
seriesDefaults : {
renderer :$.jqplot.BarRenderer,
pointLabels : {
show : true
},
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
rendererOptions : {
barDirection : 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ["some value", "other series", "third series"],
},
},
});
The graph has 3 horizontal regions, "some value", "other series" and "third series"
I need that each graph bar to be under corresponding region, and to keep the colors as now (red to "some value", green to "other series" and blue to "third series").
How do I need to format the data to get this?
As extra questions:
I want few pixels margin between yaxis and corresponding axe labels. How do I set this?
The graph has a bg color (fade yellow). How do I eliminate that color and to get as bg whatever color the container has?
You need to change your data to
data = [[[202,1],[248,2],[148,3]]];
See working example here.
PS1 : You can change width of the bar by setting barWidth = xx; where xx is in pixels (50px in given example).
PS2 : For your first extra question, you can add something like this :
$("#chart1 .jqplot-grid-canvas").offset({left:$("#chart1 .jqplot-grid-canvas").offset().left+5});
$("#chart1 .jqplot-series-shadowCanvas").offset({left:$("#chart1 .jqplot-series-shadowCanvas").offset().left+5});
$("#chart1 .jqplot-series-canvas").offset({left:$("#chart1 .jqplot-series-canvas").offset().left+5});
$("#chart1 .jqplot-point-label").offset({left:$("#chart1 .jqplot-point-label").offset().left+5});
$("#chart1 .jqplot-highlight-canvas").offset({left:$("#chart1 .jqplot-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-highlighter-tooltip").offset({left:$("#chart1 .jqplot-highlighter-tooltip").offset().left+5});
$("#chart1 .jqplot-barRenderer-highlight-canvas").offset({left:$("#chart1 .jqplot-barRenderer-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-event-canvas").offset({left:$("#chart1 .jqplot-event-canvas").offset().left+5});
I'm pretty sure you can make it a cleaner way but it works (change the +5 values to whatever you need in order to move the chart block). Please see an updated working example here