JSFiddle - React, Tailwind, and code Playground

by ilapawar

HTML

<script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.pieRenderer.min.js"></script>
<script src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="http://www.jqplot.com/src/jquery.jqplot.css">
<script src="http://www.jqplot.com/src/plugins/jqplot.pieRenderer.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.cursor.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="http://www.jqplot.com/src/plugins/jqplot.highlighter.min.js"></script>
<div id="assetChart"  class="assetStyle"></div>
<div id="chart2"  class="assetStyle"></div>

CSS

.assetStyle{
 height:50%;
 width:100%;
    border:none
}

.jqplot-title{
   font-weight:bold;
}

JavaScript

function plotLineGraph(){
     var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
      ['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
      ['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
  var plot2 = $.jqplot('chart2', [line1], {
    title:'Mouse Cursor Tracking',
    axes:{
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,
          tickOptions:{
            formatString:'%b&nbsp;%#d'
          }
      },
      yaxis:{
        tickOptions:{
          formatString:'$%.2f'
        }
      }
    },
    highlighter: {
      show: false
    },
    cursor: {
      show: true,
      tooltipLocation:'sw'
    }
  });
}

$(document).ready(function(){
    
    
    plotLineGraph();
    //data should come from backend
    var data = [ ['Cash : $16000', 80],['Investment : $2000', 20]];

    //Jqplot object.Div is asserChart and json data 
  var plot1 = jQuery.jqplot ('assetChart', [data],

    {
        title:{
            text:"Assets",
            show:true
        },
     
        grid:{ borderColor:'transparent',
              shadow:false,
              drawBorder:false
        },
       seriesDefaults: {
         renderer: jQuery.jqplot.PieRenderer,
         rendererOptions: {
            showDataLabels: false
         },
         seriesColors :['#009900','#00CC00']
       },
        
     legend: { show:true, location: 'sw' ,border:'none'                ,placement:"insideGrid"}

    }
  );

});