Printing the letters in Javascript - javascript

I'm new to Javascript part, i'm trying to print the letters over the Y axis based on X axis position. Basically this is for printing the market profile.
My output will be like below image.
To achieve this, i have data but i'm not getting how we can do it via Javascript. i tried googling and found this JS fiddle https://jsfiddle.net/901L4pvn/
here is the code.
var chart = new CanvasJS.Chart("chartContainer", {
axisY: {
gridThickness: 0
},
data: [
{
type: "scatter",
color: "transparent",
toolTipContent: null,
indexLabel: "{text}",
dataPoints: [
{ x: 10, y: 71, text: "Data 1" },
{ x: 20, y: 55, text: "Data 2" },
{ x: 30, y: 50, text: "Data 3" },
{ x: 40, y: 65, text: "Data 4" },
{ x: 50, y: 95, text: "Data 5" },
{ x: 60, y: 68, text: "Data 6" },
{ x: 70, y: 28, text: "Data 7" },
{ x: 80, y: 34, text: "Data 8" },
{ x: 90, y: 14, text: "Data 9" }
]
}
]
});
looking for some more options or any other sample script which is similar to my requirement is available?. Even if the script is in React.js or Angular.js is also ok.

Related

CanvasJS, show different values on x-axis label and datapoint label

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 that we get from jquery, then use it in var with for loop?

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);

How to combine 2 series in area chart - Highchart

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/

add a bar Highcharts series

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'
}]
}]
});

canviasjs is not showing chart multiple times

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

Categories