shortcode and flot charts problem

Hi.

I have big problem with flot charts resize plugin and shortcode in WP.

I try write plugin where I’ll can do responsive charts via shortcode.
My plugin code:

define( 'ML_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );

require_once(ML_PLUGIN_PATH.'lib/chart.class.php');
//require_once(ML_PLUGIN_PATH.'lib/centyl.class.php');

add_action('init', 'ml_add_js_lib');

function ml_add_js_lib(){
	wp_enqueue_script( 'jquery');
	wp_enqueue_script('flot',plugin_dir_url(__FILE__).'js/flot/jquery.flot.js');
	wp_enqueue_script('flot.resize',plugin_dir_url(__FILE__).'js/flot/jquery.flot.resize.min.js');
	wp_enqueue_script('flot.comments',plugin_dir_url(__FILE__).'js/flot/jquery.flot.comments.js');
	wp_enqueue_style( 'ml-centyl-css',plugin_dir_url(__FILE__).'css/style.css');
	//echo '<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->';
}

function ml_flot(){
	$seria['nazwa']='lipa';
	$seria['data']='[[1,1],[2,2],[3,3]]';
	$seria2['nazwa']='lipa2';
	$seria2['data']='[[4,4],[22,2],[1,1]]';
	$seria2['settings']='points: { show: true }';
	$chart = new Chart();
	$chart->setWidth('50%');
	$chart->setHeight('40%');
	$chart->addSeries($seria);
        $chart->addSeries($seria2);
	$chart->setTitle('Wzrost');
	$chart->setOptions('{
					sidenote: {
						show: true
					},
					sidenotes: [
						{
							y: 2,
							contents: "Low Level",
							offsetX: 0,
							offsetY: 0,
							maxWidth: 0.5
						}]
					}');
	return $chart->renderChartShortcode('placeholder');
}

add_shortcode( 'dupa' , 'ml_flot' );

and my library class:

class Chart{

	protected $xaxes;

	protected $yaxes;

	protected $data;

	protected $width='100px';

	protected $height='100px';

	protected $options;

	protected $title;

	public function setTitle($title){
		$this->title=$title;
	}

	public function setOptions($options){
		$this->options.=$options;
	}

	public function setWidth($width){
		$this->width=$width;
	}

	public function setHeight($height){
		$this->height=$height;
	}

	public function addSeries($seria){
		$this->data[$seria['nazwa']]=array('data' => $seria['data'],'settings' => $seria['settings']);
	}

	public function removeSeries($nazwa){
		unset($this->$data[$nazwa]);
	}

	public function renderChartShortcode($placeholder){
		foreach($this->data as $key => $seria):
			$data.='{data:'.$seria['data'].', '.$seria['settings'].'},';
		endforeach;
		return '
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">'.$this->title.'</h3>
			</div>
			<div class="panel-body">
				<div id="'.$placeholder.'" style="width:'.$this->width.'; height:'.$this->height.'; border-style:solid; text-align: center; margin:0 auto;"></div>
                        </div>
                </div>
		<script>
			jQuery( document ).ready(function() {
				jQuery.plot(jQuery("#'.$placeholder.'"), ['.$data.'], '.$this->options.');
			});
		</script>';
	}

}

When I put width and height in px everything work well, but when I put value in % chart dosen’t render.

P.S. I add css file with:

html{
        height: 100% !important;
    }
body {
        height: 100% !important;
    }

Any one have any idea what I do wrong?