How to get all json values in line chart

2020-05-08 07:30发布

站内问答 / JavaScript
1713 3 6

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 in chart. please anybody give jsfiddle example for this issue.

HTML code

<div id="chartContainer" class="chart">

Script

$.getJSON('dashboard_summary.php?', function(data) {
    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();
};

Json 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",
}

3条回答
疯言疯语
2楼-- · 2020-05-08 08:05

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) 举报
Melony?
3楼-- · 2020-05-08 08:21

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) 举报
老娘就宠你
4楼-- · 2020-05-08 08:28

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)