Load text content values on canvas.js bubble chart - javascript

I'm trying to make a bubble chart that uses string data for me to illustrate. What I do is the following:
var chart = new CanvasJS.Chart("chartContainer",
{
zoomEnabled: true,
title:{
text: "Day at a Glance"
},
axisX: {
title:"Airline",
},
axisY: {
title:"Terminal"
},
legend:{
verticalAlign: "bottom",
horizontalAlign: "left"
},
data: [
{
type: "bubble",
xValueType: "dateTime",
dataPoints: [
// { x: 64.8, y: 2.66, z:12074.4 , name: "India"},
{ x: "H", y: "American Airlines", z:"3", name: "American Airlines"}
]
}
]
});
But it seems that canvas.js does not allow string to be used on the x and y datapoint. I've already tried using name but it does not work. What could I do so that My bubble chart will show string values on the x and y axis?

On axisX you can show text by using label instead of x. Y axis requires a number though - without which chart won't know where to render the bubble. In case you have other text to be displayed, consider showing them inside toolTip or indexLabel.

Related

Highcharts yAxis Categories with string values: error 14

Right off the bat here is the desired chart in ChartJS.
We have two x-axes. One showing power from a meter and the other showing meter state over time (open, closed, or in standby) In both datasets the X axis is Unix time. The power Y axis is numerical and the state x axis is one of the three state categories. Both are drawn in lines.
To get right to the point: how do I do this in Highcharts? I have the second axis set up:
xAxis: {
type: 'datetime'
},
yAxis: [
{
title: {
text: 'Real Power'
}
},
{
type: 'category', //I have also removed this line
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open']
}
],
Any attempt to set the Y axis value to a string in highcharts results in a well known: https://www.highcharts.com/errors/14/
Furthermore online I only seem to find categories on the X axis. Any help getting to the right place is appreciated. Thanks in advance.
You can't use a string as x value, use a number instead, for example:
series: [{
...
}, {
...,
yAxis: 1,
data: [1, 0, 2, 1]
}],
yAxis: [{
...
}, {
title: {
text: 'state'
},
categories: ['closed', 'standby', 'open'],
min: 0,
max: 2
}]
Live demo: http://jsfiddle.net/BlackLabel/o7Lvyadm/
API Reference: https://api.highcharts.com/highcharts/yAxis

Chart.js one label per stacked bar

I'm using chart.js with datalabels plugin but I'm having issues with displaying one label per stacked bar.
I have tried to access to the dataset meta to distinguish to show the labels but struggling to achieve. Help me to do that.
Please see my example here: https://jsfiddle.net/fraserr/9ezggxx5/314/
var datasets = JSON.parse('[{"username":"test name","stack":"2","label":"test name - actual","dataset":{"2018-12-17":"3","2018-12-24":"1"},"data":["3","1"],"borderColor":"#db005f","backgroundColor":"#f190b0","borderWidth":1},{"username":"test name","stack":"2","label":"test name - target","dataset":{"2018-12-17":"10","2018-12-24":"10"},"data":["10","10"],"borderColor":"#511158","backgroundColor":"#aa89ab","borderWidth":1},{"username":"Santa Claus","stack":"1","label":"Santa Claus - actual","dataset":{"2018-12-17":"2","2018-12-24":0},"data":["2",0],"borderColor":"#db005f","backgroundColor":"#f190b0","borderWidth":1},{"username":"Santa Claus","stack":"1","label":"Santa Claus - target","dataset":{"2018-12-17":"2","2018-12-24":"2"},"data":["2","2"],"borderColor":"#511158","backgroundColor":"#aa89ab","borderWidth":1}]');
new Chart('chart', {
type: 'bar',
data: {
labels: ['2018-12-17', '2018-12-24'],
datasets: datasets
},
options: {
scales: {
xAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
suggestedMax: 50
}
}],
yAxes: [{
stacked: true
}]
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
return ctx.dataset.username;
},
align: 'end',
anchor: 'end',
}
}
}
});
My desired result is to have "test name" on at the top of the 1st bar, "Santa Claus" on the 2nd, "test name" on 3rd and "Santa Claus" on 4th. Ideally I would always show one label per bar (even when one is bar per stack is hidden).
Thanks in advance!

how to set tooltip content of scatter chart in c3 chart?

I am trying to plot a c3 scatter chart. On mouse hover on tool tip, it shows data set name. Instead i want to display a custom text on that tool tip. My code snippet is below.current image
var chart = c3.generate({
bindto: '#scatter',
data: {
xs: {
positive: 'positive_x',
negative: 'negative_x',
neutral: 'neutral_x'
},
columns: [
$scope.positiveXvalue,
$scope.positiveYvalue,
$scope.negativeXvalue,
$scope.negativeYvalue,
$scope.neutralXvalue,
$scope.neutralYvalue
],
colors: {
positive: '#008000',
negative: '#FF0000',
neutral: '#A9A9A9'
},
type: 'scatter'
},
axis: {
x: {
label: 'Sentiment',
tick: {
fit: false
}
},
y: {
label: 'Followers'
}
});
How to add a custom label on mouse hover(as tool tip)?
You must be looking for tooltip.format.title.
For a scatter plot there is some difference.
Function specified at tooltip.format.title recieve coordinates of hovered data-point. For a traditional line/bar chart it is just integer index.
But for scatter plot it goes in 'x.y' format. So you may have a need to split it:
tooltip: {
format: {
title: function (coord) {
var xy = coord.toString().split('.');
return 'Data at [' + xy[0] + ',' + xy[1] + ']';
}
}
}
Further implementation depends on how your custom titles are stored.

Non-static values for chart using CanvasJS?

I'm trying to figure out how to make a dynamic bar chart using CanvasJs.
The basic set up for the chart is as follows:
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title:{
text: "Basic Column Chart - CanvasJS"
},
animationEnabled: false, // change to true
data: [
{
// Change type to "bar", "area", "spline", "pie",etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
My goal is to use a simple variable to update the dataPoints instead of static numbers such as 10,15, 25.
User's will input numbers and the chart should update based on their input.
Is this possible to do? Setting "Y" to a variable breaks the chart thus far. I'm unsure how to make this work.
I've also tried setting var input = $('input').html
and setting y as input but it does not work.
Thanks!
If anyone else is trying to figure this out here is how this is handled:
Use variable to assign data points in creating CanvasJS graph?.
This also works with Charts.JS.

Format X axis interval in the Chart - Kendo UI

I have the following code which display the line on the chart. I could not able to find how to format the x axis. I would like to show every thousand interval similar to y axis (0,1000,2000,3000,4000, etc). I am using Kendo UI.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Units sold"
},
dataSource: {
data: stats
},
categoryAxis: {
labels: {
step: 1000,
format: "n0"
},
},
series: [{
type: "area",
line: {
style: "smooth"
},
field: "x",
categoryField: "y"
}],
});
}
Here is my fiddle:
http://jsfiddle.net/nDS3S/37/
If I get right, your code doesn't works because the step doesn't really mean that would be shown a label for each 1000, but in fact it will show a label for each serie. So your chart doesn't have 1000 series, that is why only 0 was displayed.
If you change your step to 5, you will see the labels, but displaying the exactly number for that specific serie.
Check this out.
I'm afraid you can't achieve what you want.

Categories