I want to add titles to the x and y axes using ZingChart. For example, if my x-axis shows years (2010, 2011, 2012, etc.), I want the title "Fiscal Year" to be shown below each of the year labels
Similarly, if I am measuring revenues on the y-axis, where I may see labels like 1,000,000, 2,000,000, etc. I want to add a title to the y-axis that says "Annual Revenues".
I couldn't find anything in the documentation about this.
The link Martin used is correct, however there is also documentation about this in the JSON syntax guide. http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/
var myChart = {
"graphset":[
{
"type":"mixed",
"background-color":"#ffffff",
"alpha":1,
"title":{
"text":"Browser Usage",
"font-size":"20px",
"font-weight":"bold",
"font-color":"#000000",
"background-color":"#ffffff",
"margin-top":"15px",
"margin-left":"15px",
"margin-bottom":"10px",
"text-align":"left"
},
"scale-x":{
"line-width":"1px",
"line-color":"#CCCCCC",
"line-style":"solid",
"values":["Jan","Feb","Mar","Apr","May","Jun","Jul"],
"guide":{
"line-width":"1px",
"line-color":"#CCCCCC",
"line-style":"solid"
},
"label":{
"text":"Month",
"font-size":"20px",
"color":"red"
},
"item":{
"font-family":"helvetica",
"font-color":"#CCCCCC",
"font-weight":"bold",
"font-size":"10px",
"visible":true
}
},
"scale-y":{
"values":"0:50:10",
"line-width":"1px",
"line-color":"#CCCCCC",
"line-style":"solid",
"tick":{
"visible":true,
"line-color":"#CCCCCC",
"placement":"outer",
"size":"12px"
},
"item":{
"font-color":"#CCCCCC",
"font-weight":"bold",
"font-size":"10px",
"visible":true
},
"guide":{
"line-width":"1px",
"line-color":"#CCCCCC",
"line-style":"solid"
}
},
"tooltip":{
"visible":true
},
"plot":{
"alpha":1,
"hover-state":{
"visible":false
}
},
"series":[
{
"type":"bar",
"values":[47,32,37,48,28,27,32],
"text":"Safari",
"background-color":"#7eac10"
}
]
}
]
};
zingchart.render({
id: "myChart",
height: "300px",
width: "100%",
data: myChart
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
You may have been searching docs for a title. But you can accomplish what you'd like to do by adding a "label" object to your scale-x and scale-y objects and fill it with the attributes necessary to style it for matching your chart.
You can always right click on a chart on ZingChart to see the source.
Related
Draw a basic line chart using Chart.js version 2.8.0.
Observe the rightmost data point is cut off. But the leftmost data point (the first data point) looks intact.
I’ve changed the size of the data point circles by changing values of pointRadius. But even in the smallest value, the data point still gets cut off.
I’m not using any plugin or fancy settings. I am filling the chart are with light gray background colour. But other than that, everything else is a box standard Chart.js.
I’ve recreated the issue here:
https://codepen.io/LeoU/pen/gVLybO
And here is my options settings.
options: {
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return "£" + parseInt(tooltipValue).toLocaleString();
}
}
},
scales: {
yAxes: [{
gridLines: {
color: "white",
lineWidth: 2
},
ticks: {
beginAtZero: true,
min: 0,
stepSize: 500000,
callback: function(value, index, values) {
return "£" + value.toLocaleString();
},
},
scaleLabel: {
display: true,
labelString: "Median house price"
}
}],
xAxes: [{
display: false,
ticks: {
display: false
}
}]
}
},
Has anyone seen a similar problem with Chart.js?
You can use offset
scales: {
xAxes: [{
offset: true
}]
}
I fixed this by adding padding value to the right hand side of the chart.
I played around with the exact number and 4 looked about right for my chart. But I’d imagine the right number will depend on the size of your pointRadius and other variables you have.
This is what it looks like for me with the changes.
options: {
layout: {
padding: {
left: 0,
right: 4,
top: 0,
bottom: 0
}
}
}
For more about padding for Chart.js, this is their instruction page.
https://www.chartjs.org/docs/latest/configuration/layout.html
It is annoying. And, this should be a default setting, really. But this fixed the problem for me.
I need to put some additional labels on my charts, so I'm using shapes. Here is the result:
http://jsfiddle.net/z3n3qobm/91/
But I need to align the circles from the example with the labels of the X-axis. The chart must be responsive and the total of labels depends from the database.
I have a function that generates the initial position of the shapes in '%', but it misaligns when I change the window's size.
I did some calculations, but when the chart resizes it doesn't keep a fixed proportion.
Someone have an idea how to use shapes at the same position of the X-axis labels?
Unfortunately ZingChart does not provide a way to scale shapes and labels based on sizing. Hooks are available to position labels on nodes, but not on scale items themselves.
Now there I do have a solution to your issue, but just to be clear this is more of a hack utilizing tricks with ZingChart and multiple charts. I removed the shapes in your chart and decided to replicate those circles utilizing a second chart.
The main goal of this was to utilize a scatter chart, modify the look of each scatter node to replicate what you are trying to achieve, and to hide all the superficial items that were unnecessary (scales, removed plotarea margins). Do note that I'm using a mixed chart, one series for the scatter chart, and another for a dummy bar chart to force the scales to match how the chart above is displayed.
http://jsfiddle.net/mikeschultz/q6arebsu/1/
(Snippet below incase the jsfiddle is deleted in the future).
This can be also accomplished by combining the two charts into a single graphset, but I find working with separate charts is more flexible.
var myData = {
"graphset":[
{
"globals":{
"overflow":"visible"
},
"plot":{
"animation":{
"effect":"ANIMATION_EXPAND_BOTTOM",
"sequence":null,
"speed":10
},
"aspect":"jumped"
},
"plotarea": {
"margin-bottom": 30
},
"type":"mixed",
"series":[
{
"type":"bar",
"values":[46,46,53,50],
"background-color":"#5e36e6",
"value-box":{
"placement":"bottom-in",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":0
},
{
"type":"bar",
"values":[52,53,61,58],
"background-color":"#0099cd",
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":1
},
{
"type":"line",
"values":[150,105,399,159],
"marker":{
"size":0,
"border-width":0,
"background-color":"transparent"
},
"line-color":"#99cc33",
"line-width":3,
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":"."
},
"palette":2
}
],
"background-color":"#3F0767",
"scale-x":{
"tick":{
"alpha":0
},
"zooming":false,
"labels":["AB","CDE","FG","HI JKL"],
"line-width":0,
"zoom-to":null
},
"scale-y":{
"guide":{
"alpha":0.25,
"line-style":"solid",
"line-color":"#5a3b77"
},
"short":true,
"tick":{
"alpha":0
},
"line-width":0
},
"scroll-x":false
},
]
};
zingchart.render({
id : 'myChart',
data : myData,
height: 400
});
var bubbleConfig = {
type: 'mixed',
backgroundColor:"#3F0767",
scaleX: {
visible: false
},
scaleY: {
visible: false
},
plotarea: {
marginTop : 0,
marginBottom: 0,
maskTolerance: [0,0]
},
plot: {
marker: {
size: 30,
borderColor: '#371876',
borderWidth: 3,
backgroundColor: 'transparent'
},
tooltip: {
visible: false
}
},
scaleY: {
values: "0:2:1",
visible: false
},
series: [
{
type:'scatter',
values: [
[0,1],
[1,1],
[2,1],
[3,1]
],
valueBox: {
visible: true,
text: 'foobar',
fontColor: '#fff',
fontSize: '15px',
fontWeight: 'normal',
placement: 'over',
rules: [
{
rule: '%i == 0',
text: '35%'
},
{
rule: '%i == 1',
text: '51%'
},
{
rule: '%i == 2',
text: '15%'
},
{
rule: '%i == 3',
text: '36%'
}
]
}
},
{
type:'bar',
values: []
}
]
}
zingchart.render({
id : 'myBubbles',
data : bubbleConfig,
height: 80
});
<html>
<head>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
<div id='myBubbles'></div>
</body>
</html>
I have a visual that includes multiple pie charts (i have a graphset that contains multiple separate pie charts). I want the size of each pie chart to reflect the size of the data in each pie. For example, a pie showing 2010 revenues of $1,000,000 will be smaller than a pie showing 2014 revenues of $2,000,000.
But the size attribute seems to have no impact on the size of each pie, whether I use just a number or a number plus "px".
Does this feature in fact work for pie charts? If so, can someone demonstrate it.
I'm on the ZingChart team, and I'll be happy to help you out with this.
Using the dataparse event, we can retrieve the necessary information about the chart that is to be rendered and make the appropriate calculations and modifications before the render occurs. In this case, we're interested in the values of each pie.
The code snippet below will tally up the totals for each pie chart and generate a percentage modifier. With the current calculations, the largest pie would have a size of 100%, and a pie with exactly half the value of the largest pie would be 50%. You can of course change this if you'd like.
Oh, and if this is too much overkill, you can hard code the size of each pie by setting the "size" attribute in the "plot" object of each chart. You can see this as calculated by my function if you right-click and view the chart source. The values can be percentage values or a numeric value for size in pixels.
Let me know if you have any questions!
// Dataparse is called when the data is ready for the chart
zingchart.dataparse = function (p, d) {
console.log(d);
// Get number of series in graphset, initialize array of 0s
var seriesLength=d.graphset.length;
var total = new Array(seriesLength);
while(seriesLength--) total[seriesLength] = 0;
// Calculate the sum of the values in each series (each pie)
for (var n = 0; n < d.graphset.length; n++) {
for (var m = 0; m < d.graphset[n].series.length; m++) {
total[n] += d.graphset[n].series[m].values[0];
}
}
// Find the largest value in the array of totals
var largest = Math.max.apply(Math, total);
// Calculate % modifier based off of largest value for each pie chart
for (var n=0;n<d.graphset.length;n++){
var sizeModifier=(total[n]/largest)*100;
// Apply the size modifier to the plot object of each pie chart.
d.graphset[n].plot.size = sizeModifier + '%';
}
// Return modified chart object to be rendered.
return d;
}
var oData = {
"layout": "h",
"graphset": [{
"type": "pie",
"plotarea": {
"margin": "0 40"
},
"plot": {
"value-box": {
'visible': 1,
"text":"%v"
}
},
"series": [{
"values": [169]
}, {
"values": [151]
}, {
"values": [142]
}, {
"values": [125]
}]
}, {
"type": "pie",
"plotarea": {
"margin": "0 40"
},
"scaleX": {
},
"scaleY": {
},
"plot": {
"value-box": {
'visible': 1,
"text":"%v"
}
},
"series": [{
"values": [120]
}, {
"values": [89]
}, {
"values": [87]
}, {
"values": [147]
}]
}]
};
zingchart.render({
id: 'chartDiv',
data: oData,
width: 800,
height: 400
});
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='chartDiv'></div>
I'm trying to specifically target the first and last x-axis labels, which are text elements, and alter their attributes.
To preface this issue, I was trying to keep the first and last x-axis labels within the confines of the Highcharts container. Unfortunately, they are cutting off in the UI.
This is my configuration:
xAxis: [{
type: 'datetime',
showFirstLabel: true,
showLastLabel: true,
labels: {
step: 3,
formatter: function(){
return options.labels[this.value];
},
style: {
fontSize: '10px',
color: '#9c9c9c'
},
// x: 5,
y: 10
},
startOnTick: true,
// lineColor: 'transparent',
tickLength: 0,
minPadding: 0,
maxPadding: 0
}],
The step key is causing this I realize. Otherwise, I would be able to use overflow:justify, but I wanted the step. So, I then decided that perhaps altering the SVG would be a good solution. It worked when the chart is first loaded, but it does not work when being redrawn.
This was my solution on 'load', which I'd like to replicate on 'redraw':
Highcharts.Chart.prototype.callbacks.push(function(chart){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
});
You should configure these callbacks in the options of your chart. It's cleaner that way:
function moveLabels(){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
}
$('#container').highcharts({
chart: {
events: {
load: moveLabels
redraw: moveLabels
}
}
},
...
I have a basic bar chart I'm presenting in flot (5 bars, displaying the % per status).
$.plot($("#placeholder"), [
{
label: 'Failed',
data: [[0,10]],
bars: { show: true }
},
{
label: 'Passed',
data: [[1,15]],
bars: { show: true }
},
{
label: 'Not Run',
data: [[2,30]],
bars: { show: true }
},
{
label: 'Blocked',
data: [[3,5]],
bars: { show: true }
},
{
label: 'In Progress',
data: [[4,40]],
bars: { show: true }
}
],
{
xaxis: {
ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
},
legend: {
show: false
}
});
I'm finding the font used for the tick values on the x axis are a little too big, especially when the graph is displayed at small dimensions ie. 240x100. I've read the API documentation, but can't find how to control the tick label sizes.
Is this possible OOTB?
It doesn't appear you can set the font size via the API, but you can use css to set the size of the tick labels.
.tickLabel { font-size: 80% }
Here's an example directly from the API:
xaxis:{
font:{
size:11,
style:"italic",
weight:"bold",
family:"sans-serif",
variant:"small-caps"
}
}
http://flot.googlecode.com/svn/trunk/API.txt
The above two answers won't work on the latest version of flot, as they no longer use 'real' text (the text is drawn instead). Instead specify these options:
{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}
(replace some_number with the desired size in points)
I used the following:
CSS File/SCSS File
#graph_label .tickLabel{
font-size: 50%;
}
Index.html or place where you are plotting the graph area
$.plot($("graph_label"), [dataArrayReference], options);
Ref: #BrentM 's Answer Above
PS: I am using Flot Version prior to 0.8.1 so I dont have any idea about how latest version would work