var mihenkdata = { "data": [ { "ymin": 10.4, "lower": 14.5, "middle": 15.5, "upper": 18.4, "ymax": 21.5, "x": 3 }, { "ymin": 17.8, "lower": 21, "middle": 22.8, "upper": 28.075, "ymax": 33.9, "x": 4 }, { "ymin": 15, "lower": 15.8, "middle": 19.7, "upper": 26, "ymax": 30.4, "x": 5 }, { "ymin": 10.4, "lower": 14.5, "middle": 15.5, "upper": 18.4, "ymax": 21.5, "x": 6 }, { "ymin": 17.8, "lower": 21, "middle": 22.8, "upper": 28.075, "ymax": 33.9, "x": 7 } ], "opt": { "x_labels": [], "y_labels": [], "zoom": true, "xlab": "x label", "ylab": "y label", "color": [], "div_id": "graph3" } } mihenk.box(mihenkdata);
<!--Add d3.js--> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <!--Add Mihenk JS and CSS --> <link rel="stylesheet" href="../mihenk.css" /> <script src="../mihenk.js" ></script> <!-- Download Svg and Png--> <!-- pngindir('graph_div_id') , svgindir('graph_div_id') --> <button onclick="pngindir('graph')" class="btn btn-default btn-sm pull-right" style="margin-top:3px;margin-right:5px;"><span class="fa fa-download" /> Png</button> <button onclick="svgindir('graph')" class="btn btn-default btn-sm pull-right" style="margin-top:3px;margin-right:5px;"><span class="fa fa-download" /> Svg</button> <!--Graphic--> <div id='graph3'> <svg> </svg> </div>