Click here to Skip to main content
15,882,278 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I have values from Database example 200 100 400 200 100
This points will combine to give length 1000
I need a control to draw this points to form a straight line and on hover should display a vertical line showing coordinates 

The Output will be similar in following way:

Updated 11-Jan-16 18:06pm
Sergey Alexandrovich Kryukov 4-Jan-16 0:46am    
Sorry, this is not a question. What's your problem when you try to implement this behavior?
mithun286 4-Jan-16 1:31am    
I am using web chart control to plot line based on coordinate but it is rendering to a image.
I do not want control to be rendered to image format

One more option.

Highcharts | Highcharts Demo[^]

This is well implemented, tested and widely used solution.
You can plot a graph which will look like a horizontal line without any background. you can add your various points on that row. Look at the various options of graph.

Edit fiddle - JSFiddle[^]

change the javascript code to

$(function () {
        chart: {
            type: 'bar'
        title: {
            text: 'Stacked bar chart'
        xAxis: {
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
        legend: {
            reversed: false
        plotOptions: {
            series: {
                stacking: 'normal'
        series: [{
            data: [5]
        }, {
            data: [2]
        }, {
            data: [3]

Check if you can change UI of this graph to accomplish your requirement of you can use line graphs etc...
Share this answer
mithun286 4-Jan-16 8:34am    
Thank you :)
Will try this and come back with doubts
I had similar view in my project.
I have used two div controles overlapped. One with gray color at background with widh:100%.
another div with any solid color overlapping gray div. with of this view can be set dynimically by calculating percentage of value(in your case-'Points') or you can set width:10% or 20% as per your points.
Suggesting solution using div, because you mentioned that you want to display line. these divs can be displayed as per you convenience using various css options.

One more better option is : use progress tag.

<progress value="70" max="100"></progress>

This will look like

Another good option is using meter tag. (But only is you are not using internet explorer and safari as meter tag is not supported by them)

<meter value="yourPointsHere" min="0" max="100"></meter>

This will look like:

Tryit Editor v2.6[^]
Share this answer
mithun286 4-Jan-16 4:51am    
I can use Progress tag since i have min and max values.
what about the between values, only single value can be plotted between maximum and minimum,and on hover over control i need to display distance between points.
how to achieve that???

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900