javascript - Can't see why this AmCharts chart doesn't show? -

javascript - Can't see why this AmCharts chart doesn't show? -

i've set number of amcharts couple of different uses, time got stuck. i've been trying chart show lastly hours without success. think i've tried can think of, i'm hoping might able spot what's wrong code.

here jsfiddle: http://jsfiddle.net/mdr87/2/

this js code doesn't render chart:

var chartdatagc1 = []; var newdate0 = new date("2014-05-01"); chartdatagc1.push({ date: newdate0, engine0: "6", engine1: "16"}); var newdate1 = new date("2014-05-02"); chartdatagc1.push({ date: newdate1, engine0: "6", engine1: "16"}); var newdate2 = new date("2014-05-03"); chartdatagc1.push({ date: newdate2, engine0: "31", engine1: "16"}); var newdate3 = new date("2014-05-04"); chartdatagc1.push({ date: newdate3, engine0: "6", engine1: "16"}); var newdate4 = new date("2014-05-06"); chartdatagc1.push({ date: newdate4, engine0: "6", engine1: "16"}); var newdate5 = new date("2014-05-08"); chartdatagc1.push({ date: newdate5, engine0: "6", engine1: "16"}); var newdate6 = new date("2014-05-22"); chartdatagc1.push({ date: newdate6, engine0: "41", engine1: "17"}); var newdate7 = new date("2014-05-23"); chartdatagc1.push({ date: newdate7, engine0: "41", engine1: "17"}); var newdate8 = new date("2014-05-24"); chartdatagc1.push({ date: newdate8, engine0: "44", engine1: "16"}); var newdate9 = new date("2014-05-25"); chartdatagc1.push({ date: newdate9, engine0: "44", engine1: "16"}); var newdate10 = new date("2014-05-26"); chartdatagc1.push({ date: newdate10, engine0: "44", engine1: "17"}); var newdate11 = new date("2014-05-27"); chartdatagc1.push({ date: newdate11, engine0: "44", engine1: "17"}); var newdate12 = new date("2014-05-28"); chartdatagc1.push({ date: newdate12, engine0: "44", engine1: "17"}); var newdate13 = new date("2014-05-29"); chartdatagc1.push({ date: newdate13, engine0: "40", engine1: "17"}); var newdate14 = new date("2014-05-30"); chartdatagc1.push({ date: newdate14, engine0: "40", engine1: "17"}); var newdate15 = new date("2014-05-31"); chartdatagc1.push({ date: newdate15, engine0: "44", engine1: "17"}); var chartgc1 = amcharts.makechart("chartdivgc1", { "type": "serial", "theme": "none", "pathtoimages": "http://www.amcharts.com/lib/3/images/", "legend": { "usegraphsettings": true }, "dataprovider": chartdatagc1, "valueaxes": [{ "integersonly": true, "maximum": 50, "minimum": 1, "reversed": true, "axisalpha": 0, "dashlength": 5, "gridcount": 10, "position": "left", "title": "position" }], "graphs": [{ "id":"g1", "balloontext": "bing sweden<br />[[category]]<br /><b><span style='font-size:14px;'>placering: [[value]]</span></b>", "bullet": "bubble", "bulletsize": 3, "bulletborderalpha": 1, "bulletcolor":"#ffffff", "hidebulletscount": 50, "title": "bing sweden", "valuefield": "engine0", "uselinecolorforbulletborder":true, "linecolor": "#0297a9" }, { "id":"g2", "balloontext": "google sweden<br />[[category]]<br /><b><span style='font-size:14px;'>placering: [[value]]</span></b>", "bullet": "bubble", "bulletsize": 3, "bulletborderalpha": 1, "bulletcolor":"#ffffff", "hidebulletscount": 50, "title": "google sweden", "valuefield": "engine1", "uselinecolorforbulletborder":true, "linecolor": "#e2cc30" } ], "chartcursor": { "cursorposition": "mouse" }, "categoryfield": "date", "categoryaxis": { "parsedates": true, "axiscolor": "#f3f3f3", "dashlength": 1, "minorgridenabled": true, "dateformats": [{period:"fff",format:"jj:nn:ss"}, {period:"ss",format:"jj:nn:ss"}, {period:"mm",format:"jj:nn"}, {period:"hh",format:"jj:nn"}, {period:"dd",format:"yyyy-mm-dd"}, {period:"ww",format:"yyyy-mm-dd"}, {period:"mm",format:"mmm"}, {period:"yyyy",format:"yyyy"}] } });

there seam problem rendering since, dose show if trigger resize event, seek add together inline width , height, or if in modal/dialogue, render after the size set.

you can utilize

chart.invalidatenow(); chart.validatesize();

to recalculate size. /r

javascript svg charts rendering amcharts