{"action":"created","issue":{"url":"https://api.github.com/repos/chartjs/Chart.js/issues/4015","repository_url":"https://api.github.com/repos/chartjs/Chart.js","labels_url":"https://api.github.com/repos/chartjs/Chart.js/issues/4015/labels{/name}","comments_url":"https://api.github.com/repos/chartjs/Chart.js/issues/4015/comments","events_url":"https://api.github.com/repos/chartjs/Chart.js/issues/4015/events","html_url":"https://github.com/chartjs/Chart.js/issues/4015","id":214053161,"number":4015,"title":"Multipe Charts using multiple canvas not working on a single page.","user":{"login":"adeel3612","id":26408294,"avatar_url":"https://avatars1.githubusercontent.com/u/26408294?v=3","gravatar_id":"","url":"https://api.github.com/users/adeel3612","html_url":"https://github.com/adeel3612","followers_url":"https://api.github.com/users/adeel3612/followers","following_url":"https://api.github.com/users/adeel3612/following{/other_user}","gists_url":"https://api.github.com/users/adeel3612/gists{/gist_id}","starred_url":"https://api.github.com/users/adeel3612/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adeel3612/subscriptions","organizations_url":"https://api.github.com/users/adeel3612/orgs","repos_url":"https://api.github.com/users/adeel3612/repos","events_url":"https://api.github.com/users/adeel3612/events{/privacy}","received_events_url":"https://api.github.com/users/adeel3612/received_events","type":"User","site_admin":false},"labels":[{"id":351622467,"url":"https://api.github.com/repos/chartjs/Chart.js/labels/Category:%20Support","name":"Category: Support","color":"f9d0c4","default":false},{"id":42400464,"url":"https://api.github.com/repos/chartjs/Chart.js/labels/Needs%20test%20case","name":"Needs test case","color":"006b75","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-03-14T12:13:26Z","updated_at":"2017-04-01T23:17:27Z","closed_at":"2017-04-01T23:17:27Z","body":"I m working on chart.js and problem i m getting is it did not load the multiple graphs. Actually i want to show the graphs which the user have checked on the different checkboxes. There are 7 checkboxes right now i am working only to show the 2 graphs one by another in same page. \r\n\r\nThis is checkbox code \r\n```\r\n<div class=\"checkbox col-sm-2\"> \r\n<label style=\"font-size: 12px\"><input type=\"checkbox\" value=\"crm\" id=\"crm\" name=\"crm\">Standards: \r\nCRMs</label> \r\n</div>\r\n<div class=\"checkbox col-sm-2\"> \r\n<label style=\"font-size: 12px\"><input type=\"checkbox\" value=\"blanks\" id=\"blanks\" \r\nname=\"blanks\">Blanks</label> \r\n</div> \r\n<div class=\"checkbox col-sm-2\"> \r\n<label style=\"font-size: 12px\"><input type=\"checkbox\" value=\"irm\" id=\"irm\" name=\"irm\">Standards: \r\nIRMs</label> \r\n</div> \r\n```\r\n this is call upon submit button \r\n```\r\nfunction generateGraph() {\r\n    data = {\r\n        date_from: $(\"#date_from\").val(),\r\n        date_to: $(\"#date_to\").val(),\r\n        source: $(\"#source\").val(),\r\n        scheme: $(\"#scheme\").val(),\r\n        analyte:$(\"#analyte\").val()\r\n    };\r\n    if ($('#crm').is(\":checked\")) {\r\n        crm = $(\"#crm\").val();\r\n        data.graph_id = 'crm_graph';\r\n        data.graph_label = 'CRM Graph';\r\n        data.type = crm;\r\n        get_graph_detail(data);\r\n        $('#crm_chart').show();\r\n\r\n\r\n    }\r\n    else {\r\n        crm = '';\r\n        $('#crm_chart').hide();\r\n    if ($('#irm').is(\":checked\")) {\r\n        irm = $(\"#irm\").val();\r\n        data.graph_id = 'irm_graph';\r\n        data.graph_label = 'IRM Graph';\r\n        data.type = irm;\r\n        get_graph_detail(data);\r\n        $('#irm_chart').show();\r\n\r\n    }\r\n    else {\r\n        irm = '';\r\n        $('#irm_chart').hide();\r\n    }\r\n    }\r\n    if ($('#blanks').is(\":checked\")) {\r\n        blanks = $(\"#blanks\").val();\r\n        data.graph_id = 'blanks_graph';\r\n        data.graph_label = 'Blanks Graph';\r\n        data.type = blanks;\r\n        get_graph_detail(data);\r\n        $('#blanks_chart').show();\r\n    }\r\n    else {\r\n        blanks = '';\r\n        $('#blanks_chart').hide();\r\n    }\r\n```\r\n\r\nThis fetch the data from the controller\r\n\r\n```\r\nfunction get_graph_detail(data) {\r\n    $.ajax({\r\n        type: \"POST\",\r\n        url: base_url + \"dashboard/show_graph\",\r\n        dataType: 'json',\r\n        data: data,\r\n        success: function (response) {\r\n            display_table(response);\r\n            var graph_min=response.min;\r\n            display_graph(data.graph_id, data.graph_label, response,graph_min);\r\n\r\n        }\r\n\r\n    });\r\n}\r\n```\r\n\r\nand my graph function is this. \r\n\r\n```\r\nfunction display_graph(id, label, data,minimum) {\r\n    var ctx = document.getElementById(id).getContext(\"2d\");\r\n    var graph_min=parseFloat(minimum);\r\n    var data = {\r\n        labels: data.assay_value_count,\r\n        datasets: [\r\n            {\r\n                label: 'Assay Values',\r\n                fill: false,\r\n                lineTension: 0,\r\n                backgroundColor: \"rgba(75,192,192,0.4)\",\r\n                borderColor: \"rgba(75,192,192,1)\",\r\n                borderCapStyle: 'butt',\r\n                borderDash: [],\r\n                borderDashOffset: 0.0,\r\n                borderWidth: 1,\r\n                borderJoinStyle: 'miter',\r\n                pointBorderColor: \"rgba(75,192,192,1)\",\r\n                pointBackgroundColor: \"#fff\",\r\n                pointBorderWidth: 1,\r\n                pointHoverRadius: 5,\r\n                pointHoverBackgroundColor: \"rgba(75,192,192,1)\",\r\n                pointHoverBorderColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderWidth: 2,\r\n                pointRadius: 1,\r\n                pointHitRadius: 10,\r\n                data: data.assay_value,\r\n                spanGaps: false\r\n            },\r\n            {\r\n                label: '1cl 5% outliers',\r\n                fill: false,\r\n                lineTension: 0,\r\n                backgroundColor: \"rgba(255,233,0,1)\",\r\n                borderColor: \"rgba(255,233,0,0)\",\r\n                borderCapStyle: 'butt',\r\n                borderDash: [],\r\n                borderDashOffset: 0.0,\r\n                borderWidth: 5,\r\n                borderJoinStyle: 'miter',\r\n                pointBorderColor: \"rgba(255,233,0,1)\",\r\n                pointBackgroundColor: \"rgba(255,233,0,1)\",\r\n                pointBorderWidth: 3,\r\n                pointHoverRadius: 5,\r\n                pointHoverBackgroundColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderWidth: 2,\r\n                pointRadius: 3,\r\n                pointHitRadius: 10,\r\n                data: data.cl_1_outliers_5percent_graph,\r\n                spanGaps: false\r\n            },\r\n            {\r\n                label: '8 cons u/o mean outliers',\r\n                fill: false,\r\n                lineTension: 0,\r\n                backgroundColor: \"rgba(255, 0, 250,1)\",\r\n                borderColor: \"rgba(255, 0, 250,0)\",\r\n                borderCapStyle: 'butt',\r\n                borderDash: [],\r\n                borderDashOffset: 0.0,\r\n                borderWidth: 5,\r\n                borderJoinStyle: 'miter',\r\n                pointBorderColor: \"rgba(255, 0, 250,1)\",\r\n                pointBackgroundColor: \"rgba(255, 0, 250,1)\",\r\n                pointBorderWidth: 3,\r\n                pointHoverRadius: 5,\r\n                pointHoverBackgroundColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderWidth: 2,\r\n                pointRadius: 3,\r\n                pointHitRadius: 10,\r\n                data: data.eight_cons_uomean_outliers,\r\n                spanGaps: false\r\n            },\r\n            {\r\n                label: 'diff (pos/neg) outliers',\r\n                fill: false,\r\n                lineTension: 0,\r\n                backgroundColor: \"rgba(255, 0, 0,1)\",\r\n                borderColor: \"rgba(255, 0, 0,0)\",\r\n                borderCapStyle: 'butt',\r\n                borderDash: [],\r\n                borderDashOffset: 0.0,\r\n                borderWidth: 5,\r\n                borderJoinStyle: 'miter',\r\n                pointBorderColor: \"rgba(255, 0, 0,1)\",\r\n                pointBackgroundColor: \"rgba(255, 0, 0,1)\",\r\n                pointBorderWidth: 3,\r\n                pointHoverRadius: 5,\r\n                pointHoverBackgroundColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderWidth: 2,\r\n                pointRadius: 3,\r\n                pointHitRadius: 10,\r\n                data: data.diff_pos_neg_outliers,\r\n                spanGaps: false\r\n            },\r\n            {\r\n                label: 'MEAN',\r\n                fill: false,\r\n                lineTension: 0,\r\n                backgroundColor: \"rgba(0,0,0,1)\",\r\n                borderColor: \"rgba(0,0,0,1)\",\r\n                borderCapStyle: 'butt',\r\n                borderDash: [],\r\n                borderDashOffset: 0.0,\r\n                borderWidth: 1,\r\n                borderJoinStyle: 'miter',\r\n                pointBorderColor: \"rgba(0,0,0,0)\",\r\n                pointBackgroundColor: \"#fff\",\r\n                pointBorderWidth: 0,\r\n                pointHoverRadius: 0,\r\n                pointHoverBackgroundColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderWidth: 0,\r\n                pointRadius: 0,\r\n                pointHitRadius: 0,\r\n                data: data.assay_mean_graph,\r\n                spanGaps: false\r\n            },\r\n            {\r\n                label: 'Assigned Value',\r\n                fill: false,\r\n                lineTension: 0,\r\n                backgroundColor: \"rgba(25,25,112,1)\",\r\n                borderColor: \"rgba(25,25,112,1)\",\r\n                borderCapStyle: 'butt',\r\n                borderDash: [],\r\n                borderDashOffset: 0.0,\r\n                borderWidth: 1,\r\n                borderJoinStyle: 'miter',\r\n                pointBorderColor: \"rgba(25,25,112,1)\",\r\n                pointBackgroundColor: \"#fff\",\r\n                pointBorderWidth: 0,\r\n                pointHoverRadius: 0,\r\n                pointHoverBackgroundColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderWidth: 0,\r\n                pointRadius: 0,\r\n                pointHitRadius: 0,\r\n                data: data.assigned_value,\r\n                spanGaps: false\r\n            },\r\n            {\r\n                label: '2 LCL',\r\n                fill: false,\r\n                lineTension: 0,\r\n                backgroundColor: \"rgba(0,0,255,1)\",\r\n                borderColor: \"rgba(0,0,255,1)\",\r\n                borderCapStyle: 'butt',\r\n                borderDash: [],\r\n                borderDashOffset: 0.0,\r\n                borderWidth: 1,\r\n                borderJoinStyle: 'miter',\r\n                pointBorderColor: \"rgba(0,0,255,1)\",\r\n                pointBackgroundColor: \"#fff\",\r\n                pointBorderWidth: 0,\r\n                pointHoverRadius: 0,\r\n                pointHoverBackgroundColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderWidth: 0,\r\n                pointRadius: 0,\r\n                pointHitRadius: 0,\r\n                data: data.graph_lcl_2,\r\n                spanGaps: false\r\n            },\r\n            {\r\n                label: '1 LCL',\r\n                fill: false,\r\n                lineTension: 0,\r\n                backgroundColor: \"rgba(0,255,0,1)\",\r\n                borderColor: \"rgba(0,255,0,1)\",\r\n                borderCapStyle: 'butt',\r\n                borderDash: [],\r\n                borderDashOffset: 0.0,\r\n                borderWidth: 1,\r\n                borderJoinStyle: 'miter',\r\n                pointBorderColor: \"rgba(0,255,0,1)\",\r\n                pointBackgroundColor: \"#fff\",\r\n                pointBorderWidth: 0,\r\n                pointHoverRadius: 0,\r\n                pointHoverBackgroundColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderWidth: 0,\r\n                pointRadius: 0,\r\n                pointHitRadius: 0,\r\n                data: data.graph_lcl_1,\r\n                spanGaps: false\r\n            },\r\n            {\r\n                label: '2 UCL',\r\n                fill: false,\r\n                lineTension: 0,\r\n                backgroundColor: \"rgba(100,0,127,1)\",\r\n                borderColor: \"rgba(100,0,127,1)\",\r\n                borderCapStyle: 'butt',\r\n                borderDash: [],\r\n                borderDashOffset: 0.0,\r\n                borderWidth: 1,\r\n                borderJoinStyle: 'miter',\r\n                pointBorderColor: \"rgba(100,0,127,1)\",\r\n                pointBackgroundColor: \"#fff\",\r\n                pointBorderWidth: 0,\r\n                pointHoverRadius: 0,\r\n                pointHoverBackgroundColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderColor: \"rgba(220,220,220,1)\",\r\n                pointHoverBorderWidth: 0,\r\n                pointRadius: 0,\r\n                pointHitRadius: 0,\r\n                data: data.graph_ucl_2,\r\n                spanGaps: false\r\n            }\r\n\r\n        ]\r\n    };\r\n\r\n    //options\r\n    var options = {\r\n        responsive: true,\r\n        title: {\r\n            display: true,\r\n            position: \"top\",\r\n            text: label,\r\n            fontSize: 18,\r\n            fontColor: \"#111\"\r\n        },\r\n        legend: {\r\n            display: true,\r\n            position: \"bottom\",\r\n            labels: {\r\n                fontColor: \"#333\",\r\n                fontSize: 16\r\n            }\r\n        },\r\n        scales:{\r\n            yAxes:[{\r\n                ticks:{\r\n                    min:graph_min\r\n\r\n                }\r\n            }]\r\n\r\n        }\r\n    };\r\n    if(new_chart != null){\r\n        new_chart.destroy();\r\n    }\r\n    new_chart = new Chart(ctx, {\r\n        type: 'line',\r\n        data: data,\r\n        options: options\r\n    });\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/chartjs/Chart.js/issues/comments/290953552","html_url":"https://github.com/chartjs/Chart.js/issues/4015#issuecomment-290953552","issue_url":"https://api.github.com/repos/chartjs/Chart.js/issues/4015","id":290953552,"user":{"login":"etimberg","id":6757853,"avatar_url":"https://avatars0.githubusercontent.com/u/6757853?v=3","gravatar_id":"","url":"https://api.github.com/users/etimberg","html_url":"https://github.com/etimberg","followers_url":"https://api.github.com/users/etimberg/followers","following_url":"https://api.github.com/users/etimberg/following{/other_user}","gists_url":"https://api.github.com/users/etimberg/gists{/gist_id}","starred_url":"https://api.github.com/users/etimberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/etimberg/subscriptions","organizations_url":"https://api.github.com/users/etimberg/orgs","repos_url":"https://api.github.com/users/etimberg/repos","events_url":"https://api.github.com/users/etimberg/events{/privacy}","received_events_url":"https://api.github.com/users/etimberg/received_events","type":"User","site_admin":false},"created_at":"2017-04-01T23:17:27Z","updated_at":"2017-04-01T23:17:27Z","body":"Closing since this works in our samples and the above comment has some great advice."}}
{"actor":{"display_login":"etimberg"}}