[mhdajmalik]

Hi,
Is there any update on this issue(in latest version), I am facing the same issue

[mhdajmalik]

Thanks for reply

[mhdajmalik]

Hi,

We are facing the same issue, we are using destroy method also, but still increasing memory

Application details
——————-
we have a dashboard page, it will show dashboard for each level, while switch between levels memory is increasing continuously.

in our application while switching between level we first destroy every existing charts using destroy method, then create new dashboard with charts, but still increasing memory

[mhdajmalik]

set interval:1

[mhdajmalik]

Hi,

I have implemented the graph based on your reply. but still, there are some problems (please check my code)

1. Zoom in and Zoom out is not working
2. Line Marker:- I don’t want the whole line, I need a line like what we marked in image 1 (see image-1, marked as option 1)
3. Can I handle zoom in and zoom out by an event (see image-1, marked as option 2)

Image 1 Url: https://imgur.com/JmtAjHB

This is My working code
————————-

var chart = new CanvasJS.Chart(“chartContainer”, {
title: {
text: “Machine Operating Time”
},

zoomEnabled: true,
zoomType: “y”,

axisY: {
minimum: (new Date(2016, 0, 25, 17, 30)).getTime(),
maximum: (new Date(2016, 0, 27, 17, 30)).getTime(),
interval: (12 * 60 * 60 * 1000),
labelFormatter: function(e){
return CanvasJS.formatDate(e.value, “DD-MMM h:mm TT”);
},

stripLines:[
{
value: new Date(2016, 0, 26, 18, 30).getTime(),
color:”red”,
label:”40258″
}
]
},

toolTip:{
contentFormatter: function ( e ) {
return “Machine ” + e.entries[0].dataPoint.label + “</br> Start Time: ” + CanvasJS.formatDate(e.entries[0].dataPoint.y, “DD-MMM h:mm TT”) + “</br> Stop Time: ” + CanvasJS.formatDate(e.entries[0].dataPoint.y, “DD-MMM h:mm TT”);
}},

data: [

{
type: “stackedBar”,
dataPoints: [
{ label:”A” , y: (new Date(2016, 0, 26, 18, 30).getTime()),indexLabel:”Machine Running”,color:”green”,indexLabelFontColor:”white” }

]
},
{
type: “stackedBar”,
dataPoints: [
{ label:”A”, y: new Date(2016, 0, 27, 5, 30).getTime() – new Date(2016, 0, 26, 18, 30).getTime(),indexLabel:”Machine Down”,color:”red”,indexLabelFontColor:”white”}

]
},{
type: “stackedBar”,
dataPoints: [
{ label:”A”, y: new Date(2016, 0, 27, 15, 30).getTime() – new Date(2016, 0, 27, 5, 30).getTime(),indexLabel:”Machine Running”,color:”green”,indexLabelFontColor:”white”}

]
},
]
});
chart.render();

[mhdajmalik]

Please refer below images with my question

Image 1: https://imgur.com/JmtAjHB [ this is what I want to create ]

Image 2: https://imgur.com/a/V5poAB2 [ i am trying to create the image-1 via canvas js ]

Note: Zooming is not working in this chart

please do a response ASAP

Major requirements
——————
1. Need Line Marker. like showing in image-1 [marked as 1]
2. Need Zooming option in the y-axis, I applied ZoomingEnabled but it is not working
3.Y-axis is the DateTime value

• This reply was modified 5 years, 9 months ago by mhdajmalik.
• This reply was modified 5 years, 9 months ago by mhdajmalik.
• This reply was modified 5 years, 9 months ago by mhdajmalik.

[mhdajmalik]

How can I upload supporting image here ?

• This reply was modified 5 years, 9 months ago by mhdajmalik.

[mhdajmalik]

Can I apply labelFontColor from datapoint instead of axisX

[mhdajmalik]

Is there any alternatives? can I access the X-axis datapoint position from outside chart?

[mhdajmalik]

@Vishwas R Thanks for the reply, but we need date time in X-axis, we can’t change it as the label, bcz date time values getting from the server.

We are working on Licenced Version CanvasJs

please look the following code, I have removed all unwanted lines, please play with that code

Also the same thing will work if we apply new Date(2011,01,01) format, then why it is not working in following format x: new Date(“2018-04-09”)

var chart = new CanvasJS.Chart(“chartContainer”,
{
dataPointMaxWidth: 15,
axisX: {
interval: 1,
intervalType: “day”,
valueFormatString: “M/D”,
},

axisY: {
title: “count”,
gridColor: “#CCC”
},

data: [
{
showInLegend: true,
type: “column”,
legendText: “Units”,
dataPoints: [
{
x: new Date(“2018-04-09”),
y: 32
},
{
x: new Date(“2018-04-10”),
y: 1
}],
}],

});

—————————————————————————————————-

if you change dataPoint with following format, it will work fine

dataPoints: [
{
x: new Date(2018,04,09),
y: 32
},
{
x: new Date(2018,04,10),
y: 1
}],

• This reply was modified 6 years ago by mhdajmalik.
• This reply was modified 6 years ago by mhdajmalik.

[mhdajmalik]

I found some things if I put datapoint x value like this { x: new Date(2012, 01, 1), y: 26}, it is working fine

but if we do this in following way it will create problem {x:new Date(“2018-04-09T01:30:00.000Z”),y:32},

Any help

[mhdajmalik]

please note this is properties what i used to plot graph

var properties = {
legend:{“fontSize”:13,
“verticalAlign”:”top”,
“horizontalAlign”:”right”},
dataPointMaxWidth:15,

axisX:{
interval:1,
intervalType:”day”,
valueFormatString:”M/D”,
},

axisY:{
titleFontSize:15,
gridThickness:1,
labelFontSize:12,
tickThickness:0,
tickLength:5,
stripLines:[],
title:”count”,
maximum:100,
minimum:0,
gridColor:”#CCC”,
titleFontFamily:”MonteserratRegular”,
labelFontFamily:”MonteserratRegular”,
labelFontColor:”#282c37″},

title:{
text:”UNIT COUNT”,
fontSize:17,
fontFamily:”MonteserratSemiBold”,
fontWeight:”normal”,
margin:-5,
padding:10,
fontColor:”#282c37″,
horizontalAlign:”left”},
animationEnabled:false,

data:[
{
showInLegend:true,
dataSourceId:”MachineMetrics.InputUnitCount”,
type:”column”,
color:”#3AC9D6″,
legendText:”Units”,
dataPoints:[
{x:new Date(“2018-04-09T01:30:00.000Z”),y:32},
{x:new Date(“2018-04-10T01:30:00.000Z”),y:1},
{x:new Date(“2018-04-11T01:30:00.000Z”),y:32},
{x:new Date(“2018-04-12T01:30:00.000Z”),y:3}],
}],

backgroundColor:”#FFFFFF”
};

[mhdajmalik]

Hi

I have updated my code, please help me

[mhdajmalik]

please check the following chart properties
———————————————————–
var properties = {
legend:{“fontSize”:13,
“verticalAlign”:”top”,
“horizontalAlign”:”right”},
dataPointMaxWidth:15,

axisX:{
gridThickness:0,
labelFontSize:12,
tickThickness:0,
tickLength:18,
/* interval:1, */
labelAngle:0,
intervalType:”day”,
stripLines:[],
valueFormatString:”M/D”,
titleFontFamily:”MonteserratRegular”,
labelFontFamily:”MonteserratRegular”,
labelFontColor:”#282c37″},

axisY:{
titleFontSize:15,
gridThickness:1,
labelFontSize:12,
tickThickness:0,
tickLength:5,
stripLines:[],
title:”count”,
maximum:100,
minimum:0,
gridColor:”#CCC”,
titleFontFamily:”MonteserratRegular”,
labelFontFamily:”MonteserratRegular”,
labelFontColor:”#282c37″},

title:{
text:”UNIT COUNT”,
fontSize:17,
fontFamily:”MonteserratSemiBold”,
fontWeight:”normal”,
margin:-5,
padding:10,
fontColor:”#282c37″,
horizontalAlign:”left”},
animationEnabled:false,

data:[
{
showInLegend:true,
dataSourceId:”MachineMetrics.InputUnitCount”,
type:”column”,
color:”#3AC9D6″,
legendText:”Units”,
dataPoints:[
{x:new Date(“2018-04-09T01:30:00.000Z”),formatedTime:”4/9/2018 07:00 AM”,currentLevel:”End”,y:32,id:”5aa3768a24e5167d64390c55″,useExtras:false,Units:32,unit:”count”},
{x:new Date(“2018-04-10T01:30:00.000Z”),formatedTime:”4/10/2018 07:00 AM”,currentLevel:”End”,y:1,id:”5aa3768a24e5167d64390c55″,useExtras:false,Units:1,unit:”count”},
{x:new Date(“2018-04-12T01:30:00.000Z”),formatedTime:”4/12/2018 07:00 AM”,currentLevel:”End”,y:3,id:”5aa3768a24e5167d64390c55″,useExtras:false,Units:3,unit:”count”}],
toolTipContent:”Units: {Units} {unit}<br>Time: {formatedTime}<br>”,”cursor”:”pointer”}],

backgroundColor:”#FFFFFF”
};

var chart = new CanvasJS.Chart(“chartContainer”,
properties);

chart.render();

[mhdajmalik]

I am facing the same issue, could anyone help me