Multiple Chart - CanvasJS JavaScript Charts
Multiple Chart
by canvasjs
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer2" style="width:60%; height:300px"></div>
<div id="chartContainer3" style="width:60%; height:300px;transform:translate(0px ,50px)"></div>
JavaScript
var dataPoints1 = [
{ x: 10, y: 71 , label:"Murder"},
{ x: 20, y: 55, label:"Commit Murder"},
{ x: 30, y: 50 , label:"Rape"},
{ x: 40, y: 65 , label:"Dacoity"},
{ x: 50, y: 95 , label:"Robbery"},
{ x: 60, y: 68 , label:"Grievous Hurt"},
{ x: 70, y: 28 , label:"Extortion"},
{ x: 80, y: 34, label:"Cheating" } ];
var dataPoints2 = [
{ x: 5, y: 427, label: "Constables"},
{ x: 10, y: 178, label: "Head-Constables"},
{ x: 15, y: 68, label: "Assistant Sub-Inspector"},
{ x: 20, y: 38, label: "Sub-Inspector"},
{ x: 25, y: 9, label: "Inspector"},
{ x: 30, y: 11, label: "Other Gazetted Officers"} ];
var dataPoints3 = [
{ x: 10, y: 171, label:"Murder"},
{ x: 20, y: 155, label:"Commit Murder"},
{ x: 30, y: 150 , label:"Rape"},
{ x: 40, y: 165, label:"Dacoity" },
{ x: 50, y: 195, label:"Robbery" },
{ x: 60, y: 168, label:"Grievous Hurt" },
{ x: 70, y: 128 , label:"Extortion"},
{ x: 80, y: 134 , label:"Cheating"}
];
renderMyChart1(chartContainer2, dataPoints2);
renderMyChart2(chartContainer3, dataPoints3,dataPoints1);
function renderMyChart1(chartContainer2, myData) {
var chart = new CanvasJS.Chart(chartContainer2, {
title:{
text: "Police Personnel Killed or Injured on Duty During 2014"
},
data: [
{
type: "column",//"lines"
dataPoints: myData
}
]
});
chart.render();
}
function renderMyChart2(chartContainer3, myData1,myData2) {
var chart = new CanvasJS.Chart(chartContainer3, {
toolTip: {
shared: "true" //disable here.
},
title:{
text: "Incidence,No. of Victims of Crimes Committed Against Senior Citizens During 2014"
},
data: [
{
type: "stackedColumn",
name:"Incidence",
dataPoints: myData1
},
{
type:...