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

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>

Related

On Highcharts Gantt, how to display all data labels when start and end from 2 tasks overlap?

I have 2 tasks in the same row. The labels are as below:
first task start
first task end
second task start
second task end
Label 3 is missing as it is below 2.
I'd like to have both showing, and preferably both dots separated in the same day so we can see clearly we have two tasks. One ending, another starting
Please find a working sandbox for this example: https://jsfiddle.net/Fmcg/9071Ltz6/12/
And the options:
Highcharts.ganttChart('container', {
title: {
text: 'Gantt Chart with Progress Indicators'
},
yAxis: {
categories: ['Magdala']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
verticalAlign: "top",
format: "{point.custom.label}"
}
}
},
series: [{
type: 'line',
zoneAxis: 'x',
zones: [{
value: Date.UTC(2014, 10, 20)
}, {
dashStyle: 'dot',
value: Date.UTC(2014, 10, 25)
}],
data: [{
y: 0,
x: Date.UTC(2014, 10, 18),
custom: {
label: 1
}
}, {
y: 0,
x: Date.UTC(2014, 10, 25),
custom: {
label: 2
}
}]
}, {
name: 'Project 1',
type: 'line',
zoneAxis: 'x',
zones: [{
value: Date.UTC(2014, 10, 28)
}, {
dashStyle: 'dot',
value: Date.UTC(2014, 10, 29)
}],
data: [{
x: Date.UTC(2014, 10, 25),
y: 0,
custom: {
label: 3
}
}, {
x: Date.UTC(2014, 10, 29),
y: 0,
custom: {
label: 4
}
}]
}]
});
I found out that I can actually add hours, minutes, seconds to Date.UTC. Therefore if task 1 ends at 1pm and task 2 starts at 4pm, it would work.
eg Date.UTC(2014, 10, 25, 13)

ChartJS Bar chart with time scale - Bars overlap with each other

I'm trying to create a ChartJs Bar chart which contains date on labels.
The chart bars over lap with each other unevenly. Works well when the time scale is removed however, the labels are not date sorted. The labels and data are dynamically populated, so cannot sort it before rendering.
Below is the sample image,
And, if the scales (xAxis) is removed, it give proper output (but not sorted)
example: https://codepen.io/karthikkbala/pen/QWjVQqb
Sample data:
[ "2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10", ]
[ 20, 11, 9, 22, 11, 9, ]
You can omit labels in the chart configuration and instead generate data as individual points through objects containing x and y properties as shown here.
const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const baseData = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: baseData[i] }));
This produces the following data.
[
{ "x": "2020-05-13", "y": 20 },
{ "x": "2020-05-11", "y": 11 },
{ "x": "2020-05-12", "y": 9 },
{ "x": "2020-05-14", "y": 22 },
{ "x": "2020-05-09", "y": 11 },
{ "x": "2020-05-10", "y": 9 }
]
The xAxis would then have to be defined as follows:
xAxes: [{
offset: true,
type: 'time',
time: {
unit: 'day',
source: 'data',
tooltipFormat: 'MMM DD'
}
}],
Please have a look at your amended code below.
const labels = ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"];
const baseData = [20, 11, 9, 22, 11, 9];
const data = labels.map((l, i) => ({ x: l, y: baseData[i] }));
var chartData = {
datasets: [{
label: "All Detections",
backgroundColor: "#02a499",
borderColor: "#ffffff",
borderWidth: 1,
hoverBackgroundColor: "#02a499",
hoverBorderColor: "#02a499",
data: data
}]
};
new Chart("ChartByDate", {
type: 'bar',
data: chartData,
options: {
scales: {
xAxes: [{
offset: true,
type: 'time',
time: {
unit: 'day',
source: 'data',
tooltipFormat: 'MMM DD'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="ChartByDate"></canvas>

"javascript" bar graph that breaks down annual columns to monthly

I would like the make a bar or column graph using daily data, and by default user should get annual representation of the data, then if the user clicks on a column of a specific year, they get a monthly break down of that year.
Please help
Thanks
Also add the desire plugin to it
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Fortune 500 Companies by Country"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)",
title: "Number of Companies"
},
data: [{
type: "bar",
name: "companies",
axisYType: "secondary",
color: "#014D65",
dataPoints: [
{ y: 3, label: "January" },
{ y: 7, label: "Febrary" },
{ y: 5, label: "March" },
{ y: 9, label: "April" },
{ y: 7, label: "May" },
{ y: 7, label: "June" },
{ y: 9, label: "Jult" },
{ y: 8, label: "August" },
{ y: 11, label: "September" },
{ y: 15, label: "October" },
{ y: 12, label: "November" },
{ y: 15, label: "December" },
]
}]
});
chart.render();
}
</script>

Printing the letters in 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.

Highcharts: Stacked area drilldown to multiple series

I am trying to present a graph that shows the current progress with an ongoing project. So basically once you open the plot, it will show you a plot of Passed, Failed and not run test runs in a stacked area.
I want to drilldown on the main data (Passed, Failed, Not Run). I want to basically show the teams(s) that may have passed, failed, or not run. Let's say that you want to drill down on "Passed", once you click on "Passed", it should bring multiple series, each serie containing the team name and the amount of Passed tests.
JSfiddle: https://jsfiddle.net/9aqbLzar/3/
Demo:
Highcharts.Tick.prototype.drillable = function() {};
Highcharts.setOptions({
lang: {
drillUpText: '◁ Go back'
}
});
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
type: 'datetime',
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
allowDecimals: false,
title: {
text: "Test runs"
}
},
tooltip: {
shared: false
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: null,
lineWidth: 1,
marker: {
enabled: false,
lineWidth: 1,
lineColor: null,
symbol: 'circle',
radius: 3
}
},
cursor: 'pointer',
trackByArea: true
},
series: [{
name: 'Passed',
data: [{
x: Date.UTC(2017, 09, 06),
y: 20,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 07),
y: 21,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 08),
y: 22,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 09),
y: 23,
drilldown: 'Passed'
}]
},
{
name: 'Failed',
data: [{
x: Date.UTC(2017, 09, 06),
y: 6,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 07),
y: 5,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 08),
y: 4,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 09),
y: 3,
drilldown: 'Failed'
}]
},
{
name: 'Not run',
data: [{
x: Date.UTC(2017, 09, 06),
y: 8,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 07),
y: 7,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 08),
y: 6,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 09),
y: 5,
drilldown: 'Not run'
}]
}
],
drilldown: {
series: [{
id: 'Passed',
data: [{
x: Date.UTC(2017, 09, 11),
y: 1
}, {
x: Date.UTC(2017, 09, 12),
y: 2
}, {
x: Date.UTC(2017, 09, 13),
y: 3
}, {
x: Date.UTC(2017, 10, 14),
y: 5
}]
}, {
id: 'Failed',
data: [{
x: Date.UTC(2017, 09, 09),
y: 5
}, {
x: Date.UTC(2017, 09, 10),
y: 6
}, {
x: Date.UTC(2017, 09, 11),
y: 7
}, {
x: Date.UTC(2017, 10, 12),
y: 8
}, {
x: Date.UTC(2017, 10, 13),
y: 9
}]
}, {
id: 'Not run',
data: [{
x: Date.UTC(2017, 09, 09),
y: 5
}, {
x: Date.UTC(2017, 09, 10),
y: 6
}, {
x: Date.UTC(2017, 09, 11),
y: 7
}, {
x: Date.UTC(2017, 10, 12),
y: 8
}, {
x: Date.UTC(2017, 10, 13),
y: 9
}]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
First of all, you need to have multiple drilldown series for each series (e.g. three for the 'Passed', three for the 'Failed', three for the 'Not run'). Secondly, the only way to drilldown to more than one series is to add them on drilldown event with a function called addSingleSeriesAsDrilldown. When desired series are added all you need to do is to apply them with applyDrilldown function. Take a look at the example below and in case of any question, feel free to ask.
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
Example:
https://jsfiddle.net/7a6gh7vz/

Categories