CODEWITHSUNDEEP
jqplotbar-chart
Oasis
Oasis

Reputation: 478

JqPlot Display Trendline over barchart

I have using the below code to display the bar chart using jqplot.But i could not plot the trendline over my bar chart even if i specify trendline : { show : true }.

References I have used

    <script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.barRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.pieRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.categoryAxisRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script type="text/javascript" src="js/jqplot/jqplot.dateAxisRenderer.min.js"></script>
    <link href="Css/blitzer/jquery-ui.css" rel="stylesheet" />
    <script src="Js/jqplot/jqplot.cursor.min.js"></script>
    <script src="Js/jqplot/jqplot.highlighter.min.js"></script>

Code:
 var AppleArray=[];
 var OrangeArray = [];
 var GrapeArray = [] ;
 var MangoArray =[];
 var PomegranateArray = [];
 var xAxisTicks =[];//It would be 00:01:03,02:01:03,04:01:04,06:01:04,08:01:04,10:01:03,12:01:03,14:01:03,16:01:06,18:01:04,20:01:05,22:01:08

 for(var Count = 0; Count < JsonResponse.length ;Count++)
 {
     //Fill the AppleArray,OrangeArray ,GrapeArray ,MangoArray ,Pomovalues from Json                  response
 }

 var TypeArray = [AppleArray, OrangeArray, GrapeArray, MangoArray, PomegranateArray];
 //Final TypeArray dynamic Value would be 1047,1049,1045,1046,1046,1046,1077,1048,1045,1046,1047,1045,669,717,742,696,1277,905,728,740,704,722,753,2127,1102,1079,1105,1070,1120,1095,1085,1077,1088,1139,1953,1452,1583,1649,1596,1587,1523,1539,2025,1653,1581,1797,2039,2012,1240,1219,1235,1203,1147,1289,1105,1194,1117,1209,1152,1208 
 plot1 = $.jqplot('chart1', TypeArray, {
    // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
    animate: !$.jqplot.use_excanvas,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: { show: true },
        trendline: {show: true},
    },
    legend: {
        renderer: $.jqplot.EnhancedLegendRenderer,
        labels: legendLabels,
        show: true
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            rendererOptions: {
                seriesToggleReplot: { resetAxes: true },
                drawBaseline: false
            },
            ticks: xAxisTicks
        },
        yaxis: {
            //min : 500,
            min: 100,
            //tickInterval : 500,
            max: 2500
        }
    },
    highlighter: { show: false }
});

This code displays only the below bar chart.Does not display the trend line over bar chart. How to plot the trendline over barchart?

Upvotes: 1

Views: 1444

Answers (1)

AnthonyLeGovic
AnthonyLeGovic

Reputation: 2335

You need to include the trendline plugin in order to use it :

<script type="text/javascript" src="js/jqplot/jqplot.trendline.min.js"></script>
<script type="text/javascript" src="js/jqplot/jqplot.enhancedLegendRenderer.min.js"></script>

Edit : Please see a working example here

The only differences with your code is that I have removed the legendLabels call in order to avoid an error. The data arrays are hard-coded. Maybe your issue is related to your data creation (especially your TypeArray) - TypeArray must be an array of array and not an array of array of array.

Upvotes: 1

Related Questions