标签: flot

我想用flot和mysql绘制图形,但是会发生异常

访问getdata.php

       $sql = mysql_query("SELECT count(Msg_ID) as msgCount,From_user
                           FROM Messages
                           GROUP BY From_user");

            echo "[";
  while($result = mysql_fetch_array($sql))
  {
     //print_r($result);
     echo "[".$result['msgCount'].",".$result['From_user']."]"."\n";

   }

    echo "]";

并为绘图

<div id="plotarea"  style="width:600px;height:300px;">

                    <script type="text/javascript">

            var options = {
                    lines: { show: true },
                    points: { show: true },
                    xaxis: { min:0,max:5 },
                    yaxis: { min:1  ,max:60},
               };

    $.ajax({
                            url:"getData.php",
                            type:"post",
                            success:function(data)
                            {
                                    alert(data);
                                    $.plot($("#plotarea"),data,options);
                                    //alert(data);
                            }
                    })
                    </script>

    </div>

这段代码有什么问题？接下来我想绘制一个轴是时间的图.

我试图绘制一个图表,表示人体重量(y轴)随时间的变化(x轴).我还需要显示事件的标记,例如特定日期的药物变化.是否可以向数据集添加一个点,其中只包含一个时间值,该值包含在线图中但不会更改线的图形？

所以我用上面的flot堆叠棒.现在我还有一个悬停效果,当它位于主条内的任何条形图上时,它会显示该部分的数字.我想表明的是,他们是一种通过参考当前棒替代数量为部分的比例,但是我没有看到任何地方我怎样才能到总的吧(即找即在号码4200基于此栏).

我遇到了Flot图表和来自AJAX的数据的问题.基本上我创建了数组以显示图形但不知何故我看到轴标签但没有数据.另外我如何进行堆叠或条形图？

编辑:或者任何人都可以告诉我如何使用带有x轴标签的AJAX在flot中显示数据.你可以在http://jsfiddle.net/DaG5W/284/看到代码.有人请告诉我这里我做错了什么？

这是我使用的代码.

$.getJSON(url, function(output) {
    var calendar, count, fieldNames, i, j, values, xAxis;
    fieldNames = new Array();
    i = 0;
    while (i < output.length) {
      if (fieldNames.indexOf(output[i].FieldName) < 0) {
        fieldNames.push(output[i].FieldName);
      }
      i++;
    }
    calendar = new Array();
    i = 0;
    while (i < output.length) {
      if (calendar.indexOf(output[i].Calendar) < 0) {
        calendar.push(output[i].Calendar);
      }
      i++;
    }
    xAxis = [];
    i = 0;
    while (i < calendar.length) {
      xAxis.push([parseInt(i + 1), calendar[i]]);
      i++;
    }
    data = [];
    i = …

是否有可能在Flot plothover中显示更多信息

 x = item.datapoint[0]
 y = item.datapoint[1]

我将在我的数据中添加3个信息,例如:y,x,someinfo

[1337341819000, 7.00000000, 3.95000000]

首先是日期,第二个是金额,第三个是我将在悬停中显示的信息.

我如何在extjs窗口中放置一个外部javascript图表,例如flot或jqplot中的图表？我知道我可以使用extjs提供的图表,但我想在窗口内放置一个flot或jqplot图表.

我尝试使用Flot char中的以下代码绘制图表.图表是按预期绘制的,但不是工具提示

$(function() {

        var data = [["Aug 06",2],["Aug 07",1],["Aug 08",1.5],["Aug 09",0],["Aug 10",0],["Aug 11",0],["Aug 12",0]];
    var options = {

      series: {
        lines: { show: true,
          lineWidth: 1,
          fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
        },
        points: { show: true, 
          lineWidth: 2 
        },
        shadowSize: 0
      },
      grid: { hoverable: true, 
        clickable: true, 
        tickColor: "#eeeeee",
        borderWidth: 0,
        hoverable : true,
        clickable : true
      },
      tooltip : true,
      tooltipOpts : {
        content : "Your …

我正面临着工具提示在x轴上显示日期的问题.任何人都可以帮忙吗？

小提琴代码

         grid: {
                hoverable: true //IMPORTANT! this is needed for tooltip to work
            },
            tooltip: true,
            tooltipOpts: {
                content: "<h4>%s</h4><ul><li>Date is %x</li><li>Total Count: %y</li></ul>",         
            defaultTheme: false
        },
         points:
        {
                show: true
        },
        series: {

            bars: {
                show: true,
                barWidth: 0.1,
                order: 1
            }
        }

当我使用javascript flot库绘制不同大小和颜色的点时,我无法移除阴影.

$(function () {

  var d2 = [[0, 0], [1, 1], [2, 2], [3, 3],[4, 4], [5, 5], [6, 6], [7, 7],[8, 8], [9, 9], [10, 10], [11, 11]];
  var colors = ["#cc4444", "#ff0000", "#0000ff", "#00ff00"];
  var radius = [1, 2, 3, 4,5,6,7,8,9,10,11,12];
  var rainbow = new Rainbow();
  rainbow.setSpectrum('blue','green', 'yellow','red');
  rainbow.setNumberRange(1, 12); 

  function raw(plot, ctx) {
    var data = plot.getData();
    var axes = plot.getAxes();
    var offset = plot.getPlotOffset();
    for (var i = 0; i < data.length; i++) {
        var …

我试图在我的flot图表中仅在x轴中启用缩放和平移,我希望yaxis保持在相同的范围内.我正在使用jQuery Flot库的导航插件.

我找不到文档或其他已解决的问题.所以我尝试通过将yaxis zoomRange和panRange设置为[0,0]来实现,但它仍然无法正常工作.

图表和"放大"工作正常,但当我"缩小"或当我在图表中平移时,它会被破坏.

这是我到目前为止所做的:http://jsfiddle.net/alxer/heL6uwgj/

$(function() {

  //example data
  var data = [{
    label: 'Velocity',
    color: '#93cc67',
    data: [
      [1415165113000, 0],
      [1415165202000, 13],
      [1415165221000, 19],
      [1415165239000, 22],
      [1415165254000, 23],
      [1415165271000, 24]
    ]
  }];

  //non data-dependent options
  var options = {
    canvas: true,
    series: {
      lines: {
        show: true
      },
      points: {
        show: true
      }
    },
    xaxis: {
      mode: "time",
      timezone: "browser"
    },
    yaxis: {},
    legend: {
      type: "canvas",
      position: "ne"
    },
    grid: {
      clickable: true,
      hoverable: …