I need the control which can draw a line based on points(Linear Data) and after rendering must not be converted into a image format(like Graph Control)

Question

1.00/5 (1 vote)

See more:

C#

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:

0........200......300..................700............900.......1000

Posted 3-Jan-16 17:54pm

mithun286

Updated 11-Jan-16 18:06pm

v4

Add a Solution

Comments

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?
—SA

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

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Pravin.Bhosale01 · Answer 1 · 2016-01-03T23:41:00

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

JavaScript

$(function () {
    $('#container').highcharts({
        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...

Pravin.Bhosale01 · Answer 2 · 2016-01-03T22:41:00

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[^]

I need the control which can draw a line based on points(Linear Data) and after rendering must not be converted into a image format(like Graph Control)

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0