Home forums Feature Requests & Feedback Stackedbar chart with more feature

This topic contains 5 replies, has 2 voices, and was last updated by  mhdajmalik 12 hours, 42 minutes ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #21799

    mhdajmalik
    Member

    Hi,

    I would like to create a graph (like stackedbar chart) with some more feature,

    NOTE: Y-Axis is based on DateTime value
    ex:- graph for show different state like pass, failed, idle

    from 1 am To 2 am pass
    from 2 am To 3 am failed,
    from 3 am To 4 am pass
    from 4 am To 5 am idle

    1. show indexLabel outside the bar with a line connection:- I tried this with stripline, but it showing line from bottom to top (see image 2)
    2.need Zooming part

    #21800

    mhdajmalik
    Member

    How can I upload supporting image here ?

    • This reply was modified 3 days, 8 hours ago by  mhdajmalik.
    #21810

    Vishwas R
    Keymaster

    @mhdajmalik,

    You can upload image in imgur.com and share the link with us to show your requirements.


    Vishwas R
    Team CanvasJS

    #21817

    mhdajmalik
    Member

    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 3 days, 5 hours ago by  mhdajmalik.
    • This reply was modified 3 days, 5 hours ago by  mhdajmalik.
    • This reply was modified 3 days, 4 hours ago by  mhdajmalik.
    #21827

    Vishwas R
    Keymaster

    @mhdajmalik,

    Need Line Marker. like showing in image-1 [marked as 1]

    You can use stripline attached to secondary axisY and set labelPlacement to outside.

    Need Zooming option in the y-axis, I applied ZoomingEnabled but it is not working

    You can use zoomType property to control the axis for which zooming and panning are enabled.

    Y-axis is the DateTime value

    Please take a look at this jsfiddle.

    Also can you kindly create jsfiddle with the issue, so that we can look into the code and the chart-options being used, understand it better and help you out?


    Vishwas R
    Team CanvasJS

    #21832

    mhdajmalik
    Member

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

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

You must be logged in to reply to this topic.