Multi chart

Multi charts

by kamift

HTML

<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>

    <style>
        body {padding: 10px; }
            .chartContainer { float:left; width: 350px; height: 350px; border: 1px solid #000; padding:20px; margin-right:20px; margin-bottom:20px;  }
            
            .container {
                width: 100%;
                height:100%;
            }
            .container .form-container { float:left; width: 400px; height:100%; border-right:1px solid #000; }
            .container .charts-container { float:left; width: 500px; height:100%; padding-left:20px; padding-right:20px; border-right:1px solid #000; }
            .container .events-container { float:left; width: 500px; height: 460px; overflow-y: scroll; }
    </style>
</head>
<body>
    <h1 id="greeting">Hello mate</h1>
    <div class="democharts" data-dojo-type="app/chartsdemo"></div>
    <!-- load Dojo -->
    <script src="dojo/dojo.js"></script>
    

    <script>
        define("app/chartsdemo",[
    "dojo",
    "dojo/_base/declare",
    "dojo/dom-construct", 
    "dojo/on",
    "dojo/_base/lang",
    "dojo/query",
    "dojo/dom-attr",
    
    "dojox/charting/Chart",
    "dojox/charting/axis2d/Default",
    "dojox/charting/plot2d/Lines",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/Chart2D",
    "dojox/charting/action2d/Magnify",
    "dojox/charting/action2d/MoveSlice",
    "dojox/charting/action2d/Shake",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/action2d/MouseZoomAndPan",
    "dojox/charting/action2d/MouseIndicator",
    
    "dojox/charting/widget/SelectableLegend",
    "dojox/charting/themes/Dollar",
    "dojox/charting/themes/Electric",
    "dojox/charting/themes/Julie",
    "dojox/charting/themes/PurpleRain",
    "dojox/charting/themes/Renkoo",
    
    "dijit/_Widget",
    "dijit/_TemplatedMixin"   
], function(
    dojo,
    declare,
    domConstruct,
    on,
    lang,
    query,
    domAttr,
    
    Chart,
    Default,
    Lines,
   ...