Chart

[Shalini]

$("#blood_graph").ejChart(

                    {

                        palette: ["blue", "brown",],

                        primaryXAxis:

                        {

                            range: { min: fromDate, max: changeDate(toDate, 1), interval: interval, },

                            intervalType: intervaltype,

                            labelFormat: label,

                            valueType: 'datetime'

                        },

                        primaryYAxis:

                        {

                            labelFormat: '{value}',

                            range: {min:40,max:180,interval:20},

                            stripLine: [

                                {

                                    text: 'BPDia',

                                    visible: true,

                                    start: _bloodPressureList.length > 0 ? _bloodPressureList[0].bpdiamin:0,

                                    end: _bloodPressureList.length > 0 ? _bloodPressureList[0].bpdiamax:0,

                                    color: '#00FF00',

                                    borderWidth: 0,

                                    opacity: 0.3,

                                    borderColor: 'white',

                                    zIndex: 'behind'

                                },

                                {

                                    text: 'BPSys',

                                    visible: true,

                                    start: _bloodPressureList.length > 0 ? _bloodPressureList[0].bpsysmin:0,

                                    end: _bloodPressureList.length > 0 ? _bloodPressureList[0].bpsysmax:0,

                                    color: '#00FF00',

                                    borderWidth: 0,

                                    opacity: 0.3,

                                    borderColor: 'white',

                                    zIndex: 'behind'

                                },

                            ]

                        },

                        commonSeriesOptions:

                        {

                            tooltip:

                            {

                                visible: true

                            }

                        },

                        series:

                        [

                            {

                                points: BPSysgraphDetails,

                                type: 'line',

                                enableAnimation: true,

                                marker:

                                {

                                    shape: 'circle',

                                    size:

                                    {

                                        height: 10, width: 10

                                    },

                                    visible: true

                                },

                                border: { width: 3 },

                                tooltip: { format: " Date : ej.format(#point.x#,d-MMM hh:mmtt)  <br/> Sys : #point.y# " },

                                name: 'Systolic'

                            },

                            {

                                points: BPDiagraphDetails,

                                type: 'line',

                                enableAnimation: true,

                                marker:

                                {

                                    shape: 'circle',

                                    size:

                                    {

                                        height: 10, width: 10

                                    },

                                    visible: true

                                },

                                border: { width: 3 },

                                tooltip: { format: " Date : ej.format(#point.x#,d-MMM hh:mmtt)  <br/> Dia : #point.y# " },

                                name: 'DiaSystolic'

                            },

                        ],

                        canResize: true,

                        load: "loadTheme",

                        size: { height: "220" },

                        legend: { visible: false }

                    });

i have created a chart using this code.the chart is created.there are two different lines having the marker of different color.I want to label which color marker represent which field.Field name are Systolic and Dialsystolic.

for this i have tried the name field in series options but it is not working.

So please help me to find the solution for this.

[Dharanidharan Dharmasivam]

Hi Shalini, 

Thanks for using our Syncfusion components. 

   We have analyzed your query. Your requirement can be achieved by specifying the legend.visible property to true. Basically legend will display information about the series used in the chart, in the below screenshot you can see the name of series with marker in legend. For more information on legend customization, kindly find the help document. 

   Also we can use the annotation feature to achieve your requirement. We have prepared  a sample with respect to this, in which we have used series name in annotation to differentiate them. For more information on annotation find the help document. Find the code snippet to achieve this requirement. 

JS: 

<div id="Annotation1" style="color:blue;display: none; font-size:16px;">Systolic</div> 

<div id="Annotation2" style="color:brown;display: none; font-size:16px;">DiaSystolic</div> 

 

 

$("#blood_graph").ejChart({ 

       //... 

       annotations: [ 

                             { visible: true, content: "Annotation1", coordinateUnit: "points", x: new Date(2001, 01, 07), y: 65 }, 

                             { visible: true, content: "Annotation2", coordinateUnit: "points", x: new Date(2009, 09, 07), y: 65 }], 

       legend: { visible: true } 

}); 

    

You can change this with respect to your requirement. 

Screenshot: 

 

Sample for reference can be find from below link. 

http://jsplayground.syncfusion.com/zffcracm  

kindly revert us, if you have any concerns.  

Thanks, 

Dharani. 

[Shalini]

Thank You Dharanidharan Dharmasivam.

The solution provided by you worked.

[Dharanidharan Dharmasivam]

Hi Shalini, 

 

Thanks for the update. 

 

Kindly revert us, if you have need any further assistance. 

Thanks, 

Dharani.