Add A Single Date, Value point to a Tee.Line object

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
jzarech
Newbie
Newbie
Posts: 58
Joined: Mon Jul 07, 2008 12:00 am

Add A Single Date, Value point to a Tee.Line object

Post by jzarech » Wed May 11, 2016 10:46 pm

I looked at all the examples and they use AddRandom or pre-populate with Arrays or TextBoxes and such --

I pull a JSON array from a web service then need to iterate through the array and add the values to a Tee.Line object below.
The reason I don't just set the array as a datasource is it has many fields and I only want date and value.

I'm sure this is obvious and I overlooked it but any help would be appreciated --
Thanks.
ja

Code: Select all

	Chart1 = new Tee.Chart("canvas");

        var tlForecast = new Tee.Line();
        Chart1.addSeries(tlForecast);

        //This doesn't work
        //tlForecast.add(new Date('2/9/1967'), 888);

        //This works
        tlForecast.addRandom(20);
        Chart1.draw();

jzarech
Newbie
Newbie
Posts: 58
Joined: Mon Jul 07, 2008 12:00 am

Re: Add A Single Date, Value point to a Tee.Line object

Post by jzarech » Thu May 12, 2016 5:09 am

I looked in datetime.htm in the examples and saw something similar --

Let me know if there's a better way but this will work--

Code: Select all

 function CreateChart() {
        Chart1 = new Tee.Chart("canvas");

        Chart1.axes.left.title.text = "Value";
        Chart1.axes.bottom.title.text = "DateTime";

        var tlForecast = new Tee.Line();
        Chart1.addSeries(tlForecast);



        tlForecast.data.x = [];

        //Starting number of series values in my line control
        console.debug("Number of Data Values: " + tlForecast.data.values.length)
        var intDataCount = tlForecast.data.values.length;

        tlForecast.data.values[intDataCount] = 888;
        tlForecast.data.x[intDataCount] = new Date("2/8/1967");

        //Increment line series data value count
        intDataCount = tlForecast.data.values.length;

        tlForecast.data.values[intDataCount] = 999;
        tlForecast.data.x[intDataCount] = new Date("2/9/1967");
        console.debug("Number of Data Values: " + tlForecast.data.values.length)

        //This works
        //tlForecast.addRandom(20);
        Chart1.draw();

    }

Yeray
Site Admin
Site Admin
Posts: 9622
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Add A Single Date, Value point to a Tee.Line object

Post by Yeray » Thu May 12, 2016 3:33 pm

Hello,

Yes, that's the correct way to populate a series with x values.
You basically have to initialize the series' data.x variable as an array (tlForecast.data.x=[]). Then you can loop your source array and assign your x and y values to the data.x and data.values properties.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

jzarech
Newbie
Newbie
Posts: 58
Joined: Mon Jul 07, 2008 12:00 am

Re: Add A Single Date, Value point to a Tee.Line object

Post by jzarech » Thu May 12, 2016 4:51 pm

Thanks Yeray -- I appreciate your help.

Post Reply