How to get all json values in line chart

前端未结

关注

 3  743

I have many Json values, using them I am going to create a line chart but it shows only one value in the chart. I am a newbie to javascript and have an idea to plot all values

相关标签:

3条回答

温柔的废话

2021-01-28 10:06

jsFiddle

  Update Code: 




dataRevenue=
       [
        { x: new Date(2014, 00,30), y: 0 },
        { x: new Date(2014, 01,31), y: 7},
        { x: new Date(2014, 02,28), y: 47}

        ];

dataTip =[
        { x: new Date(2014, 00,30), y: 0 },
        { x: new Date(2014, 01,31), y: 3},
        { x: new Date(2014, 02,28), y: 8}

        ]; 

    var chart = new CanvasJS.Chart("chartContainer",
    {
      theme: "theme2",
      title:{
        text: "line chart"
      },
      axisX: {
        valueFormatString: "MMM",
        interval:1,
        intervalType: "month"

      },
      axisY:{
        includeZero: false

      },
      data: [
      {        
        type: "line",
        //lineThickness: 3,        
        dataPoints: dataTip
      },
       {        
        type: "line",
        //lineThickness: 3,        
        dataPoints: dataRevenue
      }



      ]
    });

chart.render();

0 讨论(0)

耶瑟儿～

2021-01-28 10:23

Updated codes. it Works >> Pastebin

<!DOCTYPE HTML>
<html>

<head>  
<script type="text/javascript" src = "http://canvasjs.com/wp-content/themes/bootstrap_child/assets/js/jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

</head>
<body>
<div id="chartContainer" class="chart">
<script type="text/javascript">

 data=[
{
    "Date": "2014-01-30",
    "CarsParked": "1",
    "RevenueWithTip": "0",
    "Revenue": "0",
    "Tip": "0",
},
{
    "Date": "2014-01-31",
    "CarsParked": "10",
    "RevenueWithTip": "10",
    "Revenue": "7",
    "Tip": "3",
},
{
    "Date": "2014-02-28",
    "CarsParked": "28",
    "RevenueWithTip": "55",
    "Revenue": "47",
    "Tip": "8",
}];

    var len = data.length;

    $.each(data, function(i, v) {               
        chart(v.Date,v.Tip,v.Revenue,len);
    });



  function chart (dates,Tip,Rev,len) { 

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Revenue",
            fontSize: 15
        },
        axisX: {
            gridColor: "Silver",
            tickColor: "silver",
            valueFormatString: "DD/MMM"
        },                        
        toolTip: {
            shared:true
        },
        theme: "theme2",
        axisY: {
            gridColor: "Silver",
            tickColor: "silver"
        },
        legend: {
            verticalAlign: "center",
            horizontalAlign: "right"
        },
        data: [
            {                   
                type: "line",
                showInLegend: true,
                lineThickness: 2,
                name: "Tip",
                markerType: "square",
                color: "#F08080",
                dataPoints: [
                    {
                        x: new Date(dates),
                        y: parseInt(Tip)
                    }
                ]
            },
            {        
                type: "line",
                showInLegend: true,
                name: "Revenue",
                color: "#20B2AA",
                lineThickness: 2,
                dataPoints: [
                    {
                        x: new Date(dates),
                        y: parseInt(Rev)
                    }
                ]
            }
        ],
        legend: {
            cursor: "pointer",
            itemclick: function(e) {
                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
                chart.render();
            }
        }
    });

    chart.render();


}
</script>
</body>

</html>

0 讨论(0)

青春惊慌失措

2021-01-28 10:24

Based on your code, I can see why the chart shows only one point, which is the last data point of those points expected to be shown on the chart. Here is the problem:

var len = data.length;

/* Loop through each item in the data */
$.each(data, function(i, v) {               
    chart(v.Date,v.Tip,v.Revenue,len); /* Draw a chart with one point */
});

So you end up drawing many charts with the last chart which has the last data point to replace all the previous charts.

Instead, you should adjust the foreach block as follow and draw the chart once you've converted the data into an array of points.

$.getJSON('dashboard_summary.php?', function(data) {
    var Tips = [];
    var Revs = [];
    $.each(data, function(i, v) {               
        Tips.push({ x: new Date(v.Date), y: parseInt(v.Tip) });
        Revs.push({ x: new Date(v.Date), y: parseInt(v.Revenue) });
    });
    chart(Tips, Revs);
});

Also, you can format the x-axis to make the chart look prettier (The format of the x-axis here is designed for the data given above. In your application, you may have to use another format style depending on the actual data):

function chart (Tips, Revs) { 
    var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Revenue",
        fontSize: 15
    },
    axisX: {
        gridColor: "Silver",
        tickColor: "silver",
        valueFormatString: "DD/MMM",
        interval:14,
        intervalType: "day"
    },                        
    toolTip: {
        shared:true
    },
    theme: "theme2",
    axisY: {
        gridColor: "Silver",
        tickColor: "silver"
    },
    legend: {
        verticalAlign: "center",
        horizontalAlign: "right"
    },
    data: [
        {                   
            type: "line",
            showInLegend: true,
            lineThickness: 2,
            name: "Tip",
            markerType: "square",
            color: "#F08080",
            dataPoints: Tips
        },
        {        
            type: "line",
            showInLegend: true,
            name: "Revenue",
            color: "#20B2AA",
            lineThickness: 2,
            dataPoints: Revs
        }
    ],
    legend: {
        cursor: "pointer",
        itemclick: function(e) {
            if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            chart.render();
        }
    }
});

chart.render();
}

A jsFiddle is made here for your review.

0 讨论(0)