Related
I'm working with a CanvasJS spline graph. Working on the x-axis data, I want to have the x-axis label below the graph showing preset numbers while the datapoints mouseover function should show a date. In the picture below, when I hover on a data point I would like it to show a date for the x-axis label. So it should look something like (2022-09-20: 344) instead of (4: 344).
Index label shows data above every data point, I don't want that. The mouseover function canvajs has might do the trick, but their example uses alert().
dataPoints: [
{ x: 10, y: 71, mouseover: function(e){
alert( e.dataSeries.type + ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" ); },
},
]
I'd like to have their original mouseover function just with different data if possible.
Currently my data points are set from a loop and look like this:
data = [
{
type: "spline",
name: Object.keys(tix_data)[0],
color: color_arr[i] // (array of colors),
showInLegend: true,
axisYIndex: axisYIndex // (this is a variable set elsewhere),
dataPoints: {"y" => someDollarAmount, "label" => i, "name" => someDate}, // etc...
}
]
Where "name" is where I want my date value to go, it just doesn't work as I want it to.
My chart function is currently set up like this:
const chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Market price from days to event"
},
axisY: [{
title: "Market Price",
lineColor: "#C24642",
tickColor: "#C24642",
labelFontColor: "#C24642",
titleFontColor: "#C24642",
prefix: "$"
}],
axisX: [{
title: "Days to event",
reversed: true
}],
data: data
});
I was able to figure somewhat of a solution, the details are in my comment below, but here is an image of the outcome:
You can show custom content in tooltip by setting tooltipContent & regular numbers in the axis labels. Below is an example.
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Market price from days to event"
},
axisY: [{
title: "Market Price",
lineColor: "#C24642",
tickColor: "#C24642",
labelFontColor: "#C24642",
titleFontColor: "#C24642",
prefix: "$"
}],
axisX: [{
title: "Days to event",
reversed: true
}],
data: [{
type: "spline",
toolTipContent: "<span style='\"'color: {color};'\";'>{toolTipX}</span>: {y}",
dataPoints: [
{ toolTipX: "Jan 1, 2023", x: 1, y: 650 },
{ toolTipX: "Jan 2, 2023", x: 2, y: 700 },
{ toolTipX: "Jan 3, 2023", x: 3, y: 710 },
{ toolTipX: "Jan 4, 2023", x: 4, y: 658 },
{ toolTipX: "Jan 5, 2023", x: 5, y: 734 },
{ toolTipX: "Jan 6, 2023", x: 6, y: 963 },
{ toolTipX: "Jan 7, 2023", x: 7, y: 847 },
{ toolTipX: "Jan 8, 2023", x: 8, y: 853 },
{ toolTipX: "Jan 9, 2023", x: 9, y: 869 },
{ toolTipX: "Jan 10, 2023", x: 10, y: 943 },
{ toolTipX: "Jan 11, 2023", x: 11, y: 970 },
{ toolTipX: "Jan 12, 2023", x: 12, y: 869 },
{ toolTipX: "Jan 13, 2023", x: 13, y: 890 },
{ toolTipX: "Jan 14, 2023", x: 14, y: 930 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 320px; width: 100%;"></div>
I can't get the "markers" to show when I try the demo code for ApexCharts Column with Markers. Can't figure out why. Assuming it might be on their end. Need to add some more text here, but they provide demos for Angular, React, and Vue too, those seem to work (haven't tried the Vue one). I also checked the documentation, but could not find anything on it.
var options = {
series: [
{
name: "Actual",
data: [
{
x: "2011",
y: 1292,
goals: [
{
name: "Expected",
value: 1400,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2012",
y: 4432,
goals: [
{
name: "Expected",
value: 5400,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2013",
y: 5423,
goals: [
{
name: "Expected",
value: 5200,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2014",
y: 6653,
goals: [
{
name: "Expected",
value: 6500,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2015",
y: 8133,
goals: [
{
name: "Expected",
value: 6600,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2016",
y: 7132,
goals: [
{
name: "Expected",
value: 7500,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2017",
y: 7332,
goals: [
{
name: "Expected",
value: 8700,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
{
x: "2018",
y: 6553,
goals: [
{
name: "Expected",
value: 7300,
strokeWidth: 5,
strokeColor: "#775DD0",
},
],
},
],
},
],
chart: {
height: 350,
type: "bar",
},
plotOptions: {
bar: {
columnWidth: "60%",
},
},
colors: ["#00E396"],
dataLabels: {
enabled: false,
},
legend: {
show: true,
showForSingleSeries: true,
customLegendItems: ["Actual", "Expected"],
markers: {
fillColors: ["#00E396", "#775DD0"],
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I think I was using an old installation and redoing that fixed it.
https://apexcharts.com/docs/installation/
I want to add another bar to a category. for example I want to put another bar in Category 1 keeping my structure. but I'm adding data without an array. I do not want to use this structure for example.
series: [{
name: 'bar1',
data: [1000, 950, 920, 0, 850],
color: "#FF0000"
}, {
name: 'bar2',
data: [800, 770, 750, 0, 730],
color: "#000000"
}, {
name: 'bar3',
data: [600, 540, 535, 500, 30],
color: "#00FF00"
}]
I must use this:
series: [{
"data": [{
"name": "number1",
"y": 10,
"color": "#FF0000"
}, {
"name": "number2",
"y": 42,
"color": "#FFFF00"
}, {
"name": "number3",
"y": 60
}]
}]
I do it because I want to customize the name of each bar. but I do not know
how to put another bar in the same category as show in the picture
this is my file...
http://jsfiddle.net/v51dxpLn/
I want every bar is assigned a different name and can put it in the same category. so far as I have my exampe I can only have one bar by category. I need to put n bars in a bar every category but still retains its different name.
Solution is to use multiple series, like here: http://jsfiddle.net/awe4abwk/1/
$('#container').highcharts({
chart: {
type: 'bar',
},
xAxis: {
categories: ['Cat 1', 'Cat 2', 'Cat 3']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
y: 10,
x: 0,
name: 'Bar 1'
}, {
y: 10,
x: 1,
name: 'Bar 2'
}, {
y: 10,
x: 2,
name: 'Bar 3'
}]
}, {
data: [{
y: 20,
x: 0,
name: 'Bar X'
}, {
y: 20,
x: 1,
name: 'Bar Y'
}, {
y: 20,
x: 2,
name: 'Bar Z'
}]
}]
});
firstly here is my code
http://jsfiddle.net/woon123/5t2gpyx7/
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'venue_chart',
},
credits: {
enabled: false
},
title: {
text: 'Popularity of Venues'
},
subtitle: {
text: 'Redemption Count'
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Users'
}
},
xAxis: {
type: 'category'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30
},
series: [{
name: "Chicken Up # Jurong East",
data: [{
name: "Chicken Up # Jurong East",
y: 30,
drilldown: "Chicken Up # Jurong East"
}]
}, {
name: "Chicken Up # Tanjong Pagar",
data: [{
name: "Chicken Up # Tanjong Pagar",
y: 50,
drilldown: "Chicken Up # Tanjong Pagar"
}]
}, {
name: "Chicken Up # Tampines",
data: [{
name: "Chicken Up # Tampines",
y: 60,
drilldown: "Chicken Up # Tampines"
}]
}, ],
drilldown: {
series: [{
name: "Redemption Count",
id: "Chicken Up # Jurong East",
data: [
[
"Yangpa Bomb Introductory Promo", 5],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 4],
[
"Soju Cocktails at $17.00", 1],
[
"12345678", 10],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tanjong Pagar",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 10],
[
"12345678", 10],
[
"Early Bird 20% Off Bill", 3],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 17], ]
}, {
name: "Redemption Count",
id: "Chicken Up # Tampines",
data: [
[
"Yangpa Bomb Introductory Promo", 10],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 10],
[
"Soju Cocktails at $17.00", 15],
[
"12345678", 15],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
}, ]
}
});
});
My problem is that although the legend displays properly, when using type:category in the x-axis it only shows the last name which is Chicken Up # Tampines.
I would like for the x-axis to show all three venues instead of just the last one and the legend to remain as it is.
Another issue is after I drill down.
In this case, I would like the legend to display the x-axis in order to allow me to toggle them on/off.
I tried setting x-axis to display categories['venue1', 'venue2', 'venue3'] but in this case my legend just shows series 1.
I would like some advice on how to make both the legend and x-axis be the same.
Thank you!
i give you two fiddles,these can be a clue !
first: fiddle
$(function(){
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Staten Island Violation Distribution'
},
subtitle: {
text: 'Source: NYC Open DataSet</a>'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
data: {
csv: document.getElementById('csv').innerHTML
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
legend: {
enabled: true
},
tooltip: {
pointFormat: 'Count: <b>{point.y}</b>'
},
plotOptions: {
column: {
grouping: false,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
series: [ { name: "Description" },
{ name: "Description1" },
{ name: "Description2" },
{ name: "Description3" },
{ name: "Description4" },
{ name: "Description5" } ]
});
});
second:fiddle
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
});
happy coding !
I was trying to create a graph that represents the schedule of our Store using highcharts. With that, I use columnrange to a start and end time where the store is open.
But I'm stuck on how can I push those data using array and json.
Here's what I want to achieve. I made this mock-up with hard coded data;
JSFIDDLE: http://jsfiddle.net/rds_a/Lscqugbp/3/
code:
$(function () {
window.chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'columnrange',
inverted: false
},
title: {
text: "Store Schedule"
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Yesterday','Today']
},
yAxis: {
min: 0,
max: 24,
categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],
title: {
text: 'Time'
}
},
legend: {
enabled: true
},
plotOptions: {
columnrange: {
grouping: false
}
},
series: [{
name: 'Open',
stack: 'OnSite',
color: 'orange',
data: [{
x: 0,
low: 7,
high: 10
},{
x: 0,
low: 11,
high: 16
},{
x: 1,
low: 6,
high: 12
},{
x: 1,
low: 17,
high: 21
}]
},
{
name: 'Close',
stack: 'OnSite',
color: 'black',
data: [
{
x: 0,
low: 01,
high: 07
},{
x: 0,
low: 10,
high: 11
},
,{
x: 0,
low: 15,
high: 24
},
{
x: 1,
low: 1,
high: 7
},
{
x: 1,
low: 12,
high: 17
},
{
x: 1,
low: 21,
high: 24
}]
}]
});
});
While here's what I'am currently have;
JSFIDDLE: http://jsfiddle.net/rds_a/9P5fC/485/
code:
$(function () {
var jdata = {
"Open": {
"y": [4,8],
"name": "Open",
"n": [0]
},
"Closed": {
"y": [9,12],
"name": "Closed",
"n": [1]
}
};
var seriesArr = [];
$.each(jdata, function (key, data) {
var series = {
name: key,
data: []
};
$.each(data.y, function (index, value) {
series.data.push({
y: value
});
});
$.each(data.n, function (index, value) {
series.data[index].n = value;
});
seriesArr.push(series);
});
var options = {
chart: {
renderTo: 'container',
type: 'column',
inverted: false
},
title: {
text: 'Store Schedule'
},
xAxis: {
categories: ['Monday', 'Tuesday']
},
yAxis: {
min: 0,
max: 24,
categories: ['01','02','03', '04','05', '06','07', '08', '09','10', '11', '12', '13', '14', '15','16','17', '18', '19','20', '21','22','23', '24'],
title: {
text: 'Time'
}
},
legend: {
enabled: true
},
plotOptions: {
columnrange: {
stacking: 'percent'
}
},
series: seriesArr
};
var chart = new Highcharts.Chart(options);
});
Thanks in advance to those who can give their inputs.