We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How make a line chart without line connections? A dotted chart

Thread ID:

Created:

Updated:

Platform:

Replies:

119294 Jun 2,2015 07:37 PM UTC Jun 4,2015 05:03 AM UTC JavaScript 3
loading
Tags: ejChart
Daniel
Asked On June 2, 2015 07:37 PM UTC

Hi,

I want to make a line chart but hidding the line connections (a dotted chart) like this chart:

chart

Can I make this?

Thanks,

Regards.



Praveen [Syncfusion]
Replied On June 3, 2015 06:43 AM UTC

Hi Daniel,

Thanks for using Syncfusion product.

We have analyzed your reported query. We have achieved your requirement by using of line chart and scatter chart. If you want to use dotted line connections in line chart, you can use dashArray property in series.

The code snippet is given below,

Code Snippet:
[JS]

$(function ()

{

$("#container").ejChart(

{

series:

[

{

type: 'line',

dashArray: '4, 5',
},
{
type: 'scatter',
}
]

});

});
Kindly refer the KB in the below link for any assistance about dashArray.
http://www.syncfusion.com/kb/4995/how-to-display-the-dash-line-instead-of-solid-line-for-line-series-in-the-chart

We have prepared a sample based on your requirement and you can find the sample in below location:

Sample: http://www.syncfusion.com/downloads/support/forum/119294/Sample2145370806.zip
Please let us know if you have any concern.
Thanks,
Praveenkumar

Daniel
Replied On June 3, 2015 03:50 PM UTC

Thanks!!! I was searching the scatter chart.

This is the final code:

$("#container").ejChart(

{

primaryXAxis:

{

range: { min: 2005, max: 2011, interval: 1 },

title: { text: 'Year' }

},

primaryYAxis:

{

labelFormat: "{value}%",

title: { text: 'Efficiency' },

range: { min: 25, max: 50, interval: 5 }

},

commonSeriesOptions:

{

enableAnimation: false,

tooltip: { visible: true },

border: { width: 2 }

},

series:

[

{

points: [{ x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 },

{ x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }],

name: 'México',

fill: 'blue',

type: 'scatter',

marker:

{

shape: 'circle',

size:

{

height: 8, width: 8

},

visible: true

}

},

{

points: [{ x: 2005, y: 30 }, { x: 2006, y: 30 }, { x: 2007, y: 30 }, { x: 2008, y: 30 },

{ x: 2009, y: 30 }, { x: 2010, y: 30 }, { x: 2011, y: 30 }],

name: 'Average',

fill: 'blue',

type: 'line',

dashArray: '4, 5',

marker:

{

visible: false

}

}

],

canResize: true,

title: { text: 'Efficiency of oil-fired power production' },

size: { height: "600" },

legend: { visible: true }

});

Thanks again.

Regards.


Praveen [Syncfusion]
Replied On June 4, 2015 05:03 AM UTC

Hi Daniel,
Thanks for your update.
Kindly let us know if you face any difficulties.
Thanks,
Praveenkumar.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;