CandlestickChart and Chart Wrapper

[ErikM]

Dear all Asgallent

I have tried to word based on the sample candlestick and the controls, but somehow I have missed a date formating or similar.

Candlestick on itself works fine.
http://jsfiddle.net/erikmarke/6eXm2/3/

But adding controls to it, I ran into error > One or more participants failed to draw()
Also the control does not nicely draw.

Please find my code online at:
http://jsfiddle.net/erikmarke/6eXm2/5/

Any adjustment/correction to the code is appreciated.

Regards,
Erik

[asgallant]

The ChartRangeFilter control only works on numeric or date axis types, and your code uses strings for the axis.  The example visualization from the playground converts the dates into strings for the final chart (which avoids some weird effects where the candlesticks at the ends of the chart get cut off).  If you change from strings to Date objects in your DataTable, that should fix the problem: http://jsfiddle.net/asgallant/6eXm2/7/

[asgallant]

Oh, you also needed to change either the containerId or the id of the div so that they match.

[Erik]

Thx a lot asgallient

Works as i wanted it to work.

Also easily changed to linechart.
Kind Regards Erik
Von meinem iPhone gesendet

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/lfTn-KNpG4wJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

You're welcome.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[Seth Messer]

So, I realize this thread is OLD but I am having similar issues.. Asgallant, would you mind taking a look at my code? essentially doing the same thing as ErikM and am getting the same error:

https://gist.github.com/megalithic/ee8f2e55573a1939f9fd

My dates are coming in as `2013-04-26T14:54:24-05:00` and then i new Date() them and receive `2013-04-26T16:53:49.000Z`.

Any help would be greatly appreciated. 

Thanks!

[asgallant]

You need to parse those dates into the correct format.  Use this:

if (angular.isDefined(chartData)) {

    for (var i = 0; i < chartData.length; i++) {

        var dateTimeArray = chartData[i][0].split('T');

        var dateArray = dateTimeArray[0].split('-');

        var timeArray = dateTimeArray[1].split(':');

        var date = new Date(

            parseInt(dateArray[0]),

            parseInt(dateArray[1]) - 1,

            parseInt(dateArray[2]),

            parseInt(timeArray[0]),

            parseInt(timeArray[1]),

            parseInt(timeArray[2])

        );

        dt.addRow([date, chartData[i][1], chartData[i][2], chartData[i][3], chartData[i][4]]);

[Seth Messer]

@asagallant,

Thanks much for the response. i've been able to parse  and create a date object just fine without having to split the original ISO datetime string; nevertheless i gave it a shot with your supplied code (using just the date parsing and formatting bits) and am getting the same issue. If it helps any, with the original code above I've been able to create JUST a candlestick chart without a problem, but would really like to get the daterange selections from that Google Chart playground example; I've updated the gist with the date parsing bits you included for me. I've gone ahead and included the entire angular directive for context. Thanks again for looking at this. THe updated gist: https://gist.github.com/megalithic/ee8f2e55573a1939f9fd

[asgallant]

I created a test page based on your code and the modifications I supplied, and it works fine for me - can you elaborate on what precisely is wrong?