ZingChart - Shapes as Labels - zingchart

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>

Related

Chart.js Change color of the values *inside* the bars of a Bar chart

So what Im trying to do is to change the color of the values inside the bars of a Bar chart. I have tried all options and also have a pen where it doesnt seem to work: https://codepen.io/vbbalaji/pen/oNbwbpm
[![Bar Chart][1]][1]
[1]: https://i.stack.imgur.com/a8lE7.png ]

There are two problems here:
You need to include the chartjs datalabels script in order to use it. Make sure you include this script after the main Chart.js library: https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0.
Your datalabels options should be nested within the key plugins.
Here's the corrected config:
{
type: "horizontalBar",
data: {
labels: ["Red", "Amber", "Green"],
datasets: [
{
backgroundColor: ["#db5935", "#f0ae43", "#3cba9f"],
data: [2, -4, 6]
}
]
},
options: {
legend: { display: false },
title: { display: true, text: "Health Variance" },
plugins: {
datalabels: {
color: "blue",
labels: {
title: { color: "blue", font: { weight: "bold" } },
value: { color: "green" }
}
}
}
}
}
It looks like this:
Here's your updated codepen: https://codepen.io/typpo/pen/oNbwxvK

how to keep the same width in all bars in C3 Javascript library?

I wan't to set all bars the same width, because if I have few bars they get super big, and If I have a lot bars they get very thin.
Here is what I mean:
I have bar width 50 because I tought this was the size of the bar, but it keeps making bars small if the amount increases.
Here is my code:
$(document).ready(function () {
var chart = c3.generate({
bindto: '#stocked',
size: {
height: 320,
width: 1500
},
data: {
labels: ['y',1,2,3,4,5,6],
columns: [
['MUSCLE', <?php echo substr($muscle,1,strlen($muscle)); ?>],
['FAT', <?php echo substr($fat,1,strlen($fat)); ?>]
],
groups: [
['MUSCLE', 'FAT']
],
type: 'bar',
colors: {
MUSCLE: '#75e3ff',
FAT: '#23bbe8'
}
},
bar: {
// width: { ratio: 0.8 }
width: 50,
},
axis: {
x: {
type: 'categories',
show: true,
label: {
text: 'Measurements',
position: 'outer-middle'
},
tick: {
format: "%b",
fit: true,
},
},
y: {
label: {
text: '<?php echo $_SESSION["unit"]; ?>',
position: 'outer-middle'
}
},
},
// subchart: {
// show: true
// },
// zoom: {
// enabled: true
// }
});
});
Thanks and greetings!

The width of your bars is the result of the width of your chart and the amount of data you have populating it. My recommendation would be to size your chart or the container holding your chart accordingly. This will prevent having large white spaces in between each of your bars and result in a more uniform look between your charts.
ex: pseudo code of how to determine how wide you chart should be.
var chart = c3.generate({
size: {
height: 240,
width: function () {
return 6 * 20 + 15
},
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
}
});
Here you can see that there of 6 pieces of data and each data is given 20 space and then an extra 15 to account for the axis/labels etc. If each you had 50 data then it should be width: 6 * 20 + 15 ..... of course now you have different width chart but the bar widths and space between bars should be pretty uniform. The more data the longer the chart. You might need to "20" and "15" to get the look you want.

ZingChart bar chart doesn't show first string value from array

I use ZingCharts for my dashboard charts and I am stucked on this problem. I made a codepen to show my problem. I got array of strings which represent average respond time for some task in hours and I cant figure out why my chart never show 1st string value of array as you can see on codepen.
Here i also post my angular function for this chart
//bar chart with average task time respond
$scope.avgRespondTaskTime = {
gui: {
contextMenu: {
empty: true,
}
},
type: 'bar',
legend: {
//width: "100%",
layout: "center",
position: "50%",
margin: "0px 0px 0px 0px",
borderColor: "transparent",
backgroundColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v hours"
},
"scale-x": {
"label": {
"text": "Project name",
},
"labels": projectNames
},
"scale-y": {
"label": {
"text": "Average Time",
},
},
series: [
{
text: "Completed in Time",
values: $scope.avg_respondTime,
backgroundColor: "#00a65a"
},
]
};
https://codepen.io/spsrulez/pen/ygEvNg

So I solved my problem with using moment.js using this function
moment.duration("your string represent time").asHours()
which I store into array $scope.avg_respondTime
Hope it helps someone in future.

Chart.js Customize tool tip to show more data

I'm using the Chart.js 2.0
The formula : Failure Rate: Failure Count / Total Count.
I've got the an array for failure rate, failure count and total count.
Plotting failure rate of a component against time in a line chart is straight forward but now i also want the failure count and total count to be displayed when the user hovers over the tool tip. I'm not able to figure out how to customize it.
we have e.time, e.count, e.failure_count, e.rate
new Chart(document.getElementById(event_id).getContext("2d"), {type: "line", data:
{
labels: e.time,
datasets: [
{
label: "Failure Rate",
fill: false,
borderColor: "#4caf50",
backgroundColor: "#4caf50",
pointBorderWidth: 1,
pointHoverRadius: 3,
data: e.rate
}
]
}, options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: -1,
suggestedMax: 6
}
}]
},
tooltips: {
custom: function(tooltip) {
tooltip.text= "Not working????"
}
}
}
});

In 2.0, the callback needs a return.
So basically what you want to do is :
custom: function(tooltip) {
tooltip.text= "Not working????"
}
By
callbacks: {
label: function(tooltipItem, data) { return "What you want as a tooltip" }
}

Zing Chart Y-scale data out of frame

I added data formatting to my zingchart Y-scale to use $ "," and 2 decimals, and now the text is out of frame. I tried changing the width of the chart to no avail. Any ideas here?
jsfiddle.net/Rodmunera/j1ddL5k6/7

Try adding the plotarea object to your JSON and add the margin attribute to that object. I tried it with a margin of 100px and it made everything fit in--
var chartJSON =
{
"legend":{
"border-color":"#bbbbbb",
"margin-top":10,
"margin-left":0,
"drag-handler":"header",
"item":{
"toggle":true,
"margin-top":5,
"margin-left":5,
"margin-right":5,
"margin-bottom":5
},
"shadow":false,
"margin-right":0,
"background-color-2":"#e1e1e1",
"border-width":1,
"background-color":"#e1e1e1",
"draggable":true,
"minimize":false,
"header":{
"":0,
"background-color":"#bbbbbb",
"text-align":"center",
"font-size":16,
"text":"Legend",
"font-family":"Lato",
"color":"#ffffff",
"background-color-2":"#bbbbbb",
"font-weight":300
},
"layout":"x4",
"position":"50% 0%",
"margin-bottom":0
},
"tooltip":{
"visible":true,
"decimals":2,
"thousands-separator":",",
"format":"$%v",
"text":"$%v"
},
"stacked":false,
"series":[
{
"background-color":"#7fb2f0",
"line-color":"#7fb2f0",
"text":"Checkout Total",
"marker":{
"border-color":"#7fb2f0",
"background-color":"#7fb2f0",
"alpha":1
},
"background-color-2":"#7fb2f0",
"values":[227.04,141.90,56.76,56.76,56.76,141.90,113.52,56.76,28.38,56.76,56.76,28.38,28.38,56.76,141.90,198.66,56.76,56.76,141.90,397.32,85.14,198.66,85.14,255.42,317.82,783.15,646.95,1770.60,3745.50]
},
{
"background-color":"#bf5a9a",
"line-color":"#bf5a9a",
"text":"Refunds",
"marker":{
"border-color":"#bf5a9a",
"background-color":"#bf5a9a",
"alpha":1
},
"background-color-2":"#bf5a9a",
"values":[0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,56.76,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,272.40,817.20]
},
{
"background-color":"#efae69",
"line-color":"#efae69",
"text":"Revenue",
"marker":{
"border-color":"#efae69",
"background-color":"#efae69",
"alpha":1
},
"background-color-2":"#efae69",
"values":[200.00,125.00,50.00,50.00,50.00,125.00,100.00,50.00,25.00,50.00,50.00,25.00,25.00,50.00,125.00,175.00,50.00,50.00,125.00,350.00,75.00,175.00,75.00,225.00,280.00,690.00,570.00,1560.00,3300.00]
}
],
"guide":{
"line-gap-size":0,
"visible":true,
"line-color":"#000000",
"format":"$%v",
"line-width":1,
"tooltip-visible":false,
"alpha":0,
"tooltip-text":"%v"
},
"alpha":1,
"scale-y":{
"zooming":false,
"decimals":2,
"thousands-separator":",",
"negation":"currency",
"format":"$%v",
"text":""
},
"plotarea":{
"margin":"100px"
},
"plot":{
"spline":true,
"negation":"currency",
"format":"$%v"
},
"scale-x":{
"zooming":false,
"transform":{
"guide":{
"visible":false
},
"item":{
"visible":false
},
"all":"%M %d, %Y",
"type":"date"
},
"decimals":0,
"format":"%v",
"mirrored":0,
"text":"Shows",
"values":[1398729600000,1398816000000,1398902400000,1399248000000,1399334400000,1399420800000,1399593600000,1399680000000,1400025600000,1400112000000,1400716800000,1400976000000,1401062400000,1401235200000,1401321600000,1401494400000,1401580800000,1401667200000,1401753600000,1401840000000,1401926400000,1402012800000,1402099200000,1402185600000,1402272000000,1402358400000,1402444800000,1402531200000,1402617600000]
},
"type":"area"
}
zingchart.render({
id: "myChart",
height: 300,
width: 500,
data: chartJSON
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
I'm on the ZingChart team so please feel free to reach out if you have any questions about this answer or other ZingChart features.

Resources