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>
how to use data and use for loop inside variable? I want to use for loop inside variable to give data to variable so the data will be given to multidimensional array inside it
I have code like this :
window.onload = function () {
var nape = ["per a", "per b"];
var dp = [{'x':3,'y':5}];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Server Performance"
},
axisX: {
title:"Server Load (in TPS)"
},
axisY:{
labelFormatter: function(e){
if(e.value==0){
a="Provinsi"
return a;
}else if(e.value==1){
a="Aceh"
return a;
}else if(e.value==2){
a="Maluku"
return a;
}else if(e.value==3){
a="NTT"
return a;
}else if(e.value==4){
a="NTB"
return a;
}else if(e.value==5){
a="Jakarta"
return a;
}else if(e.value==6){
a="Sumatera"
return a;
}else if(e.value==7){
a="Kalimantan"
return a;
}
},
title: "Response Time (in ms)",
interval: 1,
},
data: [{
"type": "scatter",
toolTipContent: "<span>{name}</span><br/> Load: {x} TPS<br/> Response Time:</span> {y} ms",
name: nape[0],
showInLegend: true,
dataPoints: [
{ x: 23, y: 1 },
{ x: 28, y: 2 },
{ x: 39, y: 3 },
{ x: 34, y: 4 },
{ x: 24, y: 5 },
{ x: 29, y: 6 },
{ x: 29, y: 1 },
{ x: 23, y: 2 },
{ x: 27, y: 3 },
{ x: 34, y: 4 },
{ x: 36, y: 5 },
{ x: 33, y: 6 },
{ x: 32, y: 1 },
{ x: 21, y: 2 }
]
},
{
type: "scatter",
name: nape[1],
showInLegend: true,
toolTipContent: "<span style=\"color:#C0504E \"><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
dataPoints: dp
}]
});
chart.render();
}
so what I want to do is get data from jquery then using for loop to post data to "data" inside var chart
...
$.ajax({
url: "the_url",
method: "GET",
success: function(data) {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Server Performance"
},
axisX: {
title:"Server Load (in TPS)"
},
axisY:{
labelFormatter: function(e){
if(e.value==0){
a="Provinsi"
return a;
}else if(e.value==1){
a="Aceh"
return a;
}else if(e.value==2){
a="Maluku"
return a;
}else if(e.value==3){
a="NTT"
return a;
}else if(e.value==4){
a="NTB"
return a;
}else if(e.value==5){
a="Jakarta"
return a;
}else if(e.value==6){
a="Sumatera"
return a;
}else if(e.value==7){
a="Kalimantan"
return a;
}
},
title: "Response Time (in ms)",
interval: 1,
},
data: for(var i=0; i < data.length ; i++){
"type": "scatter",
toolTipContent: "<span>{name}</span><br/> Load: {x} TPS<br/> Response Time:</span> {y} ms",
name: data[i].somedata,
showInLegend: false,
dataPoints: data[i].anothersomedata
}
...
so in "data :" there will be return value like this
...
[{
type: "scatter",
toolTipContent: "<span style=\"color:#4F81BC \"><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
name: "Server Pluto",
showInLegend: false,
dataPoints: [
{ x: 23, y: 1 },
{ x: 28, y: 2 },
{ x: 39, y: 3 },
{ x: 34, y: 4 },
{ x: 24, y: 5 },
{ x: 29, y: 6 },
{ x: 29, y: 1 },
{ x: 23, y: 2 },
{ x: 27, y: 3 },
{ x: 34, y: 4 },
{ x: 36, y: 5 },
{ x: 33, y: 6 },
{ x: 32, y: 1 },
{ x: 21, y: 2 }
]
},
{
type: "scatter",
name: "Server Mars",
showInLegend: false,
toolTipContent: "<span style=\"color:#C0504E \"><b>{name}</b></span><br/><b> Load:</b> {x} TPS<br/><b> Response Time:</b></span> {y} ms",
dataPoints: [
{ x: 200, y: 3 },
{ x: 27, y: 4 },
{ x: 35, y: 5 },
{ x: 32, y: 6 },
{ x: 29, y: 1 },
{ x: 22, y: 2 },
{ x: 27, y: 3 },
{ x: 26, y: 4 },
{ x: 24, y: 5 },
{ x: 33, y: 6 },
{ x: 34, y: 1 },
{ x: 30, y: 2 },
{ x: 37, y: 3 },
{ x: 24, y: 4 }
]
}]
...
looped, I have try several ways but seems alas, is there anyone can help me please?
One way is to write a function and pass the data you intend to insert to your object. Inside the function, add required fields and return the array.
var sampleData = [{
name: 'Jon'
}, {
name: 'Bob'
}]
var result = [{
data: processData(sampleData)
}];
function processData(data) {
let tmp = [];
data.forEach(e => {
tmp.push({
"type": "scatter",
toolTipContent: "<span>{name}</span><br/> Load: {x} TPS<br/> Response Time:</span> {y} ms",
name: e.name,
})
});
return tmp;
}
console.log(result);
Second way is to use an IIFE declaration as below
var sampleData = [{
name: 'Jon'
}, {
name: 'Bob'
}]
var result = [{
data: (function(data) {
let tmp = [];
data.forEach(e => {
tmp.push({
"type": "scatter",
toolTipContent: "<span>{name}</span><br/> Load: {x} TPS<br/> Response Time:</span> {y} ms",
name: e.name,
})
});
return tmp;
})(sampleData)
}];
console.log(result);
I have tried to show 2 series of data in Area chart | Highcharts. Its working fine but there is a whitespace between the series. How to remove the space?
Fiddle : http://jsfiddle.net/alagarrk/0jcg5047/1/
series: [{
name: 'Educated people',
data: [{
x: 0,
y: 20000
}, {
x: 1,
y: 19000
}, {
x: 2,
y: 19000
}, {
x: 3,
y: 18000
}, {
x: 4,
y: 17000
}, {
x: 5,
y: 16000
}, {
x: 6,
y: 15000
}, {
x: 7,
y: 14000
}]
}, {
name: 'Uneducated people',
data: [{
x: 8,
y: 13000
}, {
x: 9,
y: 12000
}, {
x: 10,
y: 11000
}, {
x: 11,
y: 10000
}]
}]
Please check and guide me to fix this issue
There is no "fixing" this issue, you don't have any data between point 7 and 8. What you can do is start series 2 (uneducated people) on point 7. That way it will look connected.
name: 'Uneducated people',
data: [{
x: 7,
y: 13000
}, {
x: 8,
y: 12000
...
Working example: http://jsfiddle.net/0jcg5047/2/
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'
}]
}]
});
I am facing problem to show chart multiple times in a page. following is my code. my application is dynamic. but if the following can show the chart twice or more, my problem will be solved.
This code is showing chart once.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Using all form of color inputs",
fontColor: "#6A5ACD"
},
axisY:{
interlacedColor: "rgb(255,250,250)",
gridColor: "#FFBFD5"
},
data: [
{
type: "column",
color: "darkgreen",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55},
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14}
]
}
]
});
chart.render();
}
</script>
<div id="chartContainer" style="height: 300px; width: 100%;"> <br> <br> <br> <br><br> <br><br> <br><br> <br><br> <br>
<script type="text/javascript">
window.onload = function () {
var chart1 = new CanvasJS.Chart("chartContainer1",
{
title:{
text: "Using all form of color inputs",
fontColor: "#6A5ACD"
},
axisY:{
interlacedColor: "rgb(255,250,250)",
gridColor: "#FFBFD5"
},
data: [
{
type: "column",
color: "darkgreen",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55},
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14}
]
}
]
});
chart1.render();
}
</script>
<div id="chartContainer1" style="height: 300px; width: 100%;">
</div>
<script type="text/javascript" src="canvasjs.js"></script>
</body>
</html>
You only have to add them together and make sure that your first created canvas is emptied whenever the second is created:
This is the JS you need:
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Using all form of color inputs",
fontColor: "#6A5ACD"
},
axisY: {
interlacedColor: "rgb(255,250,250)",
gridColor: "#FFBFD5"
},
data: [{
type: "column",
color: "darkgreen",
dataPoints: [
{
x: 10,
y: 71
}, {
x: 20,
y: 55
}, {
x: 30,
y: 50
}, {
x: 40,
y: 65
}, {
x: 50,
y: 95
}, {
x: 60,
y: 68
}, {
x: 70,
y: 28
}, {
x: 80,
y: 34
}, {
x: 90,
y: 14
}
]
}]
});
chart.render();
chart = {}; // empty your first chart
var chart1 = new CanvasJS.Chart("chartContainer1", {
title: {
text: "Using all form of color inputs",
fontColor: "#6A5ACD"
},
axisY: {
interlacedColor: "rgb(255,250,250)",
gridColor: "#FFBFD5"
},
data: [{
type: "column",
color: "darkgreen",
dataPoints: [
{
x: 10,
y: 71
}, {
x: 20,
y: 55
}, {
x: 30,
y: 50
}, {
x: 40,
y: 65
}, {
x: 50,
y: 95
}, {
x: 60,
y: 68
}, {
x: 70,
y: 28
}, {
x: 80,
y: 34
}, {
x: 90,
y: 14
}
]
}]
});
chart1.render();
chart1 = {};
Look at this JSFIDDLE
Thanks everyone. I have exact solution with Google Chart.
https://developers.google.com/chart/interactive/docs/quick_start
Regards,
Zahirul