I am try to display a billboardjs bubble chart using javascript and html.
I included the lib in my index.html file as:
src="/lib/billboard.pkgd.js"
The codes are very simple but when ran, I got the "NaN" error.
this.d3Chart = bb.generate({
bindto: "#d3bubbleChart",
data: {
type: "bubble",
label: false,
xs: {
data1: "x1",
data2: "x2"
},
columns: [,
["x1", 10, 20, 50, 100, 50],
["x2", 30, 40, 90, 100, 170],
["data1", [20, 50], [30, 10], [50, 28], [60, 70], [100, 80]],
["data2", [350, 50, 30], [230, 90], [200, 100],[250, 150],[200, 200]]
]
},
bubble: {
maxR: 50
},
grid: { y: { show: true } },
axis: {
x: {
label: { text: "AOV", position: "outer-left"},
height: 50,
tick: { format: function(x) { return ("$"+x);}}
},
y: {
fit: false,
min: {fit: true, value: 0},
max: 450,
labels: "yes",
label: { text: "Conversion Rate", position: "outer-bottom"},
tick: { format: function(x) { return (x+"%");}}
}
}
});
Checkout the allowed data for bubble type from API doc:
For 'bubble' type, data can contain dimension value:
- an array of [y, z] data following the order
- or an object with 'y' and 'z' key value
'y' is for y axis coordination and 'z' is the bubble radius value
I'm seeing from your example, that the first data of data2 contains additional value. Removing that will work fine.
this.d3Chart = bb.generate({
data: {
...
columns: [,
// the length for each bubble should be 2
["data2", [350, 50, 30], ...]
]
Related
I'm trying to chart a time scatter plot using vue-chartjs but am having trouble getting the line tension to work. If I set the tension option for the data set to anything but 0 the line disappears.
The chart data and options (just some dummy data for now):
const chartOptions = {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: false
}
};
const chartData = ref({
datasets: [
{
data: [
{ x: 0, y: 5 },
{ x: 3, y: 4 },
{ x: 5, y: 7 },
{ x: 8, y: 13 },
{ x: 13, y: 6 },
{ x: 18, y: 2 },
{ x: 25, y: 11 },
],
backgroundColor: "#ED1369",
borderColor: "#ED1369",
showLine: true,
tension: 0,
pointRadius: 3.5,
pointHoverRadius: 3.5,
borderWidth: 2
}
]
});
Result with no tension (tension: 0):
Chart showing lines with no tension
Result with tension (tension > 0):
Chart breaking and no longer showing lines
I've tried using both "tension" and "lineTension" options, as well as the "cubicInterpolationMode" option. I have also tried various combinations of those options. I have tested and found that Chart.js does support curved lines on scatter plots.
Turns out you have to register the Filler component.
https://github.com/apertureless/vue-chartjs/issues/988
Im new to Chart.js and im trying make a line chart where it is possible to click somewhere in the line graph and retrieve the full data object.
This is what my chart looks like right now which is working fine but now I would like to use this my own data
const myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['9:00', '12:00', '15:00', '9:00', '12:00', '15:00', '9:00', '12:00', '15:00', '9:00', '12:00', '15:00',],
datasets: [{
label: 'Cardscans',
data: [
214,
200,
195,
214,
200,
320,
214,
200,
299,
214,
200,
210],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.2,
pointStyle: 'circle',
pointRadius: 5,
pointHoverRadius: 15
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}});
So now I want to fill the line chart with the total scans and the pie chart with 'successful' and 'failed'.
I would like to use for example this array of objects:
[
{
id: 1,
date: '01-10-2022',
Scans: {
total: 206151,
times: [
{
time: '12:00 - 13:00',
successful: 12283,
failed: 24,
0: 12184,
1: 55,
2: 22,
3: 12,
4: 8,
5: 2,
}
]
}
},
{
....
}]
What I want to achieve is to fill a pie chart with the 'successful' and 'Failed' data. But I want to do this based on the previous clicked data in the Line chart.
So my question is not about how to click something in the line chart but more about how i fill my line chart with the data above and pull the specific object to fill the other pie chart with.
Thanks in advance
I want to add two moving points represent the location of two trains according to the day. My day data is as shown in pic starting from 0 to 7. However, in the resulting animation, the slider does not slide into the integer day. It jumped from 1.75 to 2.25 or 2.75 to 3.25 automatically. Can anyone help me to solve that?
trainpath info
import plotly.graph_objects as go
import pandas as pd
dataset = pd.read_csv('trainpath.csv')
days = []
for k in range(len(dataset['day'])):
if dataset['day'][k] not in days:
days.append(dataset['day'][k])
t1 = [-1, 0, 1, 1, 1, 0, -1, -1, -1]
k1 = [-20, -20, -20, 0, 20, 20, 20, 0, -20]
# make list of trains
trains = []
for train in dataset["train"]:
if train not in trains:
trains.append(train)
# make figure
fig_dict = {
"data": [go.Scatter(x=t1, y=k1,
mode="lines",
line=dict(width=2, color="blue")),
go.Scatter(x=t1, y=k1,
mode="lines",
line=dict(width=2, color="blue"))],
"layout": {},
"frames": []
}
# fill in most of layout
fig_dict['layout']['title'] = {'text':'Train Animation'}
fig_dict["layout"]["xaxis"] = {"range": [-10, 10], "title": "xlocation", 'autorange':False, 'zeroline':False}
fig_dict["layout"]["yaxis"] = {"range": [-22, 22], "title": "ylocation", 'autorange':False, 'zeroline':False}
fig_dict["layout"]["hovermode"] = "closest"
fig_dict["layout"]["updatemenus"] = [
{
"buttons": [
{
"args": [None, {"frame": {"duration": 500, "redraw": False},
"fromcurrent": True, "transition": {"duration": 300,
"easing": "quadratic-in-out"}}],
"label": "Play",
"method": "animate"
},
{
"args": [[None], {"frame": {"duration": 0, "redraw": False},
"mode": "immediate",
"transition": {"duration": 0}}],
"label": "Pause",
"method": "animate"
}
],
"direction": "left",
"pad": {"r": 10, "t": 87},
"showactive": False,
"type": "buttons",
"x": 0.1,
"xanchor": "right",
"y": 0,
"yanchor": "top"
}
]
sliders_dict = {
"active": 0,
"yanchor": "top",
"xanchor": "left",
"currentvalue": {
"font": {"size": 20},
"prefix": "Day:",
"visible": True,
"xanchor": "right"
},
"transition": {"duration": 300, "easing": "cubic-in-out"},
"pad": {"b": 10, "t": 50},
"len": 0.9,
"x": 0.1,
"y": 0,
"steps": []
}
# make data
day = 0
for train in trains:
dataset_by_date = dataset[dataset['day']==day]
dataset_by_date_and_train = dataset_by_date[dataset_by_date['train']==train]
data_dict = {
'x': list(dataset_by_date_and_train['x']),
'y': list(dataset_by_date_and_train['y']),
'mode': 'markers',
'text': train,
'marker': {
'sizemode': 'area',
'sizeref': 20,
'size': 20,
# 'size': list(dataset_by_date_and_train['quantity']) # this section can be used to increase or decrease the marker size to reflect the material quantity
},
'name': train
}
fig_dict['data'].append(data_dict)
# make frames
for day in days:
frame={'data': [go.Scatter(x=t1, y=k1,
mode="lines",
line=dict(width=2, color="blue")),
go.Scatter(x=t1, y=k1,
mode="lines",
line=dict(width=2, color="blue"))], 'name':str(day)}
for train in trains:
dataset_by_date = dataset[dataset['day'] == day]
dataset_by_date_and_train = dataset_by_date[dataset_by_date['train'] == train]
data_dict = {
'x': list(dataset_by_date_and_train['x']),
'y': list(dataset_by_date_and_train['y']),
'mode': 'markers',
'text': train,
'marker': {
'sizemode': 'area',
'sizeref': 20,
'size': 20,
# 'size': list(dataset_by_date_and_train['quantity']) # this section can be used to increase or decrease the marker size to reflect the material quantity
},
'name': train
}
frame['data'].append(data_dict)
fig_dict['frames'].append(frame)
slider_step = {'args': [
[day],
{'frame': {'duration':300, 'redraw':False},
'mode': 'immediate',
'transition': {'duration':3000}}
],
'label': day,
'method': 'animate'}
sliders_dict["steps"].append(slider_step)
if day == 7:
print('H')
fig_dict["layout"]["sliders"] = [sliders_dict]
fig = go.Figure(fig_dict)
fig.show()
I have simple bar chart like this:
Here is my C3JS
var chart = c3.generate({
data: {
json:[{"A": 67, "B": 10, "site": "Google", "C": 12}, {"A": 10, "B": 20, "site": "Amazon", "C": 12}, {"A": 25, "B": 10, "site": "Stackoverflow", "C": 8}, {"A": 20, "B": 22, "site": "Yahoo", "C": 12}, {"A": 76, "B": 30, "site": "eBay", "C": 9}],
mimeType: 'json',
keys: {
x: 'site',
value: ['A','B','C']
},
type: 'bar',
selection: {
enabled: true
},
onselected: function(d,element)
{
alert('selected x: '+chart.selected()[0].x+' value: '+chart.selected()[0].value+' name: '+chart.selected()[0].name);
},
groups: [
['A','B','C']
]
},
axis: {
x: {
type: 'category'
}
}
});
After some chart elemnt is selected (clicked), alert shows X and Value and Name attributes of first selected element. For example "selected x: 0 value: 67 name: A" after I click on left-top chart element. How can I get value shown on X axis? In this case it is "Google".
Property categories is populated when the x-axis is declared to be of type category as it is in this case. So to get the data from the x-axis you needs to call the .categories() function.
onselected: function(d,element){alert(chart.categories()[d.index]);}
https://jsfiddle.net/4bos2qzx/1/
Is it possible to set y axis values in reverse order(0-100)?
Max value on top must start from zero to 100 at bottom.
Morris.Line({
element: 'line-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
I got it working by setting ymin to 100 and ymax to 0. It then plotted my line graph with values closest to 0 at the top, and closest too 100 at the bottom. Here's my code snippet.
config =
{
data: data,
xkey: 'y',
ymin: 100,
ymax: 0,
fillOpacity: 0.6,
....
}
You can see instructions here: https://morrisjs.github.io/morris.js/lines.html