Forum Replies Created

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • in reply to: Overlapping of strip line label #23529

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

    in reply to: StripLine Tooltip and LabelPlacement #23011

    Thanks for reply

    in reply to: Memory Leak #22560

    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

    in reply to: Axis x Duplicate days. #22433

    set interval:1

    in reply to: Stackedbar chart with more feature #21832

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

    in reply to: Stackedbar chart with more feature #21817

    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 1 year, 5 months ago by mhdajmalik.
    • This reply was modified 1 year, 5 months ago by mhdajmalik.
    • This reply was modified 1 year, 5 months ago by mhdajmalik.
    in reply to: Stackedbar chart with more feature #21800

    How can I upload supporting image here ?

    • This reply was modified 1 year, 5 months ago by mhdajmalik.
    in reply to: Can we create XAxis in different color? #20769

    Can I apply labelFontColor from datapoint instead of axisX

    in reply to: Can we create XAxis in different color? #20768

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

    @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 1 year, 8 months ago by mhdajmalik.
    • This reply was modified 1 year, 8 months ago by 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

    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”
    };

    Hi

    I have updated my code, please help me

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

    I am facing the same issue, could anyone help me

Viewing 15 posts - 1 through 15 (of 15 total)