logo
down
shadow

Symfony 2.6 - Flot chart doesn't populate properly from JSON


Symfony 2.6 - Flot chart doesn't populate properly from JSON

By : user2950529
Date : November 17 2020, 11:55 AM
I hope this helps . You should remove the single quotes as stated and you need the output to be non-escaped. Twig is automatically escaping your double-quotes to be 'safe', but that's not what you want. It should be:
code :
var data = {{ result|raw }};


Share : facebook icon twitter icon
Populate Flot chart with text from div

Populate Flot chart with text from div


By : user3439536
Date : March 29 2020, 07:55 AM
hop of those help? Got it working. Feel free to respond with how this functionality would be accomplished with Ajax and/or JSON, but here is how I accomplished pulling in data within a hidden div to plot on Flot:
code :
function plot_team_chart() {
    var tmp1 = new Array();
    var tmp2 = new Array();
    var tmp3 = new Array();
    var data = new Array();
    $('.to-plot').each(function() {
        tmp1 = $(this).html().split('|');
        for (var i=0; i<tmp1.length; i++) {
            tmp2 = tmp1[i].split(',');
            tmp3.push(tmp2);
        }
        data.push({ label: $(this).attr('data_label'),
                    data: tmp3});
        tmp3 = [];
    });

    var options = { xaxis: {    min:1,
                                max:13},
                    yaxis: {    max:120,
                                min:30},
                    grid: {     borderColor:'#ccc'},
                    legend: {   show:true,
                                position:'se'}};

    if (data.length > 0) {
        $.plot( $("#team-chart"),
                data,
                options
        );
    }
}
function get_team_chart($arr) {
    $data1 = array();
    $data2 = array();
    foreach ($arr as $a) {
        $data1[] = $a["week"] . "," . $a["pts"];
        $data2[] = $a["week"] . "," . $a["league_avg"];
    }
    $str1 = implode('|', $data1);
    $str2 = implode('|', $data2);
    echo "  <div id='series1' data_label='avg score' style='display:none;'>" . $str1 . "</div>
            <div id='series2' data_label='league avg' style='display:none;'>" . $str2 . "</div>";           
}
Labels not getting placed properly over flot bar chart

Labels not getting placed properly over flot bar chart


By : GigiMda
Date : March 29 2020, 07:55 AM
will be helpful for those in need I got it. I just need to change plot.Offset() to plot.getPlotOffset() Then its working correctly.
offset() -- Returns the offset of the plotting area inside the grid relative to the document, useful for instance for calculating mouse positions (event.pageX/Y minus this offset is the pixel position inside the plot).
Flot chart multiple axes are not configured properly

Flot chart multiple axes are not configured properly


By : Jacki Loh
Date : March 29 2020, 07:55 AM
may help you . Instead of yaxis: [ ... ], use yaxes: [ ... ].
See the section of the docs entitled Multiple Axes for more info.
Populate JQuery Flot Chart with Ajax and Json

Populate JQuery Flot Chart with Ajax and Json


By : user2528725
Date : March 29 2020, 07:55 AM
should help you out I'm trying to use JQuery Flot Charts http://www.flotcharts.org/ in my MVC 5 application. At the moment I'm just trying to get an understanding of how they work. I've used this example code which creates a Bar Chart: , Folks, the problem was that the line of code
code :
var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }];
$.ajax({
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: '/Statistics/GetTestData/',
            error: function () {
                alert("An error occurred.");
            },
            success: function (data) {
                //alert("Success.");

                var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }];
                var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"], [4, "Beijing"], [5, "Sydney"]];

                var options = {
                    series: {
                        bars: {
                            show: true
                        }
                    },
                    bars: {
                        align: "center",
                        barWidth: 0.5
                    },
                    xaxis: {
                        axisLabel: "World Cities",
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelFontFamily: 'Verdana, Arial',
                        axisLabelPadding: 10,
                        ticks: ticks
                    },

                    legend: {
                        noColumns: 0,
                        labelBoxBorderColor: "#000000",
                        position: "nw"
                    },
                    grid: {
                        hoverable: true,
                        borderWidth: 2,
                        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
                    }
                };

                $.plot($("#placeholder"), dataset, options);
            }
        });
Google Chart doesnt display my interval chart properly

Google Chart doesnt display my interval chart properly


By : 郭芳强
Date : March 29 2020, 07:55 AM
Hope this helps the puddle is due to --> curveType: 'function'
move option to series 1 only...
code :
      series: {
          0:{
              lineWidth: 1,
              type: 'area',
              targetAxisIndex: 0,
              color: 'green'
          },
          1:{
              lineWidth: 3,
              type: "line",
              targetAxisIndex: 1,
              curveType: 'function'  // <-- move here
          }
      },
google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});
function drawChart() {
  var data = new google.visualization.DataTable();

  data.addColumn('string', 'Tahun-Kuartal');
  data.addColumn('number', 'TOTAL GDP');
  data.addColumn({id:'i0', type:'number', role:'interval'});
  data.addColumn({id:'i1', type:'number', role:'interval'});
  data.addColumn('number', 'YoY');

  data.addRows([
      ['2011-I', 1748731, 1748731, 1748731, 6.48],
      ['2011-II', 1816268, 1816268, 1816268, 6.27],
      ['2011-III', 1881850, 1881850, 1881850, 6.01],
      ['2011-IV', 1840786, 1840786, 1840786, 5.94],
      ['2012-I', 1855580, 1855580, 1855580, 6.11],
      ['2012-II', 1929019, 1929019, 1929019, 6.21],
      ['2012-III', 1993632, 1993632, 1993632, 5.94],
      ['2012-IV', 1948852, 1948852, 1948852, 5.87],
      ['2013-I', 1958396, 1958396, 1958396, 5.54],
      ['2013-II', 2036817, 2036817, 2036817, 5.59],
      ['2013-III', 2103598, 2103598, 2103598, 5.52],
      ['2013-IV', 2057688, 2057688, 2057688, 5.58],
      ['2014-I', 2058585, 2058585, 2058585, 5.12],
      ['2014-II', 2137386, 2137386, 2137386, 4.94],
      ['2014-III', 2207344, 2207344, 2207344, 4.93],
      ['2014-IV', 2161553, 2161553, 2161553, 5.05],
      ['2015-I', 2157848, 2157848, 2157848, 4.82],
      ['2015-II', 2238762, 2238762, 2238762, 4.74],
      ['2015-III', 2312640, 2312640, 2312640, 4.77],
      ['2015-IV', 2273262, 2273262, 2273262, 5.17],
      ['2016-I', 2264090, 2264090, 2264090, 4.92],
      ['2016-II', 2354798, 2354798, 2354798, 5.18],
      ['2017-II', 2500000, 1500000, 5000000, 6.17],
  ]);

  var options_lines = {
      title: 'TOTAL GDP INDONESIA',
      width: '1360',
      height: '350',
      lineWidth: 3,
      intervals: {
          style: 'area'
      },
      vAxes: {
          0: {format: '###,###',  viewWindow: { min: 0 }, gridlines: {count: 6, color: 'none'}, textStyle: {color:'black', bold: 'true'}  },
          1: {format: '', viewWindow: { min: 0, max: 10 }, gridlines: {count: 6, color: 'none'}, textStyle: {color:'blue', bold: 'true'}  }
      },
      hAxis: {
          textStyle: {
              color: 'black',
              bold: true
          }
      },
      series: {
          0:{
              lineWidth: 1,
              type: 'area',
              targetAxisIndex: 0,
              color: 'green'
          },
          1:{
              lineWidth: 3,
              type: 'line',
              targetAxisIndex: 1,
              curveType: 'function'  // <-- move here
          }
      },
      legend: {
        textStyle: {color:'purple', bold:'true'}
      }
  };

  var chart_lines = new google.visualization.LineChart(document.getElementById('chart'));
  chart_lines.draw(data, options_lines);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
Related Posts Related Posts :
  • Convert JSON to CSV - string manipulation (jq, bash, awk, sed, etc.)
  • Is there a bug in the new Spring JSON reader or am I doing something wrong?
  • Is it possible to skip or ignore a attribute while using Streaming API of Jackson
  • Json Object Deserialization
  • jsonSlurper: get one value based on other value
  • How to break a JSON response into smaller JSON part of a particular batch size
  • How do I offer JSON as a url with parameters?
  • Getting Error While creating DOJOX enchanced grid programmatically
  • Decode Feedly JSON data
  • Not in scope: `HashMap.lookup'
  • Reddit data scraping with json, 'after' not making a difference in '.json?limit=<limit>&after=<id>'
  • JsonIgnore and JsonBackReference are being Ignored
  • It is possible to display geojson as table in ng-repeat loop in Angular?
  • convert system.Object[] to Datatable in VB.NET
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org