Using Flotr plot in sDashboard in html

933 views Asked by At

I cannot show the plot using sDashboard in my html file. I did the following and the plot doesn't show up.

<html>
<head>
<title>EXAMPLE</title>
    <link type="text/css" href="jquery-ui.css" rel="stylesheet" />
    <link href="sDashboard.css" rel="stylesheet">
    <script src="jquery-1.8.2.js" type="text/javascript"></script> 
    <script src="jquery-ui.js" type="text/javascript"></script>
    <script src="jquery.dataTables.js"></script>
    <script src="flotr2.js" type="text/javascript"></script>
    <script src="jquery-sDashboard.js" type="text/javascript"></script>
</head>

<body>
<ul id="myDashboard"></ul>

<script type="text/javascript" >
var tdata = [],i;

for(i=0;i<4*Math.PI;i++){
tdata.push([i,Math.sin(i)]);
}

var widgetDefinitions = [
{   widgetTitle:"Plot Example",
    widgetId : "first" ,
    widgetType : "chart" , 
    widgetContent : {
    data : tdata,
    options : {points:{show:true}}
    }

}
]
$("#myDashboard").sDashboard({
dashboardData : widgetDefinitions
});
</script>

</body>
</html>

Also I would like to use the default options of Flotr. I tried Flotr.defaultOptions but it didn't work. The documentation of sDashboard state if widet type is Chart widgetContent should have data and options specified as per the Flotr Documentation. What am I doing wrong here? The widget Box Appears but the plot(sine plot) doesn't appears.

2

There are 2 answers

0
Mahadeva On BEST ANSWER

I solved the problem I was facing by making array of the tdata i was using. ie I was using tdata as in format [[0,...],[1,..],[2,..],...] and using the same in widgetContent. Upon some research, i used following

tdata  = [tdata]

ie I created array of tdata. And got the plot.

0
Mahadeva On

Regarding the options on widgetContent defined on widgetDefinitions, it can be left blank and still I get the plot. ie

var widgetDefinitions = [
{   widgetTitle:"Plot Example",
    widgetId : "first" ,
    widgetType : "chart" , 
    widgetContent : {
    data : tdata,
    options : { } //left blank
    }

}
]

also worked fine on my program. For more detailed options value i got this site http://solutoire.com/flotr/docs/options/ providing good information.